Vue Capitulo 1 Progressive JavaScript Framework

Hoy damos inicio a la gran serie de Vue, hoy empezamos un gran viaje hacia nuevos mundos tecnológicos, hemos hablado sobre lo que se prepara de contenido en este gran camino de conocimientos nuevos y de grandes desafios tecnologicos.

Como desarrolladores, tenemos muchas herramientas de trabajo, pero nada suele ser tan importante como el conjunto de librerías a los que nos atamos en los proyectos a realizar. Incluir estas dependencias en nuestro proyecto va a determinar la forma en la que nosotros empleamos y el estilo que tendremos que aplicar. De ahí la importancia de elegir aquellas herramientas que realmente necesitamos y que nos harán sentirnos cómodos y relajados a la hora de aplicar en cada uno de nuestros proyectos a realizar.

Como antes de poder incluir cualquier herramienta en producción, hay que probarla y aprenderla, creo que es buen momento para que nos detengamos unas semanas y prestemos atención a una de las librerías de JavaScript que está dando de qué hablar en los últimos años: VueJS

Esta serie será extensa, de muchas raíces sobre esta gran herramienta, así que le dedicaremos nuestro tiempo a entenderla y a saber como se usa, si es lo que estás buscando entonces bienvenido.

¿Qué es VueJS?

Vue(pronunciado como viu) es la herramienta de JavaScript creada por Evan You, miembro bastante conocido en la comunidad por participar en el desarrollo de Meteor y por ser desarrollador de Google durante varios años.

El creador de Vue define su herramienta como un framework progresivo. Progresivo porque el framework se encuentra dividido en diferentes librerías bien acotadas que tienen una responsabilidad específica. De esta manera, el desarrollador va incluyendo los diferentes módulos según las necesidades del contexto en el que se encuentre. No es necesario incluir toda la funcionalidad desde el principio como en el caso de frameworks como AngularJs 1.x o EmberJS 1.x.

Es un sistema de modularización bastante parecido al de ReactJS, Facebook desarrolló un core para poder trabajar con vistas, pero a partir de ahí se han ido creando toda una serie de librerías(tanto por parte de Facebook como de la comunidad) que permite trabajar de una manera eficiente en un SPA. Aquí todas las piezas importantes se enmarcan dentro del proyecto de VueJS.

A lo largo de estos primeros capítulos nos centraremos en el estudio del core del framework, por ahora dejaremos de lado a vue-router y a vuex, aunque en algún momento llegaremos hasta ellos.

El core principal permite el desarrollo de componentes de UI por medio de JavaScript. La librería se enmarca dentro las arquitecturas de componentes(que tan de moda están) con una gestión interna de modelos basada en el patrón MVVM. Esto quiere decir que los componentes, internamente, tienen mecanismo de doble ‘data-binding’ para manipular el estado de la aplicación.

Presume ser una librería bastante rápida que consigue renderizar en mejores tiempos que ReactJS. Estos son los tiempos que podemos encontrar en su documentación:

 

 

Vue React
23ms 63ms Fastest
42ms 81ms Median

como curiosidad: VueJS tiene un tamaño de 74.9 KB.

 

 ¿Que caracteriza a VueJS?

En esta parte hablaremos las características más frecuentes que tienen en comparación al resto de las alternativas que se ofrecen en la actualidad. Las principales características son:

  1. Proporciona componentes visuales de forma reactiva.
  2. Cuenta con directivas, filtros y componentes bien diferenciados.
  3. La API es pequeña y fácil de usar.
  4. Utiliza Virtual DOM.
  5. Externaliza el ruteo y la gestion de estado.
  6. Renderiza templates aunque soporta JSX.
  7. Permite focalizar CSS para un componente específico.
  8. Cuenta con un sistema de efectos de transición y animación.
  9. Permite renderizar componentes para entornos nativos.
  10. Sigue un flujo one-way data-binding.
  11. Sigue un flujo doble-way data-binding.
  12. Tiene soporte para TypeScript.
  13. Tiene soporte para ES6.

Hasta aquí la teoría, para la próxima publicación iniciaremos las prácticas y el uso de este frameworks llamado VueJS. Estamos leyendonos amigos.