Nov, 20

¿Qué es Vue?

Por: Cristian Alarcón

Durante el último tiempo Javascript ha tomado un protagonismo gigante en medianas y grandes empresas. Es por ello que cada vez nacen más frameworks basados en él, para backend como en frontend, en este último sin lugar a dudas los más utilizados y dominantes del mercado son React/Angular, pero existen otras alternativas que han nacido en pro de entregar mayor agilidad y/o comodidad para los desarrolladores.

Vue (pronunciado como /vjuː/, como view) es un framework de Javascript progresivo para construir interfaces de usuario. A diferencia de otros frameworks monolíticos, Vue está diseñado desde cero para ser utilizado incrementalmente. La librería central está enfocada solo en la capa de visualización, la cual es fácil de utilizar e integrar con otras librerías o proyectos existentes. Por otro lado, Vue también es una muy buena opción para crear SPA’s (Single-Page Applications) cuando se utiliza en combinación con herramientas y librerías de apoyo.

Si bien es el framework mas reciente con su primer release lanzado en 2014, sigue creciendo año a año, y según npm trends actualmente cuenta con la mayor cantidad de estrellas (174k) en la plataforma de desarrolladores Github.

Una ventaja de Vue sobre Angular por ejemplo, es lo bien optimizado y el reducido tamaño de su core, al generar la build completa de una app de Vue con Vuex (una librería para orquestar y conectar el backend) y Vue Router (para manejar las rutas de la app) ocupan alrededor de 30KB gzipped; junto con un patrón MVVM (Model-View-ViewModel) permite separar la lógica de negocios de la interfaz de usuario, facilitando las pruebas, mantenimiento y escalabilidad de proyectos.

Vue implementa una arquitectura de componentes lo que permite modularizar tu aplicación de acuerdo a funcionalidades independientes. Estos componentes pueden ser una cabecera (header), menú, listado, etc. Sumado a ello cada pieza de código guardan todo lo necesario en los ficheros con extensión .vue (Component.vue), en ellos podemos incrustar HTML, CSS y el Javascript de ese componente, e incluso nuestro código CSS queda completamente encapsulado con la propiedad scoped si así lo deseamos. De igual forma, Vue nos da la libertad de usar lo que nosotros queramos usar, si mas adelante necesitamos Typescript lo podemos hacer. A diferencia de React permite ser implementado tan solo importando la librería desde el HTML en una sola linea, aunque no es lo recomendable hacerlo de esta forma para proyectos pequeños es una gran alternativa.

La comunicación entre estos componentes es bastante solida, contamos con eventos asíncronos, las llamadas entre componentes padres a hijos y viceversa son realmente sencillas de implementar reduciendo los tiempos de desarrollo, además de que contamos con una herramienta devtools que nos permite visualizar el árbol de componentes en tiempo real de nuestra aplicación, registrar los eventos, comprobar los states de nuestros modelos que resulta muy útil para todo desarrollador familiarizado con la lógica de componentes.

También se cuenta con una línea de comandos especial llamada Vue CLI creada bajo NodeJS, la cual nos permite generar un nuevo proyecto con templates predefinidos, seleccionar nuestro Preprocesador de CSS favorito, la configuración de Eslint, entre otros parámetros.

Mención especial para Nuxt.js un framework basado en VueJS, que nos entrega una base mas ordenada y segura que tendríamos que hacer manualmente en Vue nativo. Es decir que Nuxt es ideal para proyectos a mediano y largo plazo, permitiendo un mantenimiento mas estable.

Lo mas destacable de Vue es su curva de aprendizaje tanto si eres un desarrollador junior o senior te permite introducirte y/o adaptarte rápidamente a esta tecnología en crecimiento del mundo frontend.

En Trebol-it trabajamos con las últimas y mejores tecnologías para nuestros desarrollos. Entra a nuestro sitio web y conoce más sobre nosotros o postula y únete a nuestro equipo.