VUE.JS 

Vue.js es un framework progresivo, es decir, podemos usarlo para cosas básicas (al estilo JQuery ) o para acciones más complejas como el desarrollo de Single Page Applications o incluso para temas de Server Rendering.

En su uso más básico, Vue no necesita de Webpack ni de instalación de transpilers o similares. Su inclusión en proyectos es tan sencilla como importar la librería en el HTML (desde un CDN como cdnjs, por ejemplo)

Como veis Vue.js es perfecto para cosas sencillas, pero si tenemos necesidades más complejas, podemos ir ampliando su funcionalidad mediante plugins.

Ciclo de vida de los componentes

En Vue.js el ciclo de vida de sus componentes es muy similar al de React. Dispones de métodos para acceder a ellos en el momento de su creación, actualización, destrucción, etc.

Los diferentes elementos de los componentes de Vue.js están organizados de una manera muy simple: los datos dentro de un objeto data y los métodos bajo un objeto methods. Aunque de esta manera se abandona el paradigma de clases de ES6 y esto parece una incongruencia, tal y como está estructurado en Vue, el encaje es perfecto. Esta aproximación es intencionada y su creador, Evan You, explica en su documentación los por qué.

Como hemos comentado, aunque Vue.js puede usarse como algo muy simple, la verdadera potencia de este framework se desvela cuando comenzamos a usar sus componentes. Cada día más, la orientación a componentes se está extendiendo en los distintos frameworks javascript y en este caso podremos organizar nuestra aplicación de manera similar a como lo hacemos en Angular 2, React o Polymer.

En Vue.js disponemos también de templates, quizá una de las features más acertadas de este framework.

Vue y Webpack han creado una plantilla con extensión .vue que nos permite tener en un solo fichero nuestro HTML, el CSS y el JS necesarios para nuestra página.

Al contrario que en otros frameworks en los que al tener todo junto en un solo fichero, obligamos, por ejemplo a los diseñadores, a conocer ese framework para añadir su parte y diseñar correctamente el layout de la página, en Vue se puede crear un fichero .vue con partes bien diferenciadas, como podéis ver en el siguiente ejemplo:

El loader de Webpack (vue-loader) se encarga de extraer cada parte a su fichero correspondiente cuando hacemos el despliegue para producción. Así podemos tener más organizado nuestro código por componentes.

Esta sintaxis os puede recordar a la que emplea Polymer en sus WebComponents, si bien Polymer lo hace dentro de ficheros .html.

Al final, en nuestro despligue tendremos nuestros ficheros .html, .js y .css separados y bien diferenciados.

Directivas

Si hemos destacado similitudes con React en el ciclo de vida de los componentes, Vue.js se aproxima a otro de los frameworks más populares hoy en día, como es Angular, en la implementación de Directivas.

Para los que no uséis Angular, las directivas son un método muy eficaz que nos permite extender la funcionalidad del HTML y decidir qué elementos se muestran o no, usar for para recorrer listados de elementos, asociar métodos a eventos y un largo etcétera.

La forma de implementación de Directivas en Vue.js es muy similar a la que implementa Angular, por lo que los que estéis acostumbrados a estas, tendréis una curva de adaptación muy rápida.

Os pondré un ejemplo simple: si queréis que un botón responda a un evento tipo click, usaréis la directiva v-on:click o @click en su forma reducida, asociando luego el método handler que queráis.

En Vue, al igual que Angular, tenemos separado Vista de Controlador utilizando HTML, directivas para la vista y JS para la lógica.

Manejo de estados

VueX es la librería que implementa el patrón Flux para Vue. Buscando la similitud con React, sería el equivalente a Redux.

VueX se instala como un plugin y extiende el comportamiento de Vue, permitiéndonos acceder a los estados y métodos mutacionales del mismo desde el componente que lo necesite. Al contrario que en React y Redux no es necesario crear containers. Simplemente por medio de getters podemos acceder a él.

Los cambios de estado se realizan de manera mutacional, no como en React. En VueX y Vue.js, debemos modificar el estado para que la vista refleje los cambios.

Asimismo, las operaciones asíncronas se manejan de manera más sencilla que en otros frameworks como puede ser React. En VueX no es necesario el uso de otras librerías para realizar llamadas asíncronas que manipulen el estado. De esta forma el manejo de estados en Vue.js con VueX queda mucho más claro y sencillo que en otros frameworks similares.

Vue-CLI

Todos los frameworks de calado del momento disponen de su propia herramienta de línea de comando, de manera que nos facilitan la creación de proyectos desde cero.

En Vue.js tenemos Vue-CLI que por medio de una serie de plantillas creadas por la comunidad y por los propios creadores de Vue, nos permite crear nuestro esqueleto inicial de proyecto de una manera rápida y sencilla.

Las plantillas más usadas son las de Webpack que generan ya de base el fichero de configuración del proyecto, así como las tareas necesarias para los distintos entornos del mismo.

Vue-CLI además instala los templates de manera automática. Usarlo es algo tan sencillo como:

Conclusión

Vue.js es un framework muy interesante, que combina potencia con simplicidad, lo que augura un amplio abanico de proyectos en los que usarlo, desde sites sencillos a proyectos más complejos como aplicaciones SPA.

Cuando nos enfrentemos a la decisión de elegir un framework (si es que tenemos la posibilidad de elegir) normalmente nos preguntaremos si emplear React, Angular o Polymer pero, ¿merece la pena meter a Vue.js entre esta terna de frameworks ya consolidados en el panorama?

Personalmente creo que sí. Aunque Vue.js sea aparentemente un recién llegado a la fiesta, lleva años en el barrio y como hemos podido ver, sus características no tienen nada que envidiar a los más famosos. Todos estos frameworks, incluido Vue.js son excelentes y con amplio soporte en la comunidad. 

En definitiva, Vue.js es un claro candidato a ser tomado en cuenta como alternativa a los todopoderosos Angular, React o Polymer.

Dale una oportunidad, quizá te sorprenda, ¡espero que para bien!