O documento descreve os desafios técnicos enfrentados na migração do frontend de uma aplicação de uma arquitetura Angular para React, incluindo a coexistência dos frameworks, gestão compartilhada de estado e manutenção do desenvolvimento contínuo de novas funcionalidades durante o processo.

2. Os
desafiosno

3. Alexandre Saboia Fuziyama
Bacharel em Informática pela PUC-Rio
14 anos na globo.com
Full Stack Web Developer
11 anos trabalhando em equipes ágeis
@alexandresaboia

4. Breno Ferreira
Desenvolvedor Web no CartolaFC
11 anos de experiência com desenvolvimento
web, ágil, .NET, Python, JS, React, etc.
@breno_ferreira

5. Evolução
Angular+ React
Desafiosno frontend

6. Evolução

7. 2005-2009
ARQUITETURA E TECNOLOGIA EM

8. admin
game
2005-2009
BD
atualização

10. 2010-2015
ARQUITETURA E TECNOLOGIA EM

11. atualização
game
admin
api
arquitetura centrada no
game
apps
BD
2010-2015

12. game
api atu admin

13. 24 Cores CPU
24 Cores CPU ...
multiprocesso
http://sebastianraschka.com/Articles/2014_multiprocessing_intro.html
https://docs.python.org/2.7/library/multiprocessing.html
cartolafc
multiprocesso na atualização

15. 2015-2020
ARQUITETURA E TECNOLOGIA EM

16. multidevice

17. multidevice

18. atualização
game
admin
arquitetura centrada no
game
apps
BD
2010-2015
api

19. arquitetura centrada na API
atualização
admin
api
BD v2
2015-2020
game
apps

20. game
api atu

21. Stack resumida
I N F R AE S TRU TU RA
cloud
Galeb
Unit
Unit
Unit
VM
Unit
Unit
Unit
VM
Unit
Unit
Unit
Unit
V
M
máquinafísica
RPAAS

22. Angular+ React

23. game

24. game
50% 30% 20%

26. Desafiosno frontend

27. Coexistência de Angular e React
• ComponentesReact registradoscomo Web Components
• Chamaresses Web Componentsno Angular

32. State Management

33. Angular
Dados gerenciadospor Services e Controllers

34. React
Hooks e Redux

35. Problemas
Alguns pedaços do App State duplicados
• Status do mercado
• Info do Time
• Ligas do usuário

36. Bundles separados
Angular
• Gulp
• Código em ES5
• Sem compilação
React
• Webpack
• Typescript

37. Outros desafios
• Migração sem parar o desenvolvimentode
novas features. Ao contrário de outras migrações que houveram
reescrita total (ex: Python -> Golang)
• Alta rotatividade no time
• Pessoas com estilos e ideias diferentessem um code style guide e
processo de desenvolvimento claro (ex: code reviews)
• Definição não muito clara de componentizaçãocausando código e
componentes duplicados

38. Como lidamos com isso?
Airbnb Style Guide (com algumascustomizações)

39. Como lidamos com isso?
Code Reviews

40. Como lidamos com isso?
novas features
+
refatorações/melhorias

41. Como lidamos com isso?
Com as refatorações,adicionamos tipos estáticos com
Typescript

42. Desafios de performance
Respeitar os caches HTTP definidos pela API via
Cache-Control: Max-Age
Issoé feitoautomaticamentepeloFetchAPI ✅

43. Desafios de performance
Investigar compatibilidade e uso de
Cache-Control: stale-while-revalidate
https://web.dev/stale-while-revalidate/
Curto prazo

44. Desafios de performance
Offline-First com PWA
App State salvo no local-storage
Cache de assets local
Vai depender do PO 😆

45. Vem pra Globo
https://talentos.globo.com/#/oportunidades

46. Obrigado!
@alexandresaboia @breno_ferreira