Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Usando React Native & Multi Módulos para Escalar App Creditas

272 views

Published on

Apresentação efetuada na #reactconfbr2020

Em 2019 nos deparamos com o desafio de refatorar o App da Creditas de modo que ele fosse escalável, robusto e permitisse dar autonomia de desenvolvimento para múltiplos times. Isso nos levou a criar uma plataforma Mobile, composta por um módulo principal chamado de Mobile Core e ferramentas que habilitam cada time integrar seu próprio módulo (ou mini-app). Em um curto período de tempo chegamos a mais de 30 contribuidores no App em mais de 6 times (incluindo diferentes países) escrevendo código que é integrado em um único aplicativo. Temos a capacidade de fazer deploys diários em ambiente beta e releases para App Store e Google Play toda semana. Nesta palestra será explicada como é essa arquitetura, os desafios que tivemos nessa construção e como garantimos uma experiência unificada e com qualidade usando Design System, testes e deploys contínuos.

Published in: Technology
  • Be the first to comment

Usando React Native & Multi Módulos para Escalar App Creditas

  1. 1. Juliana Chahoud Usando React Native & Multi Módulos para Escalar App Creditas
  2. 2. Sobre Juliana Chahoud Head of Mobile Engineering, São Paulo. jchahoud.com
  3. 3. Desafio App Novo Estratégia Tecnologia Arquitetura Sobre
  4. 4. Desafio App Novo 2019
  5. 5. Desafio App Novo 2020
  6. 6. Desafio App Novo 2020
  7. 7. Desafio App Novo 2020
  8. 8. Desafio App Novo Como trazer todos esses produtos para o app?
  9. 9. Desafio App Novo Como escalar o desenvolvimento?
  10. 10. Escalar App Estratégia de Tecnologia
  11. 11. Estratégia de Tecnologia React Native Modularização+
  12. 12. Estratégia de Tecnologia Codebase único para múltiplas plataformas Conhecimento do time em Javascript / Typescript Reuso com React WEB Facilidade em colocar lógica em um BFF Node.js Ferramentas como Code Push, Hot Reload Custo de desenvolvimento $$ Por que React Native?
  13. 13. Modularização App Feature Design System Core Feature Feature Feature Feature Feature Shared Shared
  14. 14. Time Design Time Mini Apps (aprox. 6) Time Mobile Core Modularização Feature Design System Core Feature Feature Feature Feature Feature Shared Shared
  15. 15. Responsabilidades Release do Mini App (Módulo) Usar e evoluir Core APIs Garantir experiência consistente com o Design System Usar boas práticas e padrões de arquitetura no módulo Tornar mini app "monitorável" e com métricas Garantir qualidade do módulo Time Mini Apps Release do Aplicativo Implementar e manter Core APIs Garantir uma experiência única e consistente em todo APP Definir arquitetura, boas práticas e padrões Ferramentas de monitoração e analytics Garantir qualidade na integração dos módulos Time Mobile Core
  16. 16. Modularização Integração de todos os módulos Implementação da navegação central (Main Navigation) Sessão da cliente, Login, SignUP, Perfil, Customer Support Channels APIs comuns: Push Notifications, Internationalization, Camera access, Biometrics, Permissions, Logging etc. Módulo Core
  17. 17. Wallet(Conta Digital) ... Mini Apps ou Módulos Gestão Empréstimo Dashboard (Home) Store
  18. 18. Mobile Design System
  19. 19. Mobile App Arquitetura
  20. 20. STACK Utilities Firebase BigQuery RealmDB Sentry Deployment Circle CI TestFairy Fastlane TestFlight Google Play Store Beta Testes Jest React Native Testing Library Enzyme Detox Core React Native (0.62.2) Typescript React Navigation Arquitetura
  21. 21. Arquitetura mobile-styles Local DB mobile-core mobile-core-mockmobile-dev-tools mobile-core-apiShared mobile-servicing mobile-wallet mobile-store mobile-NEWMini Apps
  22. 22. "dependencies": { "@react-native-firebase/analytics": "^6.4.0", "@react-native-firebase/remote-config": "^6.4.0", "@sentry/react-native": "1.8.2", "lottie-ios": "3.1.3", "lottie-react-native": "^3.4.0", "mobile-styles": "...github.com:Creditas/mobile-styles.git", "mobile-servicing": ...github.com:Creditas/mobile-servicing.git", "mobile-wallet":...github.com:Creditas/mobile-wallet.git", "mobile-store": "...github.com:Creditas/mobile-store.git", "mobile-core-api":...github.com:Creditas/mobile-core-api.git", "react": "16.11.0", "react-native": "0.62.2", "react-native-biometrics": "^2.1.4", "react-native-camera": "3.36.0", ... Arquitetura Dependências Mobile Core
  23. 23. Arquitetura Navigator Mobile Core
  24. 24. Arquitetura Navigator Mobile Core
  25. 25. Arquitetura Storage Session Logging Analytics Sharing i18n Remote Config Environment Broadcaster Camera Navigation FileSystem Core APIs
  26. 26. Arquitetura Core API Mock import { coreAPIMock, Login } from 'mobile-core-api-mock'; const navigation = /* ... */ const App = () => ( <Login coreApi={coreAPIMock.v1} navigation={navigation} initialRouteName="Home" /> ); Expõe um componente React que facilita os mini apps a simularem a tela de Login do Core
  27. 27. Arquitetura "devDependencies": { "mobile-core-api": "...github.com:Creditas/mobile-core-api.git#1.0.0", "mobile-core-api-mock": "...github.com:Creditas/mobile-core-api-mock.git#1.0.0", "mobile-dev-tools": "...github.com:Creditas/mobile-dev-tools.git#1.0.0", "mobile-styles": "...github.com:Creditas/mobile-styles.git", ... ... ... } Isolamento dos Módulos Mini Apps
  28. 28. Arquitetura Run - Stand Alone Módulos rodando sem integrar com o Core
  29. 29. Arquitetura Run - Stand Alone Módulos rodando sem integrar com o Core
  30. 30. Arquitetura Run - Stand Alone Módulos rodando sem integrar com o Core
  31. 31. Arquitetura Run - Stand Alone Módulos rodando sem integrar com o Core
  32. 32. Mobile App Mobile Styles
  33. 33. Materialização Design System Mobile Styles
  34. 34. Estratégia Server Driven UI
  35. 35. Server Driven UI "items": [{ "type": "Typography", "props": { "text": "Olá!", "variant": "HelveticaLight", "color": "neutral9"}}]}, {"type": "CardTitleRoundIcon", "props": { "title": "Simular um empréstimo com garantia", "icon": "arrowRight" ....}, "action": {"route": "..."}}] {"type": "CardOffer", "props": { "title": "Financiamento nde veículos", "variant": "secondary"}, "action": {"route": "WebView"......
  36. 36. Server Driven UI "items": [{ "type": "Typography", "props": { "text": "Olá!", "variant": "HelveticaLight", "color": "neutral9"}}]}, {"type": "CardTitleRoundIcon", "props": { "title": "Simular um empréstimo com garantia", "icon": "arrowRight" ....}, "action": {"route": "..."}}] {"type": "CardOffer", "props": { "title": "Financiamento nde veículos", "variant": "secondary"}, "action": {"route": "WebView"......
  37. 37. Server Driven UI "items": [{ "type": "Typography", "props": { "text": "Olá!", "variant": "HelveticaLight", "color": "neutral9"}}]}, {"type": "CardTitleRoundIcon", "props": { "title": "Simular um empréstimo com garantia", "icon": "arrowRight" ....}, "action": {"route": "..."}}] {"type": "CardOffer", "props": { "title": "Financiamento nde veículos", "variant": "secondary"}, "action": {"route": "WebView"......
  38. 38. Server Driven UI "items": [{ "type": "Typography", "props": { "text": "Olá!", "variant": "HelveticaLight", "color": "neutral9"}}]}, {"type": "CardTitleRoundIcon", "props": { "title": "Simular um empréstimo com garantia", "icon": "arrowRight" ....}, "action": {"route": "..."}}] {"type": "CardOffer", "props": { "title": "Financiamento nde veículos", "variant": "secondary"}, "action": {"route": "WebView"......
  39. 39. Mobile App Benefícios & Desafios
  40. 40. Módulo Wallet Módulo Empréstimo Módulo Store Benefícios & Desafios
  41. 41. Desafios
  42. 42. Desafios >>>
  43. 43. Estratégia Testes & Qualidade
  44. 44. Testes & Qualidade Ferramentas Jest e React Native Testing Library E2E: Detox Coverage Lint describe('when try to login with a VALID cpf', () => { it('navigates to the LOGIN_PASSWORD', async () => { const nextMock = jest.fn(); const text = '11111111200'; await act(async () => { await fireEvent.changeText(getByTestId('loginInput'), text); await fireEvent.press(getByTestId('nextButton'));}); expect(nextMock).toHaveBeenCalledWith(ROUTERS.LOGIN_PASSWORD, { document: '111.111.112-00'}); }); ....
  45. 45. Arquitetura Continuous Delivery
  46. 46. Continuous Delivery mini-app Pull request ✅ lint ✅ tests ✅ code-cov ✅ check-core-dependencies ✅ install mini-app Release ✅ trigger-core-build ✅ publish-version Core Pull Request ✅ coverage_js ✅ analyse_js ✅ checkout_code ✅ android_release_staging✅ compile_android_staging ✅ ios_release_staging✅ compile_ios_staging ✅ e2e Core release ✅compile_and_release_ios_beta ✅compile_and_release_android_beta
  47. 47. Continuous Delivery Versão 8.9.0 ~20 deploys - 4 dias
  48. 48. React Native & Multi Modulos App Creditas
  49. 49. Obrigada Juliana Chahoud Head of Mobile Engineering Creditas, São Paulo. jchahoud.com

×