Quem te Vue, quem te vê: 1 ano com Vue.js

Eduardo Dobay, desenvolvedor na Gadle, conta um pouco da história de como a equipe adotou Vue.js, desde cerca de 1 ano atrás, como o uso tem evoluído e como tem sido o dia-a-dia com esse framework.

Transcript

1. Quem te Vue, quem te vê: 1 ano com Vue.js
2. Quem te Vue, quem te vê: 1 ano com Vue.js Eduardo Dobay Gadle, Março 2019, Cubo Itaú
3. No programa de hoje 3 ▪ Como foi a adoção de Vue na Gadle ▪ Como o uso tem evoluído ▪ Como tem sido nosso dia-a-dia com Vue
4. • Conectar embarcadores a motoristas • Logística urbana • Last mile 4 Gadle
6. Por que usar um framework? Nosso background 6 • Front-end “tradicional” renderizado pelo servidor. Cliente: principalmente jQuery • Maioria das páginas tem interações simples • Um temido arquivo .js de 1600 linhas ◦ Pouco estruturado, muito acoplado
7. Frameworks: reatividade e componentização • Módulos e componentes aliviam a carga cognitiva ◦ Organização visual ◦ Sanidade: coesão e localidade • Renderização + reatividade: boilerplate que muitos frameworks já resolveram 7
8. O modelo do Vue Simplificar fluxos
10. 10 <template> <p>{{ clicks }} cliques até agora</p> <button @click="clicks++">Clique-me</button> </template> <script> export default { props: ['initialClicks'], data() { return {clicks: this.initialClicks} } } </script> // Incluindo em algum template: <ClickCounter :initialClicks="42" />
11. O modelo do Vue • Reatividade • Árvore de componentes (vinculada à árvore do DOM), cada um com seu estado • Fluxo pai → filho: props ◦ Filho não muda estado do pai! • Fluxo filho → pai: eventos 11
12. A que o Vue se propõe • Camada de UI • Adoção incremental ◦ Vuex ◦ Router + Server-side Rendering 12
13. 1. Pré- experiência
14. Pré-experiência • Página isolada, escopo pequeno • Fácil de começar, sem decisões complicadas (p.ex. arquitetura) 14
15. “ simplicidade As coisas são apenas o que elas são 15
16. 2. Decisão
17. Vue • Ótima documentação • Curva leve de aprendizado • Mais flexível: templates ou JSX • Menos complexo em escala 17 • Comunidade • Mercado • Escolha segura • Mobile (React Native) React
18. Empate técnico • Maiores preocupações: produtividade e manutenção • Ambos atenderiam bem • Escolha foi meio emocional 18
19. 3. Experiência coletiva
20. A vítima • Plataforma usada pelos clientes (embarcadores) e pela equipe interna • Camada de apresentação (separada da API), renderizada no servidor (PHP) • Moradia do famoso JS de 1600 linhas 20
21. O plano • Novas páginas: projeto novo • Eventualmente, migrar todo o projeto antigo • Curto prazo: migrar o JS de 1600 linhas (core functionality) 21
22. Entrada: uma página simples • Nova funcionalidade • Fluxo simples ~900 linhas de código (HTML: 235, JS: 267, CSS: 321) 22
23. O prato principal • Reescrever uma página complexa cheia de funcionalidades + Novo design • Difícil de mapear todos os comportamentos existentes ◦ Esquecemos algumas funcionalidades pequenas (ops!) 23
25. Linhas de código 1º deploy: • HTML: 775 • JS: 1159 • CSS: 1020 (~6 meses atrás) 25 Hoje: • HTML: 1737 • JS: 2430 • CSS: 2281
26. 26 Resultados positivos • Muito mais fácil de adicionar novas funcionalidades • Simplicidade • Baixa carga cognitiva • Vue DevTools
27. Dificuldades • Crescer sem planejamento ◦ Arquitetura ◦ Abstrações mais pontuais (p.ex. componente de modal) • “Ah, mas isso é responsabilidade de quem??” 27
28. Dificuldades com arquitetura • Passagem de dados é restrita apenas ao pai direto ou filhos diretos ◦ Muitas camadas • Proposta de solução: Abraçar o estado compartilhado ◦ Arquitetura Flux (Vuex) http://facebook.github.io/flux/ 28
29. Vuex • “Plugin” do Vue para coordenação de estado compartilhado • Estado global do bem; camada de dados • Mutações bem definidas e rastreáveis • Inicialmente pode ser uma complexidade desnecessária; mas saiba quando ir atrás 29
31. “ Vuex é como óculos: você saberá quando estiver precisando! 31 — Dan Abramov, sobre flux libraries Imagem: Unsplash / Jamie Street
32. Alguns conselhos • Discutam mas também sejam pragmáticos • Sejam pragmáticos mas também busquem conhecimento • Entendam o framework ◦ Leiam a documentação do Vue • Não precisamos ser reféns das nossas escolhas passadas ◦ Flexibilidade vs. consistência 32
33. Obrigado! Eduardo Dobay edudobay@gmail.com Gadle – 5º andar 33 Template: Nym by SlidesCarnival