Vue.js - O Framework Progressivo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Vinicius Reis @vinicius73 @luizVinicius73 Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Complexidade da Aplicação vs Complexidade do Framework

Slide 6

Slide 6 text

Complexidade Inerente vs Complexidade Instrumental

Slide 7

Slide 7 text

A complexidade instrumental é o preço pago para diminuir a complexidade inerente

Slide 8

Slide 8 text

Complexidade Inerente Complexidade Instrumental Insuficiente

Slide 9

Slide 9 text

Complexidade Inerente Complexidade Instrumental Exagerado

Slide 10

Slide 10 text

"Escolha a ferramenta certa para o trabalho"

Slide 11

Slide 11 text

Menos Mais React Vue Angular Ember Meteor Sistema de Templates Backbone Nível de complexidade

Slide 12

Slide 12 text

Menos Mais React Vue Angular Ember Meteor Sistema de Templates Backbone React+ Vue+ Com bibliotecas

Slide 13

Slide 13 text

Complexidade Inerente Complexidade Instrumental Escalabilidade não é uma via de mão única

Slide 14

Slide 14 text

Foco na camada de apresentação + Suporte opcional a bibliotecas

Slide 15

Slide 15 text

Foco na camada de apresentação + Suporte opcional a bibliotecas?

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Vue.js O Framework Progressivo

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Renderização Declarativa

Slide 22

Slide 22 text

DOM State ??? Manipulação de Estado e DOM

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Renderização Declarativa & Reativa View User Input State Render A view apenas mapeia os estados de maneira declarativa O estado deve ser a única fonte de dados

Slide 26

Slide 26 text

...enquanto for rápido Vanilla JavaScript Vue 2.0.0-beta.1 React 15.3.0 Angular 2.0.0-rc.4 1x 1.29x 1.74x 1.97x Baseado em um benchmark independente

Slide 27

Slide 27 text

...e acessível. new Vue({ // ... })

Slide 28

Slide 28 text

Demo: Todo List Etapas para começar Passo 1: Incluir o Vue com uma tag script Passo 2: Não há passo 2

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Sistema de Componentes

Slide 31

Slide 31 text

A maioria das aplicações pode ser dividida em blocos de componentes aninhados Nav Content Item Sidebar Side Item

Slide 32

Slide 32 text

Cada componente é responsável por gerenciar um pedaço de DOM Nav Content Item Sidebar

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Componentes aninhados com Elementos Custumizados (Custom Tags) ... ...

Slide 35

Slide 35 text

Comunicação entre componentes: Propriedades entram, Eventos Saem Parent Child Pass Props Emit Events

Slide 36

Slide 36 text

Demo Todo List usando componentes

Slide 37

Slide 37 text

Client-Side Routing Sistema de Rotas https://github.com/vuejs/vue-router

Slide 38

Slide 38 text

/app/post/1 App Post with { id: 1 } /app/ App Home vue-router Sistema de rotas (client-side) baseado em componentes

Slide 39

Slide 39 text

Larga Escala Gerenciamento de Estados https://github.com/vuejs/vuex

Slide 40

Slide 40 text

Problemas Comuns Em Grandes Aplicações Frontend 1. Compartilhar estados entre múltiplos componentes 2. Mudanças de estado imprevisiveis

Slide 41

Slide 41 text

Vuex Gerenciamento de Estado Previsivel & Centralizado

Slide 42

Slide 42 text

Build System & Experiencia do Desenvolvimento (Workflow)

Slide 43

Slide 43 text

Single File Vue Components Componentes de Arquivo Único

Slide 44

Slide 44 text

● 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 Components Componentes de Arquivo Único

Slide 45

Slide 45 text

npm install -g vue-cli vue-cli init webpack-simple-2.0 my-app cd my-app npm install npm run dev vue-cli Inicie um projeto rapidamente

Slide 46

Slide 46 text

+ 5.3 1.x

Slide 47

Slide 47 text

5.3 2.0 + vuejs/laravel-elixir-vue-2

Slide 48

Slide 48 text

Extensão Oficial Chrome DevTools

Slide 49

Slide 49 text

Debug Vuex com time-travel já incluso

Slide 50

Slide 50 text

Vue 2.0 já em RC5 rc.vuejs.org

Slide 51

Slide 51 text

Menor 1.0.26 26kb min+gzip 2.0 Runtime Build 15.7kb min+gzip

Slide 52

Slide 52 text

Mais rápido 1.0.26 2.12x 2.0.0 1.29x Baseado em um benchmark independente

Slide 53

Slide 53 text

Virtual DOM Render Function Template compile Virtual DOM Tree Actual DOM Tree create render Watcher track dependencies

Slide 54

Slide 54 text

Render Functions: Poder maior que templates (Quando você precisar) Render Function Template compile Virtual DOM Tree render

Slide 55

Slide 55 text

Server Side Rendering (SSR) Renderizar componentes no backend

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Vue 2.0 já em RC5 Inicie agora

Slide 58

Slide 58 text

Obrigado! @vuejs | @vuejs_brasil vuejs/vue vuejs.org | vuejs-brasil.com.br telegram.me/vuejsbrasil | slack.vuejs-brasil.com.br | fb.com/groups/vuejsbr

Slide 59

Slide 59 text

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