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.

1. Juliana Chahoud
Usando React Native & Multi Módulos para
Escalar App Creditas

2. Sobre
Juliana Chahoud
Head of Mobile Engineering, São Paulo.
jchahoud.com

3. Desafio
App Novo
Estratégia
Tecnologia
Arquitetura
Sobre

4. Desafio App Novo
2019

5. Desafio App Novo
2020

6. Desafio App Novo
2020

7. Desafio App Novo
2020

8. Desafio App Novo
Como trazer todos esses
produtos para o app?

10. Desafio App Novo
Como escalar o
desenvolvimento?

11. Escalar App
Estratégia de Tecnologia

12. Estratégia de Tecnologia
React Native Modularização+

13. 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?

14. Modularização
App
Feature
Design System
Core
Feature
Feature
Feature
Feature
Feature
Shared Shared

15. Time Design
Time Mini Apps (aprox. 6)
Time Mobile Core
Modularização
Feature
Design System
Core
Feature
Feature
Feature
Feature
Feature
Shared Shared

16. 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

17. 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

18. Wallet(Conta Digital)
...
Mini Apps ou Módulos
Gestão Empréstimo
Dashboard (Home)
Store

19. Mobile Design System

20. Mobile App
Arquitetura

21. 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

22. Arquitetura
mobile-styles
Local
DB
mobile-core
mobile-core-mockmobile-dev-tools mobile-core-apiShared
mobile-servicing mobile-wallet mobile-store mobile-NEWMini Apps

23. "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

24. Arquitetura
Navigator
Mobile Core

25. Arquitetura
Navigator
Mobile Core

26. Arquitetura
Storage Session Logging Analytics Sharing
i18n
Remote
Config
Environment Broadcaster Camera Navigation
FileSystem
Core
APIs

27. 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

28. 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

29. Arquitetura
Run - Stand Alone
Módulos rodando sem integrar com o Core

30. Arquitetura
Run - Stand Alone
Módulos rodando sem integrar com o Core

31. Arquitetura
Run - Stand Alone
Módulos rodando sem integrar com o Core

32. Arquitetura
Run - Stand Alone
Módulos rodando sem integrar com o Core

33. Mobile App
Mobile Styles

34. Materialização Design System
Mobile
Styles

35. Estratégia
Server Driven UI

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. 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. 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. 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"......

40. Mobile App
Benefícios & Desafios

41. Módulo
Wallet
Módulo
Empréstimo
Módulo
Store
Benefícios & Desafios

42. Desafios

43. Desafios
>>>

44. Estratégia
Testes & Qualidade

45. 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'});
});
....

46. Arquitetura
Continuous Delivery

47. 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

48. Continuous Delivery
Versão 8.9.0
~20 deploys - 4 dias

49. React Native & Multi Modulos
App Creditas

50. Obrigada
Juliana Chahoud
Head of Mobile Engineering Creditas, São Paulo.
jchahoud.com