Conociendo Vuejs 2.0

Dentro de la amplia variedad de frameworks front-end uno de los que está más de moda es Vue, que nos proporciona una forma eficiente y sencilla de crear sitios web.

En este artículo nos centraremos en la versión 2.0 de Vue, y veremos quién es el creador de esta magnífico framework, una introducción general de sus principales características, una breve descripción de las librerías que componen el ecosistema de Vue, un listado de recursos para aprender y por último unos ejemplos de código en jsfiddle para los que queráis jugar un poco. ¡Empezamos!

¿Quién es el creador de Vue?

Siempre que utilizo una librería o framework me gusta saber quién es su creador, los creadores o qué empresa está detrás. En este caso en concreto su autor es “Evan You” el cual ha trabajado en el equipo de desarrollo de Google y es conocido por su participación en Meteor (vamos un máquina). Aunque para mi, lo más interesante es cómo ha conseguido monetizar la creación de Vue para así poder dedicarle el 100% de su tiempo. Al que le interese este tema le dejo el enlace al perfil en patreon de Evan You.

¿Qué es Vue?

Tal y como está descrito en su página oficial es un framework para construir interfaces de usuario. El autor lo define como “The progressive javascript framework“, lo que significa que no es un framework monolítico (como por ejemplo angular) y el core de la librería se centra solo la capa visual (al igual que react) y permite integrarse muy fácilmente con librerías o proyectos existentes.

Para el renderizado, Vue utiliza templates basados en Html que aportan legibilidad y reducen la curva de aprendizaje, tiene además soporte para “render functions” y “jsx” pero sinceramente cambiar a Vue para usar jsx , no lo veo yo.

Vue se inspira en el patrón MVVM y está orientado a la creación de componentes, lo que nos permite crear elementos Html personalizados que encapsulan nuestro código para que sea reutilizable. De este modo, para la comunicación entre la vista y el modelo de datos se utiliza two-way data-binding.

De igual manera un componente puede contener a otros componentes de forma jerárquica, y para la comunicación entre ellos Vue utiliza one-way data-binding. Así desde un componente padre se pueden modificar los datos de un componente hijo (para esto se utiliza el atributo “props“), pero desde un componente hijo no se permiten modificar de forma directa los datos del componente padre; para la comunicación desde el componente hijo al padre se utilizan eventos, conocidos en Vue como “custom events“.

Como funcionalidad avanzada, Vue permite la creación de “Single file components“, que son ficheros con extensión .vue que permiten la creación de componentes que encapsulan tanto el código html, css y javascript.  es posible gracias a herramientas como webpack, browserify y (vue-loader), veamos un ejemplo de ello:

Puedo decir que mi experiencia con los SFC ha sido muy satisfactoria y la verdad que son una pasada. Facilita muchísimo la tarea de creación y mantenimiento de componentes al tener todo en un único fichero, además permite de forma sencilla aplicar estilos propios a cada componente gracias al atributo scoped.

Ecosistema de librerías alrededor de Vue:

• SPA Routing: vue-router (core plugin).
• State Management: vuex (core plugin) implementación de “redux” para Vue. Ésto permite centralizar el estado de todos los componentes de la aplicación.
• Ajax Y Http (Data fetching): Para realizar las peticiones http o ajax yo recomiendo utilizar de vue-resource o axios yo prefiero axios, pero esto ya es cuestión de gustos.
• Server Side Rendering: Permitir que las vistas sean renderizadas directamente desde el servidor hace que sean indexadas por los motores de búsqueda facilitando el SEO. Ver nuxt.js
• IOS y Android: Tiene soporte para la creación de componentes nativos en Android o IOS y una colaboración oficial con weex, un framework multiplataforma desarrollado por Alibaba. Ésto permite crear componentes con Vue que se pueden renderizar tanto en el navegador como en android y ios.

Tools

• vue-cli: Es una herramienta de terminal que nos permite la creación de plantillas o componentes. vue-cli
• vue-devtools: Extensión de Chrome para debug de Vue.

Conclusión

En este artículo, hemos visto una introducción al core, cómo Vue trabaja con los componentes y una visión general del ecosistema de librerías que le rodea. Espero que os ayude a despertar el interés y las ganas de trabajar con él, ya que para mi no es una moda y ha llegado para quedarse y seguir compitiendo, o incluso por qué no, superar a los frameworks del mercado como Angular de Google o React de Facebook.

Por último, os dejo un listado de sus principales virtudes:

– Tiene un curva de aprendizaje menor al resto frameworks.
– La documentación es muy buena.
– Fácil de utilizar.
– Es fácil de integrar con otras librerías.
– Tiene una buena comunidad la cual está en constante crecimiento.
– Su rendimiento es muy bueno. (benchmark)
– Pesa muy poco, lo cual siempre se agradece. Vue 2 + Vuex + vue-router ~30kb gzipped.

Recursos

• La documentación oficial.
• En awesome-vue las podéis encontrar todo tipo de librerías de Vue.
• Curso de Laracast: learn-vue-2-step-by-step.
• Curso de Udemy: vuejs 2: the complete guide. (de los mejores que he visto)
• Cursos de Egghead.io VUE.JS COURSES.
• Libro de Alex Kyriakidis, Kostas Maniatis, y Evan You. Mejesty of Vue.js 2.

Ejemplos

Hello World

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Two Way Data Binding

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

Filters

new Vue({
  el: '#app',
  data: {
  	msg:'hola'  
  },
  filters: {
  	uppercase: function(value) {
  		return value.toUpperCase()
    }
  }
})

Conditional Rendering

new Vue({
  el: '#app',
  data: {    
    show: true
  }  
})

List Rendering

new Vue({
  el: '#app',
  data: {    
    items: [
    { text: 'item 1' },
      { text: 'item 2' },
      { text: 'item 3' }
    ]
  }  
})

Simple Component

Vue.component('component', {
  template: '<div>Component!</div>'
})

// create a root instance
new Vue({
  el: '#app'  
})

One Way Data Binding

Vue.component('component', {
  template: '<button v-on:click="increment">{{ counter }} {{initialcounter}}</button> </div>',
  props: ['initialcounter'],
  data: function () {
  	return {
    	counter: this.initialcounter
    }  	
  },
  methods: {
    increment: function() {
    	this.counter += 1
      this.$emit('increment')
    }
  }	
})

new Vue({
  el: '#example',  
  data: function () {
    return {
    	initialCounter: 0,
      counter: 0,     
    }
  },
  methods: {
    parentincrement: function() {    	
      this.counter += 1
    },
    initialIncrement: function() {
    	this.initialCounter += 1
    },
  }
})