Introducción a VueJS

Hoy quiero introducir un framework al cual le vi perspectivas desde su surgimiento por la sencillez en la que está enfocado. Por alguna razón que en estos momentos me pregunto, deje de seguir sus nuevas versiones y las mejoras que estas traían, enfocado en otras herramientas como Dojo Toolkit, la cual sigo recomendando a pesar de no ser tan popular. Hace poco tiempo volví a ver a VueJS en su segunda versión y las potencialidades que tiene me llamaron bastante la atención sobre todo porque mantiene el mismo enfoque de sencillez que le vi en sus primeras versiones. En este artículo veremos alguna de las características que posee.

VueJS se autodenomina como un framework progresivo, nos brinda de posibilidad de indicar qué partes del framework queremos incluir ya que está modularizado en diferentes librerías separadas que permiten ir añadiendo funcionalidad en el momento que las vayamos necesitando.

El core principal de VueJS está formado por una librería encargada de renderizar vistas en el navegador. Su forma de organizar el código es por medio de pequeños componentes que contienen todo el HTML, CSS y JavaScript necesario para funcionar como pieza independiente. Estas piezas se van componiendo en un árbol jerárquico de componentes hasta formar nuestra aplicación. Usar esta librería es tan fácil como importar el script en nuestra página HTML.

Si lo único que necesitamos como desarrolladores es una mejor forma de organizar y renderizar nuestros pequeños componentes visuales, nos quedamos ahí y no incluiríamos nada más. En el momento que nuestra aplicación empezase a crecer, contamos con librerías para gestionar las rutas de nuestra aplicación como vue-router o con librerías para gestionar el estado global de la aplicación como pueda ser vuex. Si nuestra aplicación tuviese que tener una gran optimización o tener buen SEO, podemos incluir y trabajar con vue-server-rendering.

Y así nos pasaría con muchas más funcionalidades. La cantidad de librerías con las que se cuentan (ya sean creadas por los desarrolladores oficiales o por la comunidad) es tan grande y cubre tal espectro de funcionalidades, que será difícil que nos encontremos desamparados y sin esa utilidad que nos es indispensable, y esa es una ventaja muy grande, el tener una amplia comunidad sin dudas ayuda muchísimo, y a mi criterio, esta comunidad seguirá en aumento.

VueJS fue creado como proyecto personal por Evan You, antiguo desarrollador de Google, en un intento de simplificar el funcionamiento de AngularJS. El framework empezó a ser tan fácil y simple de usar que, una vez que su creador decidió subirlo a los repositorios de Github, la comunidad fue usándolo en cada vez más proyectos.

Empresas como Xiaomi, Alibaba o Gitlab son algunos de sus grandes exponentes. Si miramos las estadísticas de las expectativas de uso en el año 2018 encontramos que muchas personas y empresas están interesadas en conocerlo y usarlo.

En VueJS, los componentes gestionan un modelo de datos interno. Estos componentes están diseñado bajo el patrón MVVM. Esto quiere decir que el desarrollador no tiene que preocuparse tanto por cómo o cuando renderiza un modelo en pantalla y sí más en cómo tiene que ser la lógica que gestiona ese modelo. El renderizado de HTML es delegado a la librería. Nosotros simplemente jugamos con datos, métodos y plantillas HTML donde indicamos cuando se tiene que pintar cada parte del modelo.

VueJS sabe comunicarse muy bien por medio de eventos asíncronos. Un componente hijo se puede comunicar con su componente padre por medio de eventos. Dos partes del sistema pueden comunicarse por medio de eventos. Los propios modelos de un componente son capaces de enviar eventos para indicar cuándo renderizarse. El sistema de componentes se convierte en un organismo vivo que reacciona muy bien al cambio y realiza acciones programadas por el desarrollador. Esto se debe a que el módelo de datos del componente es envuelto por getters y setters especiales encargados de gestionar estas reacciones.

Para proyectos no tan básicos, se recomienda usar el CLI que han creado sobre NodeJS. Esta herramienta permite empezar un proyecto con un boilerplate (o plantilla base) configurado a nuestro gusto de una manera fácil y sencilla. Simplemente descargando desde npm la herramienta vue-cli, podremos crear una estructura inicial con la que trabajar que cumple con la guía de estilo pactada por la comunidad.

Otra de las características que posee VueJS es que los componentes guardan todo lo necesario en ficheros con extensión .vue. Estos ficheros contienen todo el HTML, el CSS y el JavaScript de un componente. Gracias a las etiquetas template, script y style, se tienen los conceptos separados, pero juntos, de esta forma es más fácil reutilizar ficheros en más de un proyecto. Todo el contenido queda más claro. Si el desarrollador está trabajando en un componente en particular, tiene todo a la vista.

El ciclo de vida de VueJS contiene métodos con los que se puede manejar el comportamiento del mismo dependiendo del momento. Puedes acceder a él en el momento de su creación, de su actualización, destrucción, etc. En estos momentos es posible acceder para añadir o eliminar funcionalidades.

Podríamos seguir dando características del framework y hablando de sus ventajas sobre todo para el desarrollo de Single Page Application, pero por hoy me parece bien como una introducción a la tecnología. En caso de interesarles el tema podemos continuar una serie de artículos llevando esta teoría a códigos, lo dejo a su consideración, me lo hacen saber en los comentarios.

Referencias:

https://es-vuejs.github.io/vuejs.org/v2/guide/

https://www.genbeta.com/desarrollo/por-que-elegir-vuejs-5-razones-para-considerarlo-nuestro-proximo-framework-de-referencia

https://carlosazaustre.es/que-es-lo-que-me-gusta-de-vue-js/