Recientemente tuve la oportunidad de comenzar un proyecto web para un cliente donde tenía la libertad de utilizar las tecnologías de mi preferencia. En mi experiencia, las empresas ya tienen su entorno definido y nosotros, los programadores, tenemos que adaptarnos a ellos para hacer nuestro trabajo. Así que vi esto como una gran oportunidad para aprender sobre tecnologías nuevas que están dominando el mercado. Específicamente en el área del diseño front-end y la experiencia de usuario (UX).

Con esto en mente, comencé a hacer mi investigación sobre herramientas que tuvieran las siguientes características:

  1. Que funcione tanto en computadoras desktops como en tabletas y teléfonos celulares
  2. Que provea una estructura sea fácil de mantener
  3. Que me permita crear SPAs fácilmente
  4. Que cuente con buena documentación

Para mi cliente es súper importante que funcione en cualquier tipo de dispositivo. Yo necesitaba que tuviera una estructura que lleve al fácil mantenimiento del código. Y, al nunca haber trabajado con la tecnología, necesitaba que tuviera una buena documentación para poder empezar rápidamente con el proyecto y no tener que invertir demasiado tiempo en aprender.

Rápidamente encontré 3 tecnologías similares que cumplen con los requisitos de lo que estaba buscando, React, Angular y Vue.js.

Pero… ¿Cuál debo usar? ¿Cuál es el mejor? ¿Qué diferencia hay entre ellos? Todas estas preguntas las tenía en mente cuando empecé a hacer mi investigación, como probablemente las tienes tú en estos momentos.

A pesar de que las 3 tecnologías tienen características similares, decidí utilizar Vue.js porque, además de cumplir con mis requerimientos, también cuenta con una sintaxis bastante fácil de entender y de escribir. Esto sin mencionar que sin duda tiene la mejor documentación que he utilizado.

Introducción a Vue.js

He decidido romper esta publicación en 3 partes para poder explicar mejor los conceptos. Así que esta es la primera parte de 3 de la serie introducción a Vue.js.

Vue.js es una librería javascript desarrollada por Evan You, exempleado de Google, que permite desarrollar interfaces gráficas (UI) web robustas y fácil de mantener. Vue.js permite crear componentes dentro de tu aplicación que pueden ser reusados en diferentes partes de la aplicación web según sea requerido. Otra característica que me gustó mucho es que puedes utilizar Vue.js en aplicaciones existentes en alguna sección que lo amerite. Muy bien, ahora ¿cómo puedo empezar a utilizar Vue.js?

La mayor ventaja de Vue.js es que nos deja manipular elementos de la página web a través de los datos que tenemos y sin tener que manipular el “DOM” como lo hacíamos con jQuery. Así como lo leen. Por ejemplo, supongamos que tenemos una lista en nuestra página web y queremos añadirle un elemento. Es tan fácil como agregar un nuevo elemento a un arreglo y Vue se encarga de actualizar el “DOM” por nosotros. Esto significa que Vue hace que los objetos dentro de nuestras aplicaciones sean reactivos. Ok, empecemos.

Instalación

Existen dos maneras para instalar Vue.js, haciendo referencia al archivo de javascript con el directivo <script> o utilizando el CLI (command-line interface). La manera más fácil y rápida es haciendo referencia a Vue y para este artículo lo haremos de esa manera.

Al final del body de nuestra página vamos a incluir la siguiente línea:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Ya con esto podemos empezar a utilizar Vue.js a su capacidad.

NOTA: Es importante mencionar que estamos haciendo referencia a una versión diseñada para desarrollo. Al momento de mover nuestra aplicación al ambiente de producción debemos cambiar esta referencia por la apropiada. Puedes encontrar más información sobre esto aquí.

Como ejemplo, vamos a estar creando una simple lista de quehaceres donde vamos a poder atar un objeto JSON a elementos HTML.

Todo lo relacionado a Vue dentro de nuestra aplicación estará viviendo dentro un elemento div, que en este caso le pondremos app como su id. Así que hasta el momento nuestra página debe tener la siguiente estructura

<html>
   <head>
   </head>
   <body>
      <div id="app">
      </div>

      <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
   </body>
</html>

Muy bien, ahora para crear una instancia de Vue.js para esta página lo que tenemos que hacer poner el siguiente código dentro del body pero debajo de la referencia a Vue.

var app = new Vue({
  el: "#app", // Este es el id del div donde vue va a vivir.
  data: { 
  },
  methods: {
  }
});

Como ven, así de sencillo podemos empezar a utilizar Vue. Ahora bien, si corremos esto en un navegador no vamos a ver nada todavía. Tenemos que añadirle elementos y funcionalidad antes de que se vea algo. Vue utiliza los elementos HTML pero además tiene atributos que permiten controlar lo que desplegamos en pantalla y cómo utilizamos los elementos. Vamos a añadir el HTML que nos va a permitir crear el listado de quehaceres. El siguiente código va dentro del div con id app.

<div id="app">
  <h2>Quehaceres:</h2>
  <ol>
    <!-- el atributo v-for funciona como un for tradicional donde todo lo que esté dentro de este elemento se va a repetir por cada elemento del objeto listado -->
    <li v-for="quehacer in listado"> 
      <label>
        <!-- v-on hace referencias a eventos. En este caso significa que cada 
             vez que el estado de este elemento cambie la funcion toggle será ejecutada -->
        <!-- v-bind ata el elemento HTML a una variable de vue. Así que si queremos 
             que este checkbox esté marcado solo tenemos que hacer que la varibale quehacer.finalizado 
             sea true -->
        <input type="checkbox" v-on:change="toggle(quehacer)" v-bind:checked="quehacer.finalizado">

        <!-- con v-if hacemos que este elemento exista en el resultado si la condicion dentro de este atributo es true -->
        <!-- usando el sintaxis {{ variable }}, desplegamos el contenido de variables de Vue el resultado de la página -->
        <del v-if="quehacer.finalizado">
          {{ quehacer.texto }}
        </del>
        <span v-else>
          {{ quehacer.texto }}
        </span>
      </label>
    </li>
  </ol>
</div>

Probablemente te estarás preguntando de dónde salen estas variables que estamos utilizando en el HTML. Pues salen de la instancia de Vue que creamos, solo que no lo hemos incluido aún. Así que vamos a crearlo…

Dentro del objeto llamado data, en la instancia de Vue que creamos, vamos a añadir el siguiente código

   listado: [ // cada elemento de este arreglo va a representar un checkbox con su label en la lista de quehaceres que veremos en la página
      { texto: "Levantarme", finalizado: true }, // los elemento pueden ser un valor o un objeto con varios valores
      { texto: "Tomar café", finalizado: true },
      { texto: "Hacer caca", finalizado: false },
      { texto: "Ser grandioso", finalizado: false }
    ]

Luego, para crear la función toggle vamos a añadir el siguiente código dentro del objeto llamado methods en la instancia de Vue.

    toggle: function(quehacer) {
    	quehacer.finalizado = !quehacer.finalizado
    }

Ahora sí, el resultado en el navegador es la lista de quehaceres donde puedes marcar cada ítem como completado. Les dejo el código completo, junto con el resultado, aquí abajo.

¿Pero qué tal si queremos añadir más ítems a la lista? ¿Cómo podemos hacerlo? Bueno, recuerdan que mencioné anteriormente que Vue hace que los objetos sean reactivos, pues a esto me refería. Con solo agregar un ítem más en el arreglo listado, Vue se encarga de incluir este nuevo ítem en el HTML y actualizarlo de ser necesario. ¡Espectacular!

Lo que vamos a hacer es añadir un textbox y un botón que nos permita agregar quehaceres a nuestra lista. Vamos a incluir el siguiente código HTML debajo del elemento ol.

<div id="app">
  <h2>Quehaceres:</h2>
  <ol>
    <!-- el atributo v-for funciona como un for tradicional donde todo lo que esté dentro de este elemento se va a repetir por cada elemento del objeto listado -->
    <li v-for="quehacer in listado">
      <label>
        <!-- v-on hace referencias a eventos. En este caso significa que cada 
             vez que el estado de este elemento cambie la funcion toggle será ejecutada -->
        <!-- v-bind ata el elemento HTML a una variable de vue. Así que si queremos 
             que este checkbox esté marcado solo tenemos que hacer que la varibale quehacer.finalizado 
             sea true -->
        <input type="checkbox" v-on:change="toggle(quehacer)" v-bind:checked="quehacer.finalizado">

        <!-- con v-if hacemos que este elemento exista en el resultado si la condicion dentro de este atributo es true -->
        <!-- usando el sintaxis {{ variable }}, desplegamos el contenido de variables de Vue el resultado de la página -->
        <del v-if="quehacer.finalizado">
          {{ quehacer.texto }}
        </del>
        <span v-else>
          {{ quehacer.texto }}
        </span>
      </label>
    </li>
  </ol>
  <input type="text" v-model="nuevoQuehacer">
  <button @click="agregarItem">Agregar</button>
</div>

Bien, aquí vemos varios elementos nuevos. Primero, v-model ata el valor de la variable con el valor del elemento HTML. En este caso cada vez que el usuario escriba algo en el textbox, nosotros lo podemos acceder a través de la variable nuevoQuehacer. Segundo, el @ es la forma corta de escribir v-on, que hace referencia a eventos. En este caso al evento click.

Ahora solo necesitamos editar el código de la instancia de Vue.

var app = new Vue({
  el: "#app",
  data: {
    listado: [
      { texto: "Levantarme", finalizado: true },
      { texto: "Tomar café", finalizado: true },
      { texto: "Hacer caca", finalizado: false },
      { texto: "Ser grandioso", finalizado: false }
    ],
    nuevoQuehacer: '',
  },
  methods: {
    toggle: function(quehacer){
    	quehacer.finalizado = !quehacer.finalizado
    },
    agregarItem: function() {
        // Verificar que el campo no esté vacío
        if ( this.nuevoQuehacer.length == 0 ) {
            alert('El campo no puede estar vacío.');
            return;
        }
 
        this.listado.push({
           texto: this.nuevoQuehacer,
           finalizado: false
        });
        
        this.nuevoQuehacer = '';
    },
  }
})

Aquí les dejo el código completo y el resultado. Te invito a que edites este código y le añadas funcionalidad para que te vayas familiarizando con esta tecnología.

Y así de sencillo tenemos la capacidad de incluir nuevos quehaceres a nuestra lista. Obviamente esto se puede llevar mucho más allá, pero queda demostrado lo poderoso y fácil que es utilizar Vue.js. En la próxima parte de esta serie, introducción a Vue.js, estaré hablando sobre cómo hacer llamadas a APIs y cómo utilizar el router para crear SPAs robustos.

Déjame saber en los comentarios si has tenido la oportunidad de trabajar con alguna plataforma similar a Vue.js y cuál ha sido tu experiencia.