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. Vue.js
    O Framework Progressivo
    Slides originais: The Progressive Framework & Modern Frontend Development with Vue.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Complexidade da Aplicação
    vs
    Complexidade do Framework

    View full-size slide

  6. Complexidade Inerente
    vs
    Complexidade Instrumental

    View full-size slide

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

    View full-size slide

  8. Complexidade
    Inerente
    Complexidade
    Instrumental
    Insuficiente

    View full-size slide

  9. Complexidade
    Inerente
    Complexidade
    Instrumental
    Exagerado

    View full-size slide

  10. "Escolha a ferramenta certa
    para o trabalho"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Vue.js
    O Framework
    Progressivo

    View full-size slide

  17. Renderização Declarativa

    View full-size slide

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

    View full-size slide

  19. 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

    View full-size slide

  20. 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

    View full-size slide

  21. ...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

    View full-size slide

  22. ...e acessível.

    <br/>new Vue({<br/>// ...<br/>})<br/>

    View full-size slide

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

    View full-size slide

  24. Sistema de Componentes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. Componentes aninhados com
    Elementos Custumizados (Custom Tags)


    ...
    ...

    View full-size slide

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

    View full-size slide

  30. Demo Todo List usando componentes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Vuex
    Gerenciamento de Estado Previsivel & Centralizado

    View full-size slide

  36. Build System
    &
    Experiencia do Desenvolvimento
    (Workflow)

    View full-size slide

  37. Single File Vue Components
    Componentes de Arquivo Único

    View full-size slide

  38. ● 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

    View full-size slide

  39. 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

    View full-size slide

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

    View full-size slide

  41. Extensão Oficial Chrome DevTools

    View full-size slide

  42. Debug Vuex com time-travel já incluso

    View full-size slide

  43. Vue 2.0 já em RC5
    rc.vuejs.org

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Server Side Rendering (SSR)
    Renderizar componentes no backend

    View full-size slide

  49. 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

    View full-size slide

  50. Vue 2.0 já em RC5
    Inicie agora

    View full-size slide

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

    View full-size slide

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

    View full-size slide