En este blog vamos a explicar qué hace PoC Vue 3.0 y por qué es una buena opción para el desarrollo front-end, sin entrar en el detalle de la implementación.
“Vue (pronunciado /vjuː/, como view) es un framework 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, y es fácil de utilizar e integrar con otras librerías o proyectos existentes.”
Es decir, es un framework PERO progresivo. Es decir, tiene una serie de reglas para trabajar con él (por eso no rehuye la palabra framework.. no como otros) pero está diseñado para ser usado para que ocupe desde una pequeña parte del front-end de una aplicación web, hasta proyectos enteros.
¿Qué es Vue?
Los frameworks de desarrollo front-end, y en particular Vue, nacen con la idea de facilitar la modularidad de las aplicaciones en front-end. En realidad, la idea es tan vieja como la propia ciencia de la computación:
Si tenemos una tarea grande (por ejemplo, hacer una aplicación) parece una buena idea, dividir esta tarea en pequeñas subtareas (divide y vencerás) e idealmente, hacerlo de forma que estas unidades inferiores de la tarea principal, puedan ser reutilizables.
Esto es básicamente lo que intenta hacer Vue: permite crear un sistema de componentes jerarquizado que divida una aplicación (o mejor dicho, la vista de una aplicación) en distintos elementos.
En realidad, esto es una cosa que se puede conseguir nativamente con “web components” (https://developer.mozilla.org/en-US/docs/Web/Web_Components) lo que hace vue es, además, añadir una serie de características para mejorar tanto la experiencia de desarrollador como el código final.
Vamos a ver esas características brevemente, sin entrar en el detalle de su implementación (para los más avanzados, veréis que los ejemplos están con option API, al final trataré el tema de composition API y alguna cosa más específica sobre la versión 3 de vue):
Conceptos clave sobre Vue
Renderización Declarativa / Plantillas
Vue.js utiliza una sintaxis de template basada en HTML que le permite vincular de forma declarativa el DOM renderizado a los datos de la instancia de Vue
Interpolación de datos
Es el enlace que se crea entre los elementos “especiales” de las plantillas y el código javascript que lo controla.
El ‘counter’ del ejemplo anterior es la representación en la vista del ‘counter’ que se devuelve en este método data
Reactividad
Las expresiones usadas en la plantilla son reactivas a los cambios en el código.
En el ejemplo anterior, “counter” es reactivo y se podría actualizar desde el código en algún tipo de circunstancia o evento.
Como por ejemplo:
(después entraremos un poco más en detalle sobre reactividad y como ha cambiado en la versión 3 de vue)
Virtual DOM
En el ejemplo anterior, la variable counter de este componente de vue, actualizará su valor (aumentando en una unidad) cada segundo y estos cambios se verán de forma automática en la vista.
Este cambio reactivo de la vista se realiza a través del virtual DOM (lo que hace el renderizado muy rápido, más aún en la 3 que en la 2) ya que no se actualiza e DOM completo del componente sino únicamente la parte que se ha actualizado.
Hooks de ciclo de vida
Esto se suele explicar al principio de las presentaciones de vue, pero la verdad es que a mi, me confundía más de aclararme cosas y he pensado que si entendíamos un poco antes qué hacía vue, podíamos entender esto del ciclo de vida de un componente y los hooks asociados que tiene:
(Como en otros frameworks/librerías de front) Básicamente la idea es que cuando se hace uso de un componente/aplicación de vue pasa por una serie de estados, al entrar en estos estados, se lanzan unos hooks en los cuales podemos hacer cosas.
Por ejemplo, al crearse un componente nos podría interesar hacer una llamada al back para traernos datos o al destruirse podríamos querer eliminar de localStorage datos almacenados.
Directivas
Volviendo a lo que se puede hacer en una aplicación de vue, una las herramientas más potentes del framework son las directivas que sirven para aplicar un comportamiento especial a partes de la plantilla que finalmente se va a presentar.
Voy a citar algunas para no hacerlo muy pesado
- v-if/v-else -> para mostrar cosas condicionalmente (ojo, el elemento que no entra en el if desaparece del DOM, no se oculta)
- v-for -> para renderizar bucles
- v-on (@) -> añadir listeners
- v-bind (:) -> enlazar propiedades de los componentes a expresiones
- v-model -> two way binding!!
Data y methods
Cada instancia de vue puede tener asociados unos datos(reactivos en las plantillas) y unos métodos. Ambos son accesibles en cualquier parte de la instancia del componente.
Propiedades computadas
Además de datos y métodos, las instancias de vue pueden tener asociadas una serie de propiedades computadas que se almacenan en caché, cambian según sus dependencias y son accesibles en cualquier parte de la instancia.
Las expresiones en el template están diseñadas para operaciones simples. Poner demasiada lógica en sus templates puede hacerlos grandes, complejos y difíciles de mantener. Por ejemplo:
Este ejemplo ya no es tan declarativo y simple, además, ¿qué pasaría si se quiere invertir el texto de este message en más sitios?
Es para estos casos para lo que están las propiedades computadas, el código anterior quedaría más declarativo y reutilizable así:
Para ello, tendríamos que declarar en nuestro componente la propiedad computada:
Componentes de Vue
El sistema de componentes es otro concepto importante en Vue, como en otros framworks/librerías, es el elemento clave. Al final, una aplicación se podría ver como un árbol de componentes, con un elemento(componente) raíz, del que salen diversas ramas y hojas, las cuales tienen similitudes entre si.
Estas similitudes podrían organizarse en componentes reutilizables, que son básicamente trozos de código (instancias de vue, un componente es esencialmente una instancia de Vue con opciones predefinidas) que es responsable de una parte de la aplicación y que puede usarse varias veces.
Por ejemplo, un componente de una tabla, podría usarse para mostrar datos de usuarios y facturas, vue permite renderizar copias de este componente «tabla» que implementara ya sus propias funciones (estilo, paginado…)
La forma en la que los componentes se pasan información entre ellos es a través de las props (padre a hijo) y los eventos personalizados(hijo a padre). En principio esta es la forma de pasar información entre componentes (aunque siempre hay otras opciones: con control de estado vía vuex, bus de eventos y otros truquillos como eventos al root) pero la idea es que los componentes trabajen pasándose la información de forma jerárquica padre<->hijo
Watchers/slots/dinamic components/transiciones/animaciones...
Hay más características que pueden enriquecer una aplicación de front-end y que hacen de vue un framework muy potente. Se me escapa del scope de este tip pero recomiendo echar un ojo a la guia oficial que está muy bien: https://v3.vuejs.org/guide/
y control de estado, testing, SSR...
Novedades de la versión 3 de Vue
Las características que hemos comentado anteriormente son las que definen a vue y están disponibles en el framework casi desde su nacimiento (al menos desde la versión 2).
Con la nueva versión, aparecida en septiembre de 2020, se han mejorado una serie de aspectos para hacer el framework más rápido, mantenible y con un menor peso.
Estos objetivos se han conseguido con las siguientes características aparecidas en vue 3:
Composition API
El gran cambio que tenemos en Vue 3 es que se introduce la Composition API, una nueva forma alternativa de escribir código en Vue, permitiendo aún la Option API.
La Composition API está diseñada para mejorar sustancialmente la capacidad de crecimiento de un proyecto, así como facilitar la reutilización de componentes.
La modalidad Options API nos permite trabajar mediante opciones en un objeto de Vue. La información está separada por nombre de estructuras, de modo que la curva de aprendizaje es muy sencilla y agradable.
Option API:
Por otro lado, la Composition API, en lugar de separar la información en opciones, utiliza un método especial llamado setup() (que se ejecuta justo antes de que el componente sea creado) donde podremos escribir nuestro código Javascript de inicialización del componente. Dicho hook devolverá los elementos que queramos utilizar en el resto del componente (básicamente en el template)
La forma de trabajar con esta Composition API es más cercana a javascript nativo y es mucho más práctica para reutilizar datos y crear aplicaciones grandes y fáciles de mantener.
En la siguiente imagen se puede ilustrar cómo mejora la organización de código. Se explica aquí: https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api
Nueva reactividad en Vue
El otro gran cambio en Vue 3 es cómo se gestiona la reactividad. En esta nueva versión se hace de una forma más explícita y flexible.
Hasta esta versión 2, todo lo declarado en el data() se convertía (de una forma como mágica) en reactivo pero si esa estructura cambiaba, por ejemplo si dentro del data había un objeto y se le añadía una nueva propiedad al mismo, esta propiedad no era reactiva.
Si este dataObject en algún momento se le añade otra propiedad: dataObject.property2 = ‘test’ ésta no sería reactiva (no se volver a renderizar el DOM en sus cambios)
Ahora podríamos hacer:
Si este dataObject en algún momento se le añade otra propiedad: dataObject.property2 = ‘test’ ésta vez, sí sería reactiva.
A parte de la evidente mejora del reactividad en profundidad, la reactividad se vuelve más concisa y explícita, permitiéndonos ahora hacer reactivo lo que queramos.
Tree Shacking
Tree shacking es una técnica que descarta del build final de la aplicación aquellos métodos que no se están usando realmente. De esta forma, el build final es más ligero.
V2
V3
Si en la versión v3 no usáramos la función nextTick, no se empaquetaría en el build final.
Soporte a Typescript
El core de vue 3 ha sido reescrito en typescript y el soporte de los IDEs para el autocomplete ha mejorado.
Conclusión
Por los motivos enumerados anteriormente: progresividad, developer experience, rapidez, escalabilidad… creo que Vue es una gran opción para desarrollar la capa de presentación (el front-end) para cualquier tipo de proyecto.
¡Habla con nuestros expertos!
