Construindo Aplicações com Vue.js

Apresentação GDG dia 18/11/17

Transcript

1. CONSTRUINDO APLICAÇÕES COM VUE.JS
2. AGENDA A apresentação será divida nos seguintes tópicos: Introdução Framework Progressivo O Vue.js Componentes Interação do Usuário Renderização Condicional Estruturas de Laço Dados Computados e Observadores Outros Recursos 2 Daniel Moreira Software Architecture @ Kazap Tecnologia
4. QUAL FRAMEWORK JAVASCRIPT EU DEVERIA APRENDER?
5. PARA RESPONDER A ESSA PERGUNTA, PRECISAMOS FAZER MAIS PERGUNTAS: • Que tipo de projeto você está construindo? • Qual seu nível de experiência? • O que você está tentando alcançar com este projeto?
6. FRAMEWORKS COMPLETOS VS COMPOSIÇÃO DE MICRO LIBS
7. COMPOSIÇÃO DE MICRO LIBS • Maior Flexibilidade • Requer muita pesquisa, teste e decisões • A manutenibilidade pode ficar prejudicada
8. FRAMEWORKS COMPLETOS • Maior Produtividade • Ideal para equipes que querem seguir padrões e convenções • Curva de aprendizado inicial extensa • Inflexível quando você não concorda com as decisões do framework • Excessivo em determinadas situações
9. FRAMEWORK PROGRESSIVO
10. COMPLEXIDADE DA APLICAÇÃO VS COMPLEXIDADE DO FRAMEWORK
11. INSUFICIENTE Aplicação Framework
12. EXCESSIVO Aplicação Framework
13. UM FRAMEWORK PROGRESSIVO SE ADAPTA À COMPLEXIDADE DE UM PROJETO
14. UM FRAMEWORK QUE É POSSÍVEL SER ADOTADO DE FORMA INCREMENTAL
15. O VUE.JS
16. O QUE É VUE.JS • Framework Progressivo para construção de interfaces de usuário • Projetado para ser adotável incrementalmente • Biblioteca principal focada na camada visual • Fácil integração com outras bibliotecas e projetos
17. O QUE É VUE.JS • Núcleo que funciona bem sozinho • Renderização Declarativa da View • Bibliotecas oficiais que atendem a necessidades comuns • Roteamento de Single Page Application (SPA) • Data fetching • Dentre outras…
18. 28.96KB MIN+GZIP Versão de Produção
19. POR ONDE EU COMEÇO?
20. GDG Mogi Guaçu > node -v v8.5.0 > npm install --global vue-cli
21. GDG Mogi Guaçu > vue init webpack hello-gdg > vue init webpack-simple hello-gdg > vue init browserify hello-gdg > vue init browserify-simple hello-gdg > vue init pwa hello-gdg > vue init simple hello-gdg
22. PRÁTICA
23. LINKS ÚTEIS • https://vuejs.org/v2/guide/ • https://github.com/vuejs/awesome-vue • https://vuejs.org/v2/examples/
24. OBRIGADO!