Vue.jsO Framework Progressivo

Slides originais: The Progressive Framework & Modern Frontend Development with Vue.js

Vinicius Reis

@vinicius73@luizVinicius73

Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br

Engenheiro de Aplicações @ Decision6

Frameworks são ferramentas criadas para ajudar na complexidade dos nossos projetos...

Frameworks

...porém os frameworks podem produzir seu próprio punhado de complexidades.

Complexidade da Aplicaçãovs

Complexidade do Framework

Complexidade Inerentevs

Complexidade Instrumental

A complexidade instrumental é o preço pago para diminuir

a complexidade inerente

Complexidade Inerente

ComplexidadeInstrumental

Insuficiente

Complexidade Inerente

ComplexidadeInstrumental

Exagerado

"Escolha a ferramenta certa para o trabalho"

Menos Mais

React Vue Angular Ember Meteor

Sistema de Templates

Backbone

Nível de complexidade

Menos Mais

React Vue Angular Ember Meteor

Sistema de Templates

Backbone

React+ Vue+

Com bibliotecas

Complexidade Inerente

ComplexidadeInstrumental

Escalabilidade não é uma via de mão única

Foco na camada de apresentação+

Suporte opcional a bibliotecas

Foco na camada de apresentação+

Suporte opcional a bibliotecas?

Vue.jsO Framework Progressivo

Renderização Declarativa

DOMState

???

Manipulação de Estado e DOM

Problemas com o DOM

● Re-renderização do DOM é custosa e disruptivo● Manter o DOM sincronizado com os estados é tedioso e muito

sussetível a erros.

DOM

Renderização Declarativa & Reativa

View

User Input

StateRender

A view apenas mapeia os estados de maneira

declarativa

O estado deve ser a única fonte de dados

...enquanto for rápido

VanillaJavaScript

Vue2.0.0-beta.1

React15.3.0

Angular2.0.0-rc.4

1x1.29x

1.74x1.97x

Baseado em um benchmark independente

...e acessível.

<script src="vue.js"></script><script> new Vue({ // ... })</script>

Demo: Todo ListEtapas para começar

Passo 1: Incluir o Vue com uma tag script

Passo 2: Não há passo 2

Sistema de Componentes

A maioria das aplicações pode ser dividida em blocos de componentes aninhados

Nav

Content

Item

Sidebar

SideItem

Cada componente é responsável por gerenciar um pedaço de DOM

Nav

Content

Item

Sidebar

Toda a interface pode ser abstraída em uma arvore de componentes

Componentes aninhados com Elementos Custumizados (Custom Tags)

<side-bar></side-bar><tabs> <tab>...</tab> <tab>...</tab></tabs>

Comunicação entre componentes:

Propriedades entram, Eventos Saem

Parent

Child

PassProps

EmitEvents

Demo Todo List usando componentes

Client-Side RoutingSistema de Rotas

https://github.com/vuejs/vue-router

/app/post/1 App

Post with { id: 1 }

/app/ App

Home

vue-routerSistema de rotas (client-side) baseado em componentes

Larga EscalaGerenciamento de Estados

https://github.com/vuejs/vuex

Problemas ComunsEm Grandes Aplicações Frontend

1. Compartilhar estados entre múltiplos componentes

2. Mudanças de estado imprevisiveis

VuexGerenciamento de Estado Previsivel & Centralizado

Build System&

Experiencia do Desenvolvimento (Workflow)

Single File Vue ComponentsComponentes de Arquivo Único

● Suporte a ES6 (simples e testavel)

● Template, Logica & Estilo

● Use o que você já sabe: HTML, CSS & Javascript

● Suporte embutido a pré-processadores: Babel, SASS, Stylus, Pug entre outros no mesmo arquivo

● O CSS pode ser restrito apenas ao componente

Single File Vue ComponentsComponentes de Arquivo Único

npm install -g vue-clivue-cli init webpack-simple-2.0 my-appcd my-appnpm installnpm run dev

vue-cliInicie um projeto rapidamente

+

5.3 1.x

5.3 2.0

+

vuejs/laravel-elixir-vue-2

Extensão Oficial Chrome DevTools

Debug Vuex com time-travel já incluso

Vue 2.0 já em RC5rc.vuejs.org

Menor

1.0.2626kb min+gzip

2.0 Runtime Build15.7kb min+gzip

Mais rápido

1.0.262.12x

2.0.01.29x

Baseado em um benchmark independente

Virtual DOM

Render Function

Template compile

Virtual DOM Tree

ActualDOMTree

create

render

Watcher

track dependencies

Render Functions:Poder maior que templates (Quando você precisar)

Render Function

Template compile

Virtual DOM Tree

render

Server Side Rendering (SSR)Renderizar componentes no backend

Renderização Nativa

● Syntaxe compatível com Vue.js para obter uma renderização nativa

● Mantido por Alibaba Group (Uma das maiores empresas de tecnologia da China)

● WIP: Colaboração oficial usando a renderização do Vue 2.0

Vue 2.0 já em RC5Inicie agora

Obrigado!

@vuejs | @vuejs_brasil vuejs/vuevuejs.org | vuejs-brasil.com.br

telegram.me/vuejsbrasil | slack.vuejs-brasil.com.br | fb.com/groups/vuejsbr

http://bit.ly/vue-js-progressive-slides-br