Mobile At Wix: Continuous Workflow for a Large React Native App

The Wix app is a large operation involving ~40 developers from 7 different product groups and a pretty big amount of features.
Scaling this project requires code architecture that enables each module to be developed separately, but easily fit the big puzzle.

We’ll discuss the way we do both unit and E2E testing, the way we scale our CI, the way we deploy and how we fix issues in production when they arise.

We’ll also share our plans to how we’re going to scale our app and dev process to support 100 developers a year from today.

Transcript

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
2. Wix Engineering Locations Hi. Rotem Shalom
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
5. Modularity 01
6. Module . |____test |____img |____src |____module.js |____rn-cli.config.js |____package.json ...
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 …
11. detox react-native-navigation react-native-interactable react-native-ui-lib react-native-calendars react-native-keyboard-input react-native-autogrow-textinput DetoxInstruments remx react-native-notifications react-native-camera-kit react-native-keyboard-input react-native-paged-contacts react-native-action-view
13. CI & Infrastructure 02
14. CRM Clubs Stores Engine Wix App GA GA GA GA RC RC RC RC TestFlight/ Google Play
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
22. Testing With Detox
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
34. Cross App Upgrades 05
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
38. Hotfixes True Continuous
39. Codename: Purple
40. Thanks. medium/@rotemmiz github.com/yershalom github.com/rotemmiz @yershalom @rotemmiz shalomy@wix.com rotemm@wix.com