¡La primera regla de los elementos de prueba es nunca hacer elementos de prueba!
Ya ha habido muchas disputas sobre esto en Habré, y luego tuve la oportunidad de aprender esta lección en mi propia piel. Envié la solución, pero no recibí respuesta. Incluso negativo. Nada. Por supuesto, todo se puede atribuir a la crisis, que la vacante se congeló repentinamente (escucho esto a menudo últimamente, pero las mismas vacantes siguen colgando). Aun así, la cortesía banal habría sido más que suficiente. La conclusión es inequívoca: debe verificar cuidadosamente la confiabilidad del interlocutor antes de morder la TZ.
Sin embargo, tomé este paso deliberadamente para ponerme a prueba, para ganar algo de experiencia, incluso en caso de fracaso con el empleador. El artículo no tratará de eso. Las dificultades con la solución ya surgen en la etapa de lectura de la declaración técnica. A veces, ni siquiera sabe cómo comenzar una tarea, y la elección que haga al principio afectará todas las etapas del desarrollo.
Hay muchos tutoriales sobre cómo crear arte corporal en línea, entonces, ¿en qué se diferenciará el mío? En primer lugar, no suelen realizarse según el encargo técnico, lo que significa que los autores "cortan esquinas" y, en general, no se limitan a nada. En segundo lugar, es raro ver una explicación de por qué se eligió uno u otro camino para resolver el problema. En tercer lugar, mi aplicación es un orden de magnitud más complicada que la lista de tareas estándar, más sobre eso más adelante.
Para familiarizarme con la tarea que recibí, pregunto debajo del spoiler:
Tarea técnica:
Use Vue.js para implementar una pequeña aplicación de toma de notas SPA.
Cada nota tiene un título y una lista de tareas pendientes, luego Todo. Cada elemento de Todo consta de una casilla de verificación y su firma de texto asociada.
La aplicación consta de solo 2 páginas.
. 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 .
, . . , , , , ( ) , , .. , .
:
Vue.js SPA . : Vue CLI .
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)
}
}, .