Vue.js - O Framework Progressivo

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

6. Complexidade Inerente
   vs
   Complexidade Instrumental
   

   View Slide

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

   View Slide

8. Complexidade
   Inerente
   Complexidade
   Instrumental
   Insuficiente
   

   View Slide

9. Complexidade
   Inerente
   Complexidade
   Instrumental
   Exagerado
   

   View Slide

10. "Escolha a ferramenta certa
    para o trabalho"
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

17. View Slide

18. Vue.js
    O Framework
    Progressivo
    

    View Slide

19. View Slide

20. View Slide

21. Renderização Declarativa
    

    View Slide

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

    View Slide

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
    

    View Slide

24. View Slide

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
    

    View Slide

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
    

    View Slide

27. ...e acessível.
    
    <br/>new Vue({<br/>// ...<br/>})<br/>
    

    View Slide

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

    View Slide

29. View Slide

30. Sistema de Componentes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. Demo Todo List usando componentes
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. Vuex
    Gerenciamento de Estado Previsivel & Centralizado
    

    View Slide

42. Build System
    &
    Experiencia do Desenvolvimento
    (Workflow)
    

    View Slide

43. Single File Vue Components
    Componentes de Arquivo Único
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. +
    5.3 1.x
    

    View Slide

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

    View Slide

48. Extensão Oficial Chrome DevTools
    

    View Slide

49. Debug Vuex com time-travel já incluso
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

57. Vue 2.0 já em RC5
    Inicie agora
    

    View Slide

58. 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 Slide

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

    View Slide