Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue.js - O Framework Progressivo

Vinicius Reis
September 21, 2016

Vue.js - O Framework Progressivo

Slides da apresentação feita para o GDG - Duque de Caxias

Vinicius Reis

September 21, 2016
Tweet

More Decks by Vinicius Reis

Other Decks in Programming

Transcript

  1. Vinicius Reis @vinicius73 @luizVinicius73 Gravo aulas sobre Vue.js, Javascript e

    Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  2. 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
  3. 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
  4. ...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
  5. Demo: Todo List Etapas para começar Passo 1: Incluir o

    Vue com uma tag script Passo 2: Não há passo 2
  6. A maioria das aplicações pode ser dividida em blocos de

    componentes aninhados Nav Content Item Sidebar Side Item
  7. /app/post/1 App Post with { id: 1 } /app/ App

    Home vue-router Sistema de rotas (client-side) baseado em componentes
  8. Problemas Comuns Em Grandes Aplicações Frontend 1. Compartilhar estados entre

    múltiplos componentes 2. Mudanças de estado imprevisiveis
  9. • 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
  10. 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
  11. Virtual DOM Render Function Template compile Virtual DOM Tree Actual

    DOM Tree create render Watcher track dependencies
  12. Render Functions: Poder maior que templates (Quando você precisar) Render

    Function Template compile Virtual DOM Tree render
  13. 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