Vue.js

Un modelo reactivo eficiente

Mateo Calle M.

Twitter: @Mathius17

Github: Mathius17

¿Qué es?

  • Framework (?) de frontend
  • Librería para construir interfaces interactivas
  • Creado por Evan You
  • Inspirado en AngularJS
  • 25.79kb min + gzip
  • 20k+ estrellas en Github

@youyuxi

Compatible con todos los navegadores

Mmm.... tal vez no

Necesita ECMAScript 5

No soporta IE8 (o menores)

Pero si los demás navegadores

¿Quién lo usa?

Conceptos

Con código por favor!

Baja curva de aprendizaje

3 conceptos básicos:

  • Directivas
  • Componentes
  • Filtros

Directivas

Como en AngularJS

  • v-if
  • v-show
  • v-for (listas)
  • v-model
  • otras más

Para eventos (v-on)

  • v-on:click
  • v-on:submit.prevent
  • @click
  • @keyup.enter

Para "enlazar" propiedades (v-bind)

  • v-bind:class
  • v-bind:src
  • :class
  • :disabled

Two-way binding

// js
new Vue({
  el: '#demo',

  data: {
    nombre: 'Mateo'
  }
});

Como en AngularJS

<!DOCTYPE html>
<html>
<head></head>
<body id="app">
  <p>Hola {{ nombre }}!</p>

  <input
    type="text"
    v-model="nombre"
  >
</body>
</html>

Computed properties

// js
new Vue({
  el: '#demo',

  data: {
    centigrados: 20
  },

  computed: {
    farenheit: function() {
      return this.centigrados * (9 / 5) + 32;
    }
  }
});


// html
// <p>{{ farenheit }} F</p>
// produce => 68 F

Filtros

Como en AngularJS

// js
new Vue({
  data: {
    person = {
      name: 'Mateo Calle',
      age: 23,
    }
  }
});

// html
// <p>{{ person.name | uppercase }}</p>
// Produce => MATEO CALLE

Basado en componentes

<app>
  <app-header></app-header>

  <app-menu></app-menu>

  <app-content></app-content>

  <app-footer></app-footer>
</app>

Modelo reactivo eficiente

Ember.js

const Person = Ember.Object.extend({
  nombre: 'Mateo',
  apellidos: 'Calle',
  edad: 18
});

let me = Person.create();

// Obtener nombre
me.get('nombre'); // Retorna => Mateo
me.set('edad', 23); // Cambia edad a 23

Modelo

El modelo ES un objeto nativo de JS

Modelo en Vue.js

let me = {
  nombre: 'Mateo',
  apellidos: 'Calle',
  edad: 18
};

let vm = new Vue({
  data: {
    persona: me;
  }
});

vm.persona.nombre; // Retorna => Mateo
vm.persona.edad = 23; // Cambia edad a 23

A cada propiedad se le añade un getter y un setter (con el método de ES5 Object.defineProperty)

Esto permite:

  • Rastreo de dependencias
  • Notificación de cambios

AngularJS

  • Usa dirty-checking
  • Cada que se hace $scope.apply(), se revisan todas las variables de $scope.
  • Optimizaciones como one-time bindings

React

Usa virtual DOM diffing

shouldComponentUpdate()

La única optimización que verán será

track-by

Ejemplo de la vida real

  • Hecha por Football Radar
  • 50 partidos de fútbol actualizados cada segundo durante 30 segundos
  • Se tienen en cuenta: Reloj, puntaje, jugadores, tarjetas, entre otros

React

Vue

Modificando las variables

React

Vue

100 juegos

100 ms

500 juegos

1000 ms

Ecosistema

Herramientas => vue-devtools
Routing => vue-router
Manejo de estado => vuex
HTTP => vue-resource
CLI => vue-cli

Single file components

Producción

Browserify => vuefy

Webpack => vue-loader

Recursos

Vue.js

By mathius17

Vue.js

  • 128
Loading comments...

More from mathius17