Vue.js

Yoel Monzón Estrada
@yoelfme

Y sus superpoderes

Vue.js

• Librería  de Javascript

• Con características como las Angular.js, Ember.js, Backbone entre el chingo que hay.

• Creado aproximadamente hace 2 años por Evan You (@youyuxi).

• Curva de aprendizaje bien baja

Tiene 22,745 estrellas en Github

¿Qué hace tan maravilloso a Vue.js?

Reactivo

Su sistema de data binding

Reactivo

Su sistema de data binding

var object = {
  message: 'Hello world!'
}

-----

<div id="example">
  {{ message }}
</div>

-----

new Vue({
  el: '#example',
  data: object
})

Computed Properties

Permite declarar funciones como propiedades

var example = new Vue({
  data: {
    a: 1
  },
  computed: {
    b: function () {
      return this.a + 1
    }
  }
})

-----

example.a // -> 1
example.b // -> 2

Oquey, eso esta bien. Pero ¿que hay sobre las aplicaciones grandes?

Componentes

Para la estructuración de interfaces completas

var Example = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue.js!'
    }
  }
})

// Se registra el componente con el tag <example>
Vue.component('example', Example)

-----

<example></example>

• Los componentes pueden tener propiedades
• Emitir eventos para que el padre haga acciones
• El padre puede inyectar su propio contenido

<div>
  <h1>This is my component!</h1>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

----


<my-component>
  <p>This is some original content</p>
  <p>This is some more original content</p>
</my-component>


----

<div>
  <h1>This is my component!</h1>
  <p>This is some original content</p>
  <p>This is some more original content</p>
</div>

Modularidad

2016, y todavia seguimos poniendo todo en el scope global :(

// ComponentA.js
export default {
  template: '<div>{{ message }}</div>',
  data () {
    return {
      message: 'Hello Vue.js!'
    }
  }
}

----

// App.js
import ComponentA from './ComponentA'

export default {
  // use another component, in this scope only.
  // ComponentA maps to the tag <component-a>
  components: { ComponentA },
  template: `
    <div>
      <p>Now I'm using another component.</p>
      <component-a></component-a>
    </div>
  `
}

Pero no quiero tener el template como cadena!

<!-- MyComponent.vue -->

<!-- css -->
<style>
.message {
  color: red;
}
</style>

<!-- template -->
<template>
  <div class="message">{{ message }}</div>
</template>

<!-- js -->
<script>
export default {
  props: ['message'],
  created() {
    console.log('MyComponent created!')
  }
}
</script>

Ahora se ve mejor

Pero, estamos re-inventando los web components y el CSS sigue siendo global.

Like a pro B)

<template lang="jade">
div.my-component
    h1 {{ msg }}
    other-component
</template>

</script>
import OtherCompnent from './other-component.vue'

export default {
    components: { OtherComponent },
    data() {
        return {
        msg: 'Hello Vue.js'
        }
    }
}
</script>

<style lang="sass" scoped>
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

.my-component {
    font: 100% $font-stack;
    color: $primary-color;
}
</style>

Router

Para esto necesitamos de un paquete llamado vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './app.vue'
import ViewA from './view-a.vue'
import ViewB from './view-b.vue'

Vue.use(VueRouter)

const router = new VueRouter()

router.map({
  '/a': { component: ViewA },
  '/b': { component: ViewB }
})

router.start(App, '#app')

Estable

• Cuenta con 100% de coverage en los tests. [Ver aquí]
• Los issues que se registran en Github se cierran aproximadamente en 7 horas. [Ver aquí]
• Buena documentación. [Ver aquí]
• Cuenta con foro [Ver aquí]
• Canal en Gitter. [Ver aquí]

¿Dónde aprendo?

La documentación :P

• Vue Awesome
• Laracasts
• Styde.net
• Scotch.io

La práticaaaa!

Muchas gracias!