Os desafios no CartolaFC - ReactConf 2020

Os desafios da migração do Angular para React no projeto do CartolaFC

Transcript

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áquina física RPAAS
22. Angular + React
23. game
24. game 50% 30% 20%
26. Desafios no frontend
27. Coexistência de Angular e React • Componentes React registrados como Web Components • Chamar esses Web Componentsno Angular
32. State Management
33. Angular Dados gerenciados por 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 desenvolvimento de 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 diferentes sem 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 algumas customizaçõ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 é feito automaticamente pelo FetchAPI ✅
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