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

    Modern Frontend Development with Vue.js
  2. Vinicius Reis @vinicius73 @luizVinicius73 Gravo aulas sobre Vue.js, Javascript e

    Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  3. Frameworks são ferramentas criadas para ajudar na complexidade dos nossos

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

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

  6. Complexidade Inerente vs Complexidade Instrumental

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

    complexidade inerente
  8. Complexidade Inerente Complexidade Instrumental Insuficiente

  9. Complexidade Inerente Complexidade Instrumental Exagerado

  10. "Escolha a ferramenta certa para o trabalho"

  11. Menos Mais React Vue Angular Ember Meteor Sistema de Templates

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

    Backbone React+ Vue+ Com bibliotecas
  13. Complexidade Inerente Complexidade Instrumental Escalabilidade não é uma via de

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

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

  16. None
  17. None
  18. Vue.js O Framework Progressivo

  19. None
  20. None
  21. Renderização Declarativa

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

  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
  24. None
  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
  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
  27. ...e acessível. <script src="vue.js"></script> <script> new Vue({ // ... })

    </script>
  28. Demo: Todo List Etapas para começar Passo 1: Incluir o

    Vue com uma tag script Passo 2: Não há passo 2
  29. None
  30. Sistema de Componentes

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

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

    Nav Content Item Sidebar
  33. Toda a interface pode ser abstraída em uma arvore de

    componentes
  34. Componentes aninhados com Elementos Custumizados (Custom Tags) <side-bar></side-bar> <tabs> <tab>...</tab>

    <tab>...</tab> </tabs>
  35. Comunicação entre componentes: Propriedades entram, Eventos Saem Parent Child Pass

    Props Emit Events
  36. Demo Todo List usando componentes

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

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

    Home vue-router Sistema de rotas (client-side) baseado em componentes
  39. Larga Escala Gerenciamento de Estados https://github.com/vuejs/vuex

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

    múltiplos componentes 2. Mudanças de estado imprevisiveis
  41. Vuex Gerenciamento de Estado Previsivel & Centralizado

  42. Build System & Experiencia do Desenvolvimento (Workflow)

  43. Single File Vue Components Componentes de Arquivo Único

  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
  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
  46. + 5.3 1.x

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

  48. Extensão Oficial Chrome DevTools

  49. Debug Vuex com time-travel já incluso

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

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

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

    independente
  53. Virtual DOM Render Function Template compile Virtual DOM Tree Actual

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

    Function Template compile Virtual DOM Tree render
  55. Server Side Rendering (SSR) Renderizar componentes no backend

  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
  57. Vue 2.0 já em RC5 Inicie agora

  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
  59. http://bit.ly/vue-js-progressive-slides-br