Este documento descreve a transformação de um sistema front-end legado baseado em Backbone para uma Single Page Application (SPA) usando React. A solução envolveu migrar gradualmente os componentes mais críticos para React enquanto mantinha a infraestrutura legada, começando pelos componentes que representavam a maior parte do uso e valor para os usuários.

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

8. Sentimentos do Time

9. Precisamos mudar!

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

22. Principais
componentes

23. 19 Elementos
Mapa && Toolbar

24. 48 Componentes
Form Builder

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@!