The first rule of test items is never do test items!
There have already been many disputes about this on Habré, and then I had the opportunity to learn this lesson on my own skin. I sent the solution, but did not receive an answer. Even negative. Nothing. Of course, everything can be attributed to the crisis, that the vacancy was suddenly frozen (I hear this often lately, but the same vacancies continue to hang). Still, banal politeness would have been more than enough. The conclusion is unambiguous: you need to carefully check the reliability of the interlocutor before biting into the TZ.
Nevertheless, I deliberately took this step in order to test myself, to gain some experience, even in case of failure with the employer. The article will not be about that. Difficulties with the solution arise already at the stage of reading the technical statement. Sometimes you don't even know how to start a task, and the choice you make at the beginning will affect all stages of development.
There are many tutorials on how to create body art online, so how will mine be different? First, they are usually not made according to the technical assignment, which means that the authors "cut corners" and, in general, do not limit themselves to anything. Secondly, it is rare to see an explanation of why one or another path was chosen to solve the problem. Thirdly, my application is an order of magnitude more complicated than the standard to-do list, more on that later.
To get acquainted with the task that I received, I ask under the spoiler:
Technical task:
Use Vue.js to implement a small SPA note-taking application.
Each note has a title and a todo list, then Todo. Each Todo item consists of a checkbox and its associated text signature.
The application consists of only 2 pages.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
I must warn you right away that my solution does not possess any special architectural grace. There are reasons for this. On the one hand, of course, I want to impress the employer, on the other hand, the test task (hereinafter simply TK) is done at the expense of time for personal life, searching for other offers, preparing for an interview, etc. We choose the middle ground only if this is not your dream job.
Let's take a look at the task and possible ways to solve it:
Use Vue.js to implement a small SPA note-taking application. Everything is simple here: we use Vue CLI to create a project .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .