En esta entrada vamos a ver Vue.JS, un framework de JavaScript potente y ligero diseñado para construir interfaces web, especialmente en aplicaciones SPA (Single Page App).
Vue.JS destaca por su velocidad, sencillez y ligereza. De hecho, es tan ligero que resulta adecuado incluso para dispositivos IoT como el ESP8266 y el ESP32.
¿Cuál es el interés en Vue.JS? ¿Por qué es interesante frente a otras opciones como Angular, React o Knockout? ¿Qué tiene Vue.JS que le hace tan especial? Lo respondemos a continuación.
¿Por qué Vue.JS?
Empecemos con un poco de historia, recordando a jQuery. Todos conocemos esta librería de JavaScript y la contribución que ha supuesto al diseño de interface web dinámicas gracias, entre otros, a sus selectores y sus capacidades de manipulación del DOM.
Sin embargo jQuery supone un planteamiento imperativo lo que, entre varias desventajas, dificulta la creación de patrones de diseño tipo MVC, MVVM, MV-(whatever).
En sustitución/evolución han surgido varios desarrollos que permiten una planteamiento declarativo, centrados en la creación de interfaces “reactivos” en los que la vinculación con el modelo se realiza a través de bindings.
Esto es algo que a los desarrolladores de aplicaciones en Windows les sonará, ya que tuvimos una transición similar al pasar WinForms a WPF y UWP.
Entre esta nueva generación de frameworks declarativos destaca por popularidad AngularJS, que en su primera versión permitía crear de forma sencilla interface Web SPA. Muchos programadores nos hicimos fans de AngularJS nada más salir. Era como WPF llevado a web, te sentías como en casa.
Sin embargo las posteriores versiones (Angular 2, 4 y 5), aunque han mejorado muchos aspectos, también han ido complicando más y más el framework hasta hacer que muchos nos plateemos si necesaria tanta parafernalia para desarrollos pequeños y medianos.
Unido a sus problemas de retro compatibilidad, a tener que usar varios lenguajes de programación, múltiples dependencias con librerías, y que hasta para hacer una simple prueba necesites NodeJs, transcompilar, y template de 200Mb, esto ha hecho que muchos de sus antiguamente defensores nos planteemos alternativas como React o Knockout.
Vue.JS como alternativa
Aquí es donde entra Vue.JS un framework de JavaScript que en muchos sentidos recupera el espíritu del AngularJS original. Y lo cierto es que es usarlo y volver a enamorarte.
Fue creado por Evan You en febrero de 2014, aunque ahora cuenta con colaboraciones de múltiples usuarios en Github. En palabras de su creador Vue.JS fue creado tras trabajar con AngularJS cogiendo las partes que le parecían más útiles.
Vue.JS es un framework ligero, para usarlo en un proyecto necesitamos cargar un único fichero de 20kB. La curva de aprendizaje e muy suave, sobre todo si tenéis experiencia en Angular, o incluso en WPF. Además, dispone de una documentación amplia, que facilita el aprendizaje.
La estructura de Vue.JS está basada en funciones de render, interface declarativos, encapsulación en componentes y enrutado. Pero está diseñado para ser retro compatible y progresivo incrementalmente, es decir, que no tenemos que usar todas las funciones desde el primer momento, si no que podemos adaptar nuestros proyectos paulatinamente.
Probando Vue.JS
Vamos a hacer un pequeño proyecto para probar lo fácil que es integrar Vue.JS en un proyecto. En nuestro servidor web favorito, creamos dos ficheros.
Por un lado, un archivo index.html que contenga lo siguiente,
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Asociamos la App que creamos en Vue.JS -->
<div id="app">
<ol>
<!-- Usamos el componente que hemos definido en Vue.JS -->
<todo-item v-for="item in myList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
<!-- Esta es la única linea necesaria para cargar Vue.JS en nuestro proyecto -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Cargamos el fichero que contiene nuestra App en Vue.JS -->
<script type="text/javascript" src="./app.js"></script>
</body>
</html>Que únicamente contiene una página web en blanco, en la que usamos un div con el id=“app”, que asocia con la aplicación web que crearemos en el fichero JavaScript, y una enumeración todo-item que mostrará un listado de componentes que definiremos en el ViewModel. Por último, hemos cargado Vue.JS desde el CDN, y el fichero app.js que crearemos a continuación.
Por otro, el segundo fichero que llamaremos app.js, con este contenido,
// Definicion de un componente
Vue.component('todo-item', {
props: ['todo'],
template: '<li> {{ todo.text }} \
<input type="checkbox" id="checkbox" v-model="todo.value"> \
<span v-if="todo.value">{{ todo.hidden }}</span> \
</li>'
})
// Definicion de nuestra app de ejemplo
var app = new Vue({
el: '#app',
data: {
myList: [
{ id: 0, text: 'Item1', hidden: 'Hidden1' },
{ id: 1, text: 'Item2', hidden: 'Hidden2' },
{ id: 2, text: 'Item3', hidden: 'Hidden3' }
]
}
})En este fichero declaramos una pequeña aplicación de Vue.JS llamada simplemente App. En su interior únicamente tenemos en ‘data’ una colección de ‘items’ que contienen un texto (ItemN) y un texto oculto (HiddenN).
Por otro lado, hemos definido un template, que contiene el código html con el que vamos a representar los Items anteriores. La vista está formada por un checkbox, el texto, y el texto oculto.
El resultado es el siguiente. Vemos que, efectivamente, hemos listado todos los elementos que teníamos en ‘data’. Cada elemento muestra su propiedad ‘text’ y, si el checkbox del elemento está marcado, también muestra la propiedad ‘hidden’.
Conclusión
Así de sencillo es tener una App funcionando en Vue.JS. Solo es un ejemplo extremadamente simple, pero resulta refrescante ver lo rápido que es poner una App funcionando en Vue.JS. Sobre todo si lo comparamos, por ejemplo, con Angular5.
Por supuesto, Vue.JS es capaz de mucho más y tiene muchas más funcionalidades. En este ejemplo apenas hemos arañado la superficie de este genial framework, e introducido su sintaxis más básica.
Si queréis profundizar más en el uso de Vue.JS aquí tenéis un enlace a su documentación completa y su sección de ejemplos donde podéis ver proyectos muy interesante.
Por último indicar que Vue.JS es Open Source distribuido bajo licencia MIT. Si queréis probarlo está disponible en https://vuejs.org/.