Vamos a armar la escena.

Usted ha estado construyendo sitios web desde hace unos años. Comenzaste de nuevo antes de que React se convirtiera en un gran problema, y ​​jQuery seguía siendo popular.

Y, de hecho, eso es exactamente lo que era su conjunto de herramientas. Como diseñador, una vez estuvo a la vanguardia de la tecnología porque conocía HTML, CSS y jQuery suficiente para aplicar cierta lógica a sus páginas..

Avancemos unos años hasta ahora, y te sientes un poco rezagado.

"Diseñador web" se está convirtiendo lentamente en una frase cargada, como "programador". El posible conjunto de herramientas para un diseñador web hoy en día es mucho más amplio de lo que una persona puede dominar.

¿Qué ha cambiado??

Las mayores áreas de cambio ciertamente no han sido en HTML. Lo que sabía hace cinco años todavía es aplicable en gran medida hoy.

CSS ha cambiado, pero no de una manera increíblemente rápida. Se ha implementado alguna nueva especificación, y han surgido nuevas herramientas como CSS Grid, pero nada está cambiando tanto y tan rápido que no puedes acelerar la velocidad..

JavaScript, por otro lado, es completamente diferente ahora de lo que era hace diez años, y significativamente diferente de lo que era hace cinco años..

Tenga en cuenta que hace diez años, NodeJS ni siquiera había sido lanzado. "Back-end" y "JavaScript" no se utilizaron para describir el mismo trabajo. Al mirar el gráfico de Google Trends para NodeJS, la popularidad de Node comenzó a crecer alrededor de 2010, pero hace apenas dos años solo alcanzó la mitad del nivel de interés máximo que recibió en 2017. Traducción: backend JavaScript es muy popular.

Gráfico de Google Trends para NodeJS

En 2013, los nuevos marcos basados ​​en JavaScript comenzaron a aparecer en la escena. React se presentó por primera vez en marzo de ese año, con el objetivo de proporcionar un enfoque de "aprender una vez, escribir en todas partes" al software en cada plataforma. VueJS se presentó menos de un año después como un marco de JavaScript alternativo orientado a la vista. El concepto de JavaScript como un simple lenguaje de scripting estaba siendo eliminado y reemplazado por un ecosistema de JavaScript mucho más maduro. Casi al mismo tiempo, no solo hubo un nuevo interés y desarrollo en los marcos de JavaScript, sino también en la maduración del lenguaje en sí. Con ES5 y ahora el ES2015-ES2017 orientado al año, se agregan nuevas funciones a JavaScript cada año..

No es de extrañar que si usted es un desarrollador web que utiliza un conjunto de herramientas que adoptó en gran parte hace cinco años, se siente un poco cegado por este desarrollo reciente.

En esta serie de artículos, le presentaré Vue JS, un moderno marco de JavaScript orientado a componentes. Al final de la serie de tres partes, sabrá cómo usar Vue JS, pero lo que es más importante, estará en el camino de la fluidez con el diseño web moderno y las técnicas de desarrollo front-end que impulsan las mejores y más usadas plataformas web del mundo. y aplicaciones.

Empecemos!

Es todo sobre el Vue (Ver)

Vue JS opera principalmente como un marco orientado a la vista. ¡Esto te hará sentir como en casa como diseñador! La "vista" es la pieza central de todo lo que sucede en Vue (de ahí el nombre).

Con Vue, la interfaz es la máxima representación de la interacción de su usuario. Todos los datos, métodos, lógica y eventos solo son importantes si afectan correctamente a la vista en sí..

Vue le permite definir una sola vista de representación con bastante facilidad. Veamos una instancia de Vue que representa una cadena en el navegador. Cargamos Vue (como esta versión alojada de CDN, por ejemplo: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js), luego agregamos nuestro JavaScript:

let vm = new Vue (el: "# my-app", data: firstName: "Jonathan", lastName: "Cutrell",)

Y algunas marcas:

 
Hola, firstName lastName!
 

Así es como se ve:

Este sencillo ejemplo muestra algunos conceptos importantes..

1. Se puede usar una instancia de Vue para representar simplemente el contenido de un elemento dado. los Vue El constructor toma algunas opciones. Una de esas opciones es la el Opción, abreviatura de "elemento '. Este es un selector que apunta a un elemento en su HTML - en este caso, el div con la clase mi aplicación.
2. Los datos se pasan directamente a la vista; Vue fácilmente le permite pasar datos de la datos Opción a la vista utilizando el dataKey sintaxis. En este caso, la cadena renderizada dentro de la h1 la etiqueta es "Hola, Jonathan Cutrell".
3. No es necesaria una llamada de representación manual. Si tu instancia de Vue está construida y una el se pasa, Vue se renderizará automáticamente a ese elemento sin ningún otro código. Más adelante, veremos cómo esta gestión del ciclo de vida de la renderización hace que su aplicación tenga menos probabilidades de tener errores..

Por el bien de la comparación

Veamos cómo podemos lograr lo mismo con jQuery puro.

let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName);

 
Hola, 
 

A primera vista, esto podría no ser muy diferente del primer ejemplo. Y, para casos simples como este, eso podría ser cierto.

Sin embargo, Vue tiene un puñetazo que se oculta tras bambalinas. Por ejemplo, ¿qué pasa si desea cambiar el nombre en la página??

let vm = new Vue (el: "# my-app", data: firstName: "Jonathan", lastName: "Cutrell", mount: function () setInterval (() => this.firstName = this .firstName.split (""). reverse (). join ("");, 1000);)

En nuestro escenario de cadenas, por supuesto, esto no es un cambio realista, pero cada intervalo de 1s va a actualizar el primer nombre para que sea una versión invertida de sí mismo. No es necesaria ninguna otra manipulación o representación DOM.

Ahora, para lograr lo mismo con solo jQuery.?

let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName); setInterval (function (let firstName = $ app.find (". js-first-name"). html (); let newFirstName = firstName.split (""). reverse (""). join (""); $ app.find (". js-first-name"). html (newFirstName);, 1000)

Una vez más, el impacto en el número total de líneas de código es relativamente bajo para este ejemplo. Sin embargo, la diferencia conceptual es significativa. Hablaremos de eso en la siguiente sección..

Donde esta tus datos?

Uno de los problemas a los que el diseñador web promedio se ha visto afectado al usar jQuery o una biblioteca similar para desarrollar aplicaciones es la falta de separación de inquietudes. Estoy seguro de que has escuchado esta frase antes, pero vamos a hacerlo más concreto con nuestro ejemplo de representación de nombres.

En cualquier momento dado durante el ciclo de vida de su aplicación, ¿dónde está la "versión" correcta de nombre de pila almacenado?

Con la versión Vue, la información siempre se almacena en el datos objeto. Si lo actualiza allí, se actualizará correctamente en todas partes. Los datos están contenidos. y gestionado en una sola ubicación.

En la versión jQuery, los datos se almacenan realmente en el dom. No hay representación de los datos en el JavaScript que se actualiza y luego se refleja. Por ejemplo, te darás cuenta de que configuramos un opciones objeto. Este objeto se establece estáticamente una vez. Sin embargo, cuando actualizamos el nombre en el setInterval llamada, el objeto de esa opción ya no es válido! Esto puede ser un problema. Además, el objeto de opciones puede actualizarse en cualquier momento, o eliminarse por completo, y no se producirá ningún impacto en la vista (siempre que ya se haya realizado la representación inicial).

Por qué es esto un problema?

Una vez más, con las aplicaciones de este nivel de simplicidad, puede ser difícil ver por qué esto importa. Pero a medida que su aplicación crece en complejidad, aunque solo sea un poco, el almacenamiento de datos en el DOM puede volverse extremadamente frágil y tedioso.

Superando la brecha: “Administración estatal”

"Entonces, ¿por qué no separo mis preocupaciones sin usar Vue?"

Esta es una pregunta natural para preguntar. ¿Cómo podríamos separar nuestras preocupaciones sin Vue entonces??

let options = firstName: "Jonathan", lastName: "Cutrell" función setOption (k, v) options [k] = v; hacer();  function render () let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName);  setInterval (function (let firstName = options.firstName; let newFirstName = firstName.split (""). reverse (""). join (""); setOption ("firstName", newFirstName);, 1000) render ();

Jajaja Así que ahora hemos creado nuestra propia máquina de renderización que permite la separación de inquietudes. Tenemos nuestro objeto de opciones, y mientras usamos nuestro setOption () función, vamos a volver a enviar cada vez que se actualiza la opción. Así que la fuente de datos ahora está separada de la vista. Victoria!

De hecho, este es un paso simple hacia algunos de los patrones que Vue usa debajo del capó. Sin embargo, Vue tiene mucha más funcionalidad y potencia de la que hemos presentado en este sencillo caso de uso..

Por ejemplo, ¿qué pasa si establecemos la nombre de pila a lo mismo ya está configurado para? No necesitamos reenviar todo eso, ¿verdad? Pero nuestro código de aplicación no sabe cómo diferenciar ese escenario. Esto es algo que Vue hace por ti, bajo el capó..

Subiendo

Ha habido mucho para ver por primera vez, ¡así que siéntate y empápate! En la segunda parte de esta serie de tutoriales, pondremos a Vue en funcionamiento mientras respondemos algunas de sus preguntas iniciales..

Aprender vue.js

Aprenda Vue.js con nuestra guía de tutoriales completa de Vue.js, ya sea un programador experimentado o un diseñador web que busque nuevas técnicas de desarrollo de front-end..