Introducción a Vue.js, primera parte

Inauguro este blog dedicado al lenguaje javascript y su ecosistema con una entrada dedicada a una de las librerías mas prometedoras para este 2018. Comenzamos el año con React reinando y el framework de Angular fragmentado en diferentes versiones, algunas  incompatibles entre sí y con sus usuarios un tanto desorientados. En este escenario, Vue.js se presenta como una alternativa con un gran potencial de crecimiento debido a su potencia y (relativa) simplicidad.

Aunque parezca mentira no hay una traducción al español de la documentación de Vue.js, por lo que me voy a basar en la version en inglés de su capitulo introductorio, con algunas traducciones literales de parrafos, para hacer este primer artículo de aproximación al framework. Durante el mismo (y en todos los articulos del blog) utilizaré libremente las palabras framework y librería aunque no sean intercambiables en todas las ocasiones, así que no te sorprendas por ello.

¿Que es Vue.js?

Vue, pronunciado como view en ingles, es un framework para la construcción de interfaces de usuario. La librería principal esta orientada a la capa de presentación únicamente, dejando la integración del resto de capas en el uso de otras librerías de terceros. Vamos a hacer una primera aproximación a Vue.js de la manera mas práctica, con un ejemplo.

Mi primera aplicación con Vue.js

Hay múltiples maneras de comenzar a trastear con Vue. Yo lo he hecho con los siguientes elementos :

• Visual Studio Code: el editor  gratuito de Microsoft es mi herramienta favorita para trabajar con el código. Tenéis otras alternativas como Atom de Google o Sublime Text de Sublime HQ
• vue-cli: interface de linea de comandos para la generación del esqueleto de un proyecto de Vue-js. Gracias a su uso podremos centrarnos en empezar a programar sin tener que preocuparnos de configurar herramientas adicionales. Para poder utilizarlo necesitamos disponer de Node.js y el gestor de paquetes de node, npm (se instala automáticamente con Node.js)

Armados con node,npm y el editor de código podemos crear nuestra primera aplicación vue.js. Para ello instalamos de manera global vue-climediante npm:

npm install vue-cli -g

Y ya estamos en disposicion de generar el esqueleto de nuestro proyecto:

vue-cli init webpack-simple ruta/al/proyecto

El script te hará algunas preguntas, puedes contestar a todas con el valor por defecto. Cuando haya terminado, tendremos en el directorio que le hayamos indicado un proyecto configurado con webpack y vue-loader, una libreria adicional que nos va a permitir generar al vuelo los paquetes de webpack que incluyan nuestros archivos *.vue. Además vamos a disponer de webpack-dev-server, el servidor de desarrollo de webpack que nos va a permitir ejecutar nuestra aplicación inmediatamente. Vamos a ello:

cd ruta/al/proyecto
npm install
npm run dev

¡Despegue! si todo ha funcionado webpack esta ejecutando su servidor web de desarrollo y el proyecto esta disponible en http://localhost:8080

Página de bienvenida del esqueleto de Vue.js creado con vue-cli

Anatomía de la aplicacion Vue.js

Echemos un vistazo a la aplicación que acabamos de crear, empezando por index.html:

  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

Las dos primeras lineas son las importaciones para que webpack incluya en nuestro fichero build.js los componentes necesarios: el core de Vue y nuestra vista App.vue. Además se instancia el componente principal de la aplicación (App, importado de App.vue) que se renderizará sobre el div con id «#app» de index.html. Este componente esta declarado en un fichero aparte, App.vue, lo que en Vue.js se conoce como SFC (Single File Component). Hablaré de estos en un próximo artículo, así que por el momento, y para simplificar vamos a modificar nuestros ficheros para que queden así: index.html:

<div id="app">
    <h1>{{mensaje}}</h1>
</div>

import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    mensaje: "Mi primera aplicación Vue.js"
  }
})

Al guardar los archivos los cambios se reflejarán de inmediato en el navegador que habíamos abierto gracias a la recarga en caliente del webpack-dev-server. Ya tenemos nuestra primera aplicacion Vue.js en marcha. Lo que hemos hecho hasta aquí parece muy similar a renderizar una plantilla declarada en una cadena, pero Vue.js ha  hecho mucho más que eso. Los datos y el DOM están ahora enlazados, y todo es reactivo. Puedes comprobarlo abriendo la consola de depuración de Javascript de las herramientas de desarrollo de tu navegador y cambiando el valor de app.mensaje app.mensaje="Está enlazado!" El nuevo valor se refleja de manera inmediata en el punto donde estamos renderizando la variable mensaje de nuestro componente.

Enlace de datos en Vue.js

Si has tenido experiencias con otros frameworks como AngularJS la sintaxis mostacho (el nombre de las variables entre dos llaves {{}}) ya te será familiar. En Vue.js también se utiliza para renderizar el contenido de una variable, y las similitudes no terminan aquí. Para enlazar propiedades de los elementos del documento HTML a nuestros datos se utilizan directivas, con una sintaxis muy parecida a la del framework de Google:

index.html

<div id="#app"> 
  <ol> 
    <li v-for="tarea in tareas"> 
      {{ tarea.texto }} 
    </li>
  </ol> 
</div>

main.js:

var app = new Vue({
  el: '#app',
  data: {
    tareas: [
      { texto: 'Aprender JavaScript' },
      { texto: 'Aprender Vue' },
      { texto: 'Crear este programa' }
    ]
  }
})

También podemos hacer enlaces de dos direcciones en vue.js mediante la directiva v-model:
index.html:

<div id="app">
  <p>{{ mensaje}}</p>
  <input v-model="mensaje">
</div>

Y en main.js:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Escribe algo'
  }
})

Como se puede apreciar no hay ninguna manipulación directa del DOM para hacer todo esto. Vue.js se encarga de modificar el modelo de objetos del documento según sea necesario.

Hasta aquí esta primera parte de la introducción a Vue.js. En la segunda parte veremos una de las  caracteristicas más interesantes de esta librería: la composición mediante componentes de aplicaciones y los SFC, single file components, que nos van a permitir encapsular en un único fichero la presentación, la lógica y la definición de estilos de cada uno de estos componentes de manera individualizada y encapsulada.