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
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?
18. Vue.js O Framework Progressivo
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
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
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