Vue.js - O Framework Progressivo

F803c45d62a468e0cb990398c004bd3e?s=47 Vinicius Reis
September 21, 2016

Vue.js - O Framework Progressivo

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

F803c45d62a468e0cb990398c004bd3e?s=128

Vinicius Reis

September 21, 2016
Tweet

Transcript

  1. 2.

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

    Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  2. 12.
  3. 16.
  4. 17.
  5. 19.
  6. 20.
  7. 23.

    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
  8. 24.
  9. 25.

    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
  10. 26.

    ...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
  11. 28.

    Demo: Todo List Etapas para começar Passo 1: Incluir o

    Vue com uma tag script Passo 2: Não há passo 2
  12. 29.
  13. 31.

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

    componentes aninhados Nav Content Item Sidebar Side Item
  14. 38.

    /app/post/1 App Post with { id: 1 } /app/ App

    Home vue-router Sistema de rotas (client-side) baseado em componentes
  15. 40.

    Problemas Comuns Em Grandes Aplicações Frontend 1. Compartilhar estados entre

    múltiplos componentes 2. Mudanças de estado imprevisiveis
  16. 44.

    • 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
  17. 45.

    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
  18. 46.
  19. 53.

    Virtual DOM Render Function Template compile Virtual DOM Tree Actual

    DOM Tree create render Watcher track dependencies
  20. 54.

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

    Function Template compile Virtual DOM Tree render
  21. 56.

    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