Continuous workflow for a large react native app - mobile at wix
Download as PPTX, PDF1 like807 views
This document discusses the architecture and development processes for a large React Native app at Wix. It covers the following key points: 1. The app is written in React Native with 40 developers working across 7 product groups. It uses a modular architecture with components, methods, and events defined for each module. 2. A continuous integration pipeline builds, tests, and publishes module and app releases. Modules are versioned based on Git commits. 3. End-to-end tests are run with Detox, including both production and mocked tests. Mocking allows simulating backend services for stable tests. 4. Monitoring is done for errors and performance. Future plans include reducing manual QA through improved testing and
![module.js
export default class DemoModule {
init() {
}
components() {
return [
{
id: 'wix.module.DemoTab’,
generator: () => DemoScreen,
store,
provider: Provider
}
];
}
methods() {
return [
//registered methods
];
}
onAppStateChanged(appState) {
}
}](https://image.slidesharecdn.com/continuousworkflowforalargereactnativeapp-mobileatwix-180416113922/85/Continuous-workflow-for-a-large-react-native-app-mobile-at-wix-9-320.jpg)
![module.exports = {
getSourceExts: () => process.env.RN_SRC_EXT ?
process.env.RN_SRC_EXT.split(',') :
[]
};
> RN_SRC_EXT=e2e.js react-native start
> RN_SRC_EXT=e2e.js xcodebuild <params>
> RN_SRC_EXT=e2e.js ./gradlew assembleRelease
rn-cli.config.js
endpoint.js
endpoint.e2e.js](https://image.slidesharecdn.com/continuousworkflowforalargereactnativeapp-mobileatwix-180416113922/85/Continuous-workflow-for-a-large-react-native-app-mobile-at-wix-30-320.jpg)
Continuous workflow for a large react native app - mobile at wix
- 1. medium/@rotemmiz github.com/yershalom github.com/rotemmiz @yershalom @rotemmiz shalomy@wix.com rotemm@wix.com Mobile At Wix Shalom Yerushalmy Rotem Mizrachi-Meidan Continuous Workflow for a Large React Native App April 2018
- 4. The Wix App Written from scratch in React Native Started a 24 months ago 40 developers 70% JavaScript, 30% Native code 7 product groups, and growing
- 7. Engine . |____app_builds | |____android | | |____dev | | | |____WixApp.apk | |____iphonesimulator | | |____dev | | | |____WixApp.app |____img |____src |____ios |____android |____cli |____package.json
- 8. Components React Native components Methods RPC interface Events PubSub interface Module API
- 9. module.js export default class DemoModule { init() { } components() { return [ { id: 'wix.module.DemoTab’, generator: () => DemoScreen, store, provider: Provider } ]; } methods() { return [ //registered methods ]; } onAppStateChanged(appState) { } }
- 10. React Native Navigation Module API JavaScript ObjC, Java, C Native extensions Native extensions Native extensions Native/RN extensions / API Views Biz Logic Stores … React Native Feature Config BI Logging … API Views Biz Logic Clubs API Views Biz Logic CRM Modules Engine OS …
- 15. package.json "dependencies": { "wix-inbox-mobile": "ga", "wix-mobile-media-manager": "ga", "wix-social-chat-mobile": "ga", "wix-one-clubs-feed": "ga", "wix-one-clubs-manager": "ga", "wix-store-merchant-app": "ga", "wix-one-app-engine": "ga", ... },
- 16. Integrations
- 17. What are we building? Infrastructure CI Server Publishing Over
- 18. Module Code Change git push Module Build, Test & Version Internal Release Wix App Release publish Private Repo upload AppBlade upload TestFlight & GP Module RC Wix App Build & Test RC-GA Wix App RC Wix App Build & Test GA-GA
- 19. Supports patching Git tree state -> Version 1.423.4 Major Minor Patch From package.json Number of commits in master Number of commits in branch Versioning Scheme
- 20. Testing 03
- 21. Unit Tests Mocked E2E (UI Automation) Tests E2E Tests
- 23. Frontend Backend Mobile App Module A Biz Logic UI Comp Module B Biz Logic UI Comp Production E2E Tests
- 24. Production E2E Pros Cons • Real user experience • Easy to setup • Easy to write • High confidence • Flaky • Slow • Hard to maintain
- 25. Frontend Backend Mobile App Module A Biz Logic UI Comp Module B Biz Logic UI Comp Mocked E2E Tests Mock Server
- 26. Mocked E2E Pros Cons • Closer to code • Stable • Easy to maintain • Hard to setup • Hard to write
- 27. Mocking for Detox With React Native
- 28. Mocking: Build Flavors endpoint.js endpoint.e2e.js main.jsbundle somebizlogic.js e2e main.jsbundle
- 29. module.exports = { LOGIN_ENDPOINT: 'https://login.wix.com' }; endpoint.js module.exports = { LOGIN_ENDPOINT: 'https://localhost:90210' }; endpoint.e2e.js
- 30. module.exports = { getSourceExts: () => process.env.RN_SRC_EXT ? process.env.RN_SRC_EXT.split(',') : [] }; > RN_SRC_EXT=e2e.js react-native start > RN_SRC_EXT=e2e.js xcodebuild <params> > RN_SRC_EXT=e2e.js ./gradlew assembleRelease rn-cli.config.js endpoint.js endpoint.e2e.js
- 31. describe('Login', () => { const server = new MockServer(); beforeEach(async () => { await server.start(); }); afterEach(async () => { await server.stop(); }); it('should login and persist login after restart', async () => { server.forUser(server.testUserId()).withBusinesses(1); await device.launchApp({ delete: true, permissions: { notifications: 'YES' }}); await element(by.text('Log In TestUser1')).tap(); await expect(element(by.text('feed.FeedScreen'))).toBeVisible(); await device.launchApp({ newInstance: true }); await expect(element(by.text('feed.FeedScreen'))).toBeVisible(); }); });
- 32. Monitoring 04
- 33. Monitoring Errors - Performance - Business – Wix internal tool
- 35. React Native Navigation Module API JavaScript ObjC, Java, C Native extensions Native extensions Native extensions Native/RN extensions / API Views Biz Logic Stores … React Native Feature Config BI Logging … API Views Biz Logic Clubs API Views Biz Logic CRM Modules Engine OS …
- 36. Future Plans 06
- 37. “≈0 Manual QA” Developers Unit tests Mocked E2E Contract tests QA Engineers Prod E2E manual backup Scenarios Developers + QA Educate Sync
- 39. Codename: Purple