Os desafios no CartolaFC - ReactConf 2020

Os desafios no CartolaFC - ReactConf 2020

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

90e645a6f8ea17beba05909ba7a40dec?s=128

Alexandre Saboia Fuziyama

November 21, 2020
Tweet

Transcript

  1. None
  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

  9. None
  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
  14. None
  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%

  25. None
  26. Desafios no frontend

  27. Coexistência de Angular e React • Componentes React registrados como

    Web Components • Chamar esses Web Componentsno Angular
  28. None
  29. None
  30. None
  31. None
  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