Después de Angular, cuyo artículo siempre podéis leer en nuestro blog, toca hablar de Vue.js.

También en este caso nos gustaría contaros un poco sobre su origen y cómo un grupo de desarrolladores repartidos por todo el mundo consiguió subirlo al podio de los frameworks Javascript más famosos, compitiendo con empresas del calibre de Google y Facebook, los creadores de Angular y React.

Historia

La historia de Vue.js comenzó cuando Evan You, su creador, durante el período universitario comenzó a trabajar en diversos Experimentos de Chrome, creando muchos diseños innovadores con animaciones 3d. Una de las más famosas fue un clon de Clear App, una aplicación TODO muy popular en su momento por sus gestos innovadores que fue replicada exclusivamente con el uso de tecnologías Web.

Este proyecto atrajo mucha visibilidad, gracias a los numerosos comentarios positivos publicados en Hacker News que aumentaron la popularidad de Evan hasta el punto de recibir una llamada de los reclutadores de Google que le ofrecieron unirse al innovador equipo centrado en los experimentos de Chrome. Como era de esperar, Evan aceptó con gran entusiasmo y se unió a un equipo de 5 desarrolladores creativos.

El trabajo de Evan consistía en trabajar en proyectos desarrollados inicialmente en Vanilla JavaScript; en algún momento decidió comenzar a usar algunos de los marcos existentes para completar sus tareas y de ahí nació la idea de Vue.js.

Evan notó que estos framework no resolvían sus problemas de desarrollo, siempre faltaba una pieza. El primer framework que utilizó fue Backbone.js, al que, sin embargo, le faltaba toda la parte interactiva con las vistas, necesaria precisamente para el tipo de proyectos en los que estaba trabajando. Después de eso, usó Angular, que proporcionó un excelente mecanismo para el Data Binding, el routing y el mantenimiento del estado sync con las view, pero requería escribir el código de cierta manera, lo cual era un problema ya que los proyectos en los que estaba trabajando necesitaban mucho. más interactividad que las Web Application típicas.

A partir de este momento empezó a pensar en crear su propio framework. Evan inicialmente quería crear una utilidad muy simple para vincular algunos componentes DOM a objetos Javascript. Llamó a este proyecto Seed.js, pero se vio obligado a cambiar su nombre después de intentar publicarlo en NPM  y descubrir que ya estaba en uso.

Luego comenzó a pensar en un nuevo nombre centrado en las características de su proyecto, que estaba muy centrado en la visualización y las vistas. Inicialmente, quería llamarlo View, pero parecía demasiado obvio, así que buscó en el traductor de Google las traducciones que le gustaban y terminó optando por el francés Vue.

El proyecto comenzó a ser muy popular, por lo que Evan decidió ampliar el alcance de su aplicación agregando más piezas al ecosistema, convirtiéndolo cada vez más en un framework completo.

En ese momento decidió dedicarse a tiempo completo al desarrollo de Vue.js, dado también el sorprendente crecimiento de la comunidad. Otro factor que contribuyó enormemente a su popularidad fue un tuit de Taylor Otwell, el creador de Laravel, que puedes leer a continuación: 

Al año siguiente, Vue.js se integró de forma nativa en los proyectos de Laravel, lo que contribuyó aún más al crecimiento de su comunidad y atrajo la atención de muchos desarrolladores que se unieron al equipo central con Evan.

Llegamos al 2016

A estas alturas la popularidad de Vue.js es indiscutible, durante ese año alcanzó los 3 millones de descargas y fue utilizado en muchos proyectos.

Lo fascinante de Vue.js es que el logro de estos resultados se debe exclusivamente al compromiso de innumerables desarrolladores que han contribuido y continúan haciéndolo a su crecimiento, brindando ayuda de muchas maneras, incluidos tutoriales, paquetes, complementos y mucho más. ¡Recordemos, de hecho, que detrás de Vue.js no hay grandes y ricas empresas como Google y Facebook!

En la siguiente foto puedes ver cómo Vue.js se ha convertido en un competidor directo de React después de superar a Angular en las estadísticas de uso a nivel mundial en los últimos años:

Entramos en detalle

Vue.js es un marco que se enfoca en crear interfaces web dinámicas y eficientes, además, al trabajar solo a nivel de visualización, se integra fácilmente a cualquier proyecto existente.

Entre sus principales características encontramos:

• Virtual DOM:
  • Vue.js usa un Virtual DOM para renderizar componentes, al igual que React. Esencialmente, es un clon del DOM real que absorbe todos los cambios realizados y luego los lleva a través de mecanismos en el DOM real, todo para acelerar las actualizaciones;
• Data Binding:

  • Esta característica se ocupa de manipular y asignar diferentes valores a los elementos HTML, para ello hace uso de la directiva v-bind;

• Transiciones y Animaciones CSS:
  • Vue.js proporciona métodos eficientes para aplicar transiciones a elementos HTML a lo largo de su ciclo de vida, cuando se agregan, modifican o eliminan, por ejemplo. También está diseñado para la integración de bibliotecas de terceros con el fin de facilitar la creación de una experiencia de usuario óptima;
• Propriedad Computed: 
  • Una de las características más importantes de este framework, las computed properties, cuando se usan en la plantilla, siempre escuchan los cambios de la interfaz de usuario y realizan la lógica adecuada. Son útiles cuando se trabaja con propiedades compuestas que dependen unas de otras y requieren una actualización constante. Las propiedades calculadas se almacenan en caché, por lo que se vuelven a ejecutar solo cuando cambia una de sus dependencias;
• Watchers:

  • Muy a menudo confundidos con los computed, deben usarse en casos en los que algunas propiedades cambian con frecuencia. Por ejemplo en los input de un form. Haciendo la vida más fácil para el desarrollador que no tiene que preocuparse por nada más sobre la gestión de datos. Los observadores también son útiles para realizar operaciones asincrónicas o costosas en respuesta a cambios en algunos valores; 

• Metodos:

  • Los métodos son la parte de un componente vue en la que se definen las funciones que realizan un cambio en el estado y por lo tanto en la plantilla. Pueden aceptar parámetros pero no guardar ninguna dependencia. Los métodos se vuelven a ejecutar cada vez que se carga el componente..

Como usar Vue.js

Para usarlo, primero, necesitamos instalar Vue-cli, disponible como paquete NPM. Después de verificar que tiene Node.js preinstalado, puede usar el siguiente comando para instalar la línea de comandos de Vue.js globalmente:

npm install -g @vue/cli

Después de eso, para crear nuestro primer proyecto Vue.js, simplemente ejecute este comando:

vue create prueba

Donde “prueba” es el nombre que hemos querido dar a este primer proyecto. 

En este punto aparecerá esta opción:

En el que se le preguntará qué versión de Vue desea utilizar. Para este ejemplo, elegimos la versión 3, ahora estable, y luego optamos por Yarn como administrador de dependencias.

Una vez que se complete el proceso de creación, ingrese al proyecto e inicie el comando yarn serve y vaya a la dirección:

http://localhost:8080/

Si todo salió bien, debería poder ver esta pantalla:

¡Felicitaciones, has creado tu primera aplicación Vue.js!

Estructura del proyecto

En la raíz del proyecto hay algunos archivos y carpetas extremadamente importantes, uno de los cuales es definitivamente el paquete.json, que contiene las dependencias esenciales para el correcto funcionamiento de Vue.

En su lugar, el archivo Index.html contiene el siguiente contenido:

Este archivo es el encargado de cargar nuestra aplicación. De hecho, todo se procesará dentro del div con la identificación de la aplicación, donde se inyectará la salida generada por Vue. Pero, ¿dónde comienza este proceso?

¡Gran pregunta! Para comprender esto, debe examinar el contenido del archivo main.js:

Y aquí es donde ocurre la magia: la función createApp acepta como parámetro un componente, en este caso App y lo monta en una aplicación de id de elemento HTML, que es el div que vimos anteriormente en index.html.

El componente de la aplicación contiene el siguiente código:

Cada componente Vue se estructura en tres secciones:

• <template></template>
• <script></script>
• <style></style>

Centrémonos en las dos primeras secciones por un momento. La sección Template, como puede comprender fácilmente, contiene los elementos HTML y los subcomponentes que se representan en la pantalla.

La sección de script realiza una exportación predeterminada de un objeto llamado Aplicación y la propiedad de componentes se usa para registrar los componentes externos y luego usarlos en el template.

En este ejemplo, el componente externo se llama "HelloWorld" y está contenido en la carpeta de componentes dentro de src, para usarlo también es necesario importarlo en la parte superior de la sección del script.

La implementación del componente HelloWorld es esta:

Como puedes ver, su implementación es prácticamente idéntica a la de main.js, con la diferencia de que esta vez el objeto de configuración tiene la propiedad props.

Define los valores que acepta como entrada cuando se instancia el componente. Estos valores luego se pueden usar en la plantilla mediante el uso de la interpolación.

<h1>{{ msg }}</h1>

La sintaxis de interpolación requiere el uso de corchetes dobles.

Adaptamos el componente HelloWorld

Ahora vamos a mostrar algunas de las directivas estándar de Vue.js para que pueda comprender lo fácil que es utilizarlo.

Directiva v-for

La directiva v-for hace posible representar múltiples elementos a partir de una fuente de datos, iterando a través de cada elemento individual. Por lo general, esta fuente de datos se obtiene de forma asíncrona a través de llamadas HTTP.

Para probarlo, agreguemos un array de objetos a la propiedad de datos() así:

fecha () {
return {
  users: [
    {firstname: 'Giuseppe', lastname: 'Rossi'},
    {firstname: 'Paolo', lastname: 'Rossi'},
    {firstname: 'Giovanni', lastname: 'Rossi'}
  ],
}
}

Luego usamos el v-for en la plantilla para leerlo e imprimir la lista de elementos en la pantalla:

<ul>
<li :key="user.firstname" v-for="user in users">
  {{user.firstname}} {{user.lastname}}
</li>
</ul>

Si todo ha ido bien, volviendo al buscador, verás esta lista:

Directiva v-model

La directiva v-model crea un enlace bidireccional en un elemento o componente de entrada. Para usarlo, primero debe definir una variable dentro de la propiedad dada del componente. Esta variable se utilizará como destino.

fecha () {
return {
  users: [
    {firstname: 'Giuseppe', lastname: 'Rossi'},
    {firstname: 'Paolo', lastname: 'Rossi'},
    {firstname: 'Giovanni', lastname: 'Rossi'}
  ],
  twoWayBinding: '', → Variabile Target
}
}

Después conectamos la variable target a un input creado en el template:

<input type="text" v-model="twoWayBinding">

Mediante esta conexión tenemos dos efectos principales: 

• Cada vez que el usuario añade un valor en el input, el valor de la variable target se actualizará automaticamente.
• Si cambiamos el valor de la variable target directamente dentro de la propiedad fecha(), mediante una función, también el template se actualizará automaticamente.

Una verificación adicional es imprimir la variable target en vivo, utilizando la interpolación dentro del template:

<div>
Valor Añadido: <span>{{twoWayBinding}}</span>
</div>

Resumen y código completo

El código completo de nuestro componente HelloWorld adaptado es el siguiente:

<template>
<div class="hello">
  <h1>{{ msg }}</h1>
  <div>
    <ul>
      <li :key="user.firstname" v-for="user in users">
        {{user.firstname}} {{user.lastname}}
      </li>
    </ul>
  </div>
  <hr />
  <div>
    <input type="text" v-model="twoWayBinding">
  </div>
  <div>
    Valor Añadido: <span>{{twoWayBinding}}</span>
  </div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {
  msg: String
},
fecha () {
  return {
    users: [
      {firstname: 'Giuseppe', lastname: 'Rossi'},
      {firstname: 'Paolo', lastname: 'Rossi'},
      {firstname: 'Giovanni', lastname: 'Rossi'}
    ],
    twoWayBinding: '',
  }
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-position: inside;
}
a {
color: #42b983;
}
</style>

El resultado es este:

Conclusiones

Hasta ahora hemos llegado al final de esta miniserie sobre los marcos de JavaScript más populares. Hablamos sobre su historia y la filosofía que querían seguir.

En general, lo que todos piensan es que Angular es el framework más difícil de aprender, mientras que React y Vue.js son más simples y, por esta razón, a menudo se recomiendan para aquellos que comienzan una carrera en el mundo Front-end. Además, algunos de vosotros podéis haber notado que Vue.js tiene mucho en común con React y Angular. Se puede decir que Evan, su creador, tomó las mejores características de sus competidores y las fusionó.

Aunque cada uno de ellos constituye una solución muy válida para el desarrollo de nuestras aplicaciones web, en ocasiones pequeñas diferencias pueden causar grandes problemas en la fase de desarrollo.

Stay tuned!