Patrón MVVM con Vue. Una joya para javascript

Patrón MVVM con Vue. Una joya para javascript
Escrito 3 years ago

Vue es una librería javascript que ha entrado en el mundo del desarrollo web por la puerta de atrás, sin hacer mucho ruido. Pero no por ello es una librería de segunda. De hecho es una pequeña joya para crear interfaces de manera rápida en javascript.

Vue es una librería para crear interfaces siguiendo el patrón MVVM (Modelo - Vista, Vista - Modelo), al igual que React, o Angular. De hecho se parece bastante Angular porque usa el concepto de directivas para crear las plantillas. Si alguien sabe usar Angular seguro que esta librería le resulta familiar.

NOTA:

Angular es un completo framework con muchas otras características a parte de implementar el patrón MVVM. Vue solo está enfocado en las interfaces y en dicho patrón.

¿Qué es el patrón MVVM?

Vamos a utilizar Vue para explicar de forma detallada en que consiste MVVM. Este patrón de diseño que se ha puesto de moda en javascript por su utilidad para pasar datos desde el código javascript -modelo- al código html -vista-, de una manera sencilla, sin tener que tratar directamente con las etiquetas html desde javascript.

Primer contacto.

Aquí un ejemplo simple en Vue para ir empezando. En el modelo aparece un dato especial llamado message. Y en la vista aparece una cadena especial, {{ message }}. Esto es una variable de plantilla. Vue detecta esta variables dentro de la plantilla y las reemplaza por sus valores en dentro del modelo. En este caso reemplaza la variable de plantilla {{ message }} por su valor en el modelo. El resultado es obvio

resultado html del ejemplo
1
2
3
<div id="app">
¡Hola programadores!
</div>

Relación Modelo - Vista

Quizás estaréis pensando, pero esto es una tontería, esto se puede hacer con javascript directamente sin tener que recurrir a ningún framework, cierto, pero el modelo tiene una cualidad bastante interesante, llamada data-binding. Este sistema permite que la vista se actualice automáticamente, cada vez que se realice algún cambio en los datos del modelo.

Este ejemplo servirá para mostrar el data-binding. En la plantilla vemos 3 variables de plantilla: hour, minutes, seconds. Estas se reemplazarán por el valor del modelo. Estos valores se crean de forma dinámica, utilizando el método updateTime(), que se ejecuta al crearse el objeto clock. Este método guarda la hora, minutos y segundos del sistema en las respectivas variables del modelo. Todo esto hace que el resultado nos muestre la hora exacta de nuestro sistema.

Pero, ¿por qué el reloj está funcionando?, solo debería mostrar los datos iniciales de las variables hour, minutes y seconds. Pero vemos que el reloj está continuamente funcionado. Para entender lo que está ocurriendo, fijaos en esta linea del código javascript.

Código
1
setInterval(clock.updateTime, 1000);

En esta linea estamos diciendo que el método de nuestro modelo clock.updateTime(), se ejecute cada segundo de manera indefinida. Y aquí viene el secreto del data-binding. Cada vez que una de las variables de plantilla modifica su valor, Vue ordena que se re-pinte la vista con los nuevos valores. Por eso el reloj está funcionando continuamente. Cada segundo, se ejecuta el método clock.updateTime(), el cual actualiza los valores de hour, minutes y seconds. Vue detecta que una o más variables de plantillas han cambiado su valor y ordena re-pintar la vista con los nuevos valores. Y así de manera indefinida. Esta es la gracia del MVVM.

Relación Vista - Modelo

Pero el modelo MVVM tiene más. Si antes hemos visto como pasar datos desde el modelo a la vista. Ahora es el turno de la relación inversa. Que el modelo recoja información de la plantilla. Esta información puede ser:

Un evento javascript

En este ejemplo vemos como se ejecuta un evento de javascript en la plantilla. Si hacemos clic en el botón vemos como el contador se incrementa en uno. El "truco" de esta acción está en la directiva v-on:click="increment()" que tiene la etiqueta button. Esta directiva de Vue nos dice que cada vez que que se haga clic en el botón ejecute la función increment() de nuestro modelo (v-on:click es muy similar a la propiedad onclick que tienen todas las etiquetas html). El método incrementa el dato number en 1. Lo cual a su vez, implica que su valor cambie y que Vue re-dibuje la vista.

Datos de los campos de los formularios

Este otro ejemplo Vemos como recoger datos del campo de un formulario y guardarlo en el modelo. Gracias a la directiva v-model="name" que tiene la etiqueta input. Esta directiva recoge el valor del input y lo guarda en la variable de plantilla name. Bastante sencillo recoger datos ahora, ¿verdad?. Esta directiva se puede aplicar a todo los campos input, select y textarea

Más datos sobre Vue

Ya hemos visto algunos ejemplos de como funciona Vue. Su parecido es similar a las directivas de angular. Y por supuesto al igual que angular también tiene directivas condicionales y de repetición, para listas y objetos de javascript. - Ver ejemplo de condicionales y bucles-.

También podremos modificar atributos de una etiqueta desde Vue con la directiva v-bind, como en este ejemplo. En él modificamos el atributo href de un enlace html usando Vue.

Y por último Vue permite crear directivas propias, reutilizables, que podrás añadir a tus plantillas. Además muchas otras características.

Le llevo probando una semana y debo decir que me está encantando esta librería. Aquí podéis ver un ejemplo con tablas. La librería es demasiado extensa como para resumirla en una sola entrada. en su página oficial podréis encontrar más ejemplo así como un extensa guía. Traeré más ejemplos en otras entradas.

Comentarios