The State of JavaScript 2016

• Menos conocido (77%)
• Intencion de aprender (49%)
• Intencion de volver a usar (88%)
• + 300k descargas mensuales en npm
• Trending Project en GitHub

Por Qué Vue.js?

Complejidad

Inherente vs. Instrumental

Características

• Framework Progresivo
• View de MV*
• Reactivo
• Basado en core
• Orientado a componentes

Performance vs. React

Performance vs. Angular

Declarative Rendering

Caraterísticas

• Reactivo
• Automático
• Solo Vista

Expressions

Mustache Syntax para templates dinamicos

<h1>{ 'hello ' }} {{ 'world!'}}</h1>

Directives I

Atributos HTML para manipular el DOM

<h1 v-if="true"></h1>

Directives II

Atributos HTML para manejar eventos del DOM

<button v-on:click="send"></button>

data()

Funcion donde se definen las propiades

Methods

Funciones para definir acciones y comportamiento

Computed

Propiedades generados en base cambios de otras propiedades

Watchers

Funciones para ejecutar acciones en base a cambios de propiedades

👋🌎

See the Pen Vue Hello World! by Ignacio Anaya (@ianaya89) on CodePen.

Component System

Características

• ASAP
• Reutilizables (no siempre)
• Estructura de árbol
• HTML Semántico

Life Cycle

Momentos o etapas que transcurren por cada componente

Life Cycle Hooks

Metodos que nos permiten definir comportamiento para cada etapa

Single File Components (.vue)

Archivos que sirven para escribir componentes

No funcionan de forma nativa

Build System

DX - Developer Experience

Webpack

Browserify

vue-cli

Chrome Dev Tools

Client Side Routing

vue-router

Large Scale State Management

vuex