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?

9.
Desafio App Novo
Como escalar o
desenvolvimento?

10.
Escalar App
Estratégia de Tecnologia

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

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.
Modularização
App
Feature
Design System
Core
Feature
Feature
Feature
Feature
Feature
Shared Shared

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.
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.
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.
Wallet(Conta Digital)
...
Mini Apps ou Módulos
Gestão Empréstimo
Dashboard (Home)
Store

18.
Mobile Design System

19.
Mobile App
Arquitetura

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.
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.
"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.
Arquitetura
Navigator
Mobile Core

24.
Arquitetura
Navigator
Mobile Core

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

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.
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.
Arquitetura
Run - Stand Alone
Módulos rodando sem integrar com o Core

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.
Mobile App
Mobile Styles

33.
Materialização Design System
Mobile
Styles

34.
Estratégia
Server Driven UI

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.
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.
Mobile App
Benefícios & Desafios

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

41.
Desafios

42.
Desafios
>>>

43.
Estratégia
Testes & Qualidade

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.
Arquitetura
Continuous Delivery

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.
Continuous Delivery
Versão 8.9.0
~20 deploys - 4 dias

48.
React Native & Multi Modulos
App Creditas

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