Transformando um legado front-end em uma SPA com React
2 gostaram646 visualizações
O documento detalha a transformação de um legado front-end em uma aplicação SPA utilizando React, abordando desafios e soluções ao longo do processo de migração. Foram discutidas várias soluções, como congelar a versão atual e criar novos componentes, priorizando as partes mais utilizadas do sistema. Lições aprendidas incluem o controle de acoplamento, foco nas funcionalidades críticas e a importância de testes e automação.
Transformando um legado front-end em uma SPA com React
- 2. Transformando um legado front-end em uma SPA com React
- 3. Christiano Martins Milfont Rivendel / São Paulo, Brasil @cmilfont Kete Martins Rufino GreenMile / Ceará, Brasil @ketemr
- 4. 143 clientes 8 países 3 idiomas 250 servidores na AWS 1bi requisições/mês 90k linhas JS 2012 - 2017
- 5. Backbone (ecossistema completo em 2012) - Leaflet - Grunt - jQuery - Slick Grid - Técnicas mistas de Dev Greenmile Live
- 6. Acoplamento - Testes - Controle manual do DOM - PERFORMANCE Greenmile Live - Problemas
- 7. Solução - V1
- 10. 1 2 34
- 11. Solução 1 Regra do escoteiro (Clean Code): Deixar o lugar mais limpo do que estava quando você chegou
- 12. Solução 1 Regra do escoteiro (Clean Code): Deixar o lugar mais limpo do que estava quando você chegou
- 13. Resolved: 12/Dec/16 5:17 PM 299 299 +10 Bugs resolvidos
- 14. Funciona!
- 15. Solução 1
- 16. Solução 1 Planejado: 2 semanas Realizado: 2 meses
- 18. Solução 1 - Infraestrutura do legado - Acoplamento de funcionalidades - Interação com outros componentes - Impacto de outros componentes na lista
- 19. Solução 2 Congelar a versão atual e começar tudo do zero com React
- 21. Solução 3 1. Levantar quais partes do sistema são mais usadas (Princípio de Pareto) 2. Criar componentes React para essas partes 3. Importar os componentes como libs 4. Cada componente é um projeto novo no git 5. Substituir os componentes novos nas telas
- 23. 19 Elementos Mapa && Toolbar
- 25. Telas Customizadas 26 Telas 8 com mapas 2 principais do sistema
- 26. Solução 3 - Migrar tela mais crítica
- 27. Planejado: 2 meses. Realizado: 3 meses e não completado.
- 28. Solução 3.1 Inverter o controle do Backbone para React React Router assumindo as requisições e despachando para novos containers ou controllers do Backbones do legado (sim, código de "negócio" dentro do controller)
- 29. Estratégia
- 30. Lições Aprendidas 1. Inverter o controle para coordenar o acoplamento e aumentar a coesão. 2. Trabalhar nas poucas Features que representam +80% de operações dos usuários 3. Injetar pequenos universos de React no legado. 4. CI/CD 100% automatizado. 5. Testes automatizados
- 31. Obrigad@!