Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vue.js - o framework progressivo

747 views

Published on

Palestra apresentada para o GDG - Duque de Caxias em 17/09/2016

Published in: Software
  • Login to see the comments

Vue.js - o framework progressivo

  1. 1. Vue.js O Framework Progressivo Slides originais: The Progressive Framework & Modern Frontend Development with Vue.js
  2. 2. Vinicius Reis @vinicius73@luizVinicius73 Gravo aulas sobre Vue.js, Javascript e Laravel para codecasts.com.br Engenheiro de Aplicações @ Decision6
  3. 3. Frameworks são ferramentas criadas para ajudar na complexidade dos nossos projetos... Frameworks
  4. 4. ...porém os frameworks podem produzir seu próprio punhado de complexidades.
  5. 5. Complexidade da Aplicação vs Complexidade do Framework
  6. 6. Complexidade Inerente vs Complexidade Instrumental
  7. 7. A complexidade instrumental é o preço pago para diminuir a complexidade inerente
  8. 8. Complexidade Inerente Complexidade Instrumental Insuficiente
  9. 9. Complexidade Inerente Complexidade Instrumental Exagerado
  10. 10. "Escolha a ferramenta certa para o trabalho"
  11. 11. Menos Mais React Vue Angular Ember Meteor Sistema de Templates Backbone Nível de complexidade
  12. 12. Menos Mais React Vue Angular Ember Meteor Sistema de Templates Backbone React+ Vue+ Com bibliotecas
  13. 13. Complexidade Inerente Complexidade Instrumental Escalabilidade não é uma via de mão única
  14. 14. Foco na camada de apresentação + Suporte opcional a bibliotecas
  15. 15. Foco na camada de apresentação + Suporte opcional a bibliotecas?
  16. 16. Vue.js O Framework Progressivo
  17. 17. Renderização Declarativa
  18. 18. DOM State ??? Manipulação de Estado e DOM
  19. 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
  20. 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
  21. 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
  22. 22. ...e acessível. <script src="vue.js"></script> <script> new Vue({ // ... }) </script>
  23. 23. Demo: Todo List Etapas para começar Passo 1: Incluir o Vue com uma tag script Passo 2: Não há passo 2
  24. 24. Sistema de Componentes
  25. 25. A maioria das aplicações pode ser dividida em blocos de componentes aninhados Nav Content Item Sidebar Side Item
  26. 26. Cada componente é responsável por gerenciar um pedaço de DOM Nav Content Item Sidebar
  27. 27. Toda a interface pode ser abstraída em uma arvore de componentes
  28. 28. Componentes aninhados com Elementos Custumizados (Custom Tags) <side-bar></side-bar> <tabs> <tab>...</tab> <tab>...</tab> </tabs>
  29. 29. Comunicação entre componentes: Propriedades entram, Eventos Saem Parent Child Pass Props Emit Events
  30. 30. Demo Todo List usando componentes
  31. 31. Client-Side Routing Sistema de Rotas https://github.com/vuejs/vue-router
  32. 32. /app/post/1 App Post with { id: 1 } /app/ App Home vue-router Sistema de rotas (client-side) baseado em componentes
  33. 33. Larga Escala Gerenciamento de Estados https://github.com/vuejs/vuex
  34. 34. Problemas Comuns Em Grandes Aplicações Frontend 1. Compartilhar estados entre múltiplos componentes 2. Mudanças de estado imprevisiveis
  35. 35. Vuex Gerenciamento de Estado Previsivel & Centralizado
  36. 36. Build System & Experiencia do Desenvolvimento (Workflow)
  37. 37. Single File Vue Components Componentes de Arquivo Único
  38. 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
  39. 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
  40. 40. + 5.3 1.x
  41. 41. 5.3 2.0 + vuejs/laravel-elixir-vue-2
  42. 42. Extensão Oficial Chrome DevTools
  43. 43. Debug Vuex com time-travel já incluso
  44. 44. Vue 2.0 já em RC5 rc.vuejs.org
  45. 45. Menor 1.0.26 26kb min+gzip 2.0 Runtime Build 15.7kb min+gzip
  46. 46. Mais rápido 1.0.26 2.12x 2.0.0 1.29x Baseado em um benchmark independente
  47. 47. Virtual DOM Render Function Template compile Virtual DOM Tree Actual DOM Tree create render Watcher track dependencies
  48. 48. Render Functions: Poder maior que templates (Quando você precisar) Render Function Template compile Virtual DOM Tree render
  49. 49. Server Side Rendering (SSR) Renderizar componentes no backend
  50. 50. 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
  51. 51. Vue 2.0 já em RC5 Inicie agora
  52. 52. Obrigado! @vuejs | @vuejs_brasil vuejs/vuevuejs.org | vuejs-brasil.com.br telegram.me/vuejsbrasil | slack.vuejs-brasil.com.br | fb.com/groups/vuejsbr
  53. 53. http://bit.ly/vue-js-progressive-slides-br

×