Downloaded 29 times
Uploaded byFwdays
Philip Shurpik "Architecting React Native app"
The document discusses the development of mobile applications using React Native, emphasizing an offline-first architecture and code sharing between iOS and Android platforms. It outlines strategies for managing state with Redux, testing methodologies, continuous delivery using Fastlane, and the use of CodePush for immediate updates. Various navigation approaches and performance tuning tips are also provided, highlighting the complexity and challenges of building cross-platform applications.
More Related Content
![[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBox](https://cdn.slidesharecdn.com/ss_thumbnails/l4-react-native-layout-160911060742-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Philip Shurpik "Architecting React Native app"
Philip Shurpik "Architecting React Native app"
- 2. About me Creating magicwith React Native in Debitoor/Ciklum :)
- 3. What are wedoing?
- 4. Goals before developmentstarted + Fast to develop with existing JavaScript team + Firstly for iOS, then for Android + Offline first + Mostly native look and feel - animations, visual effects, etc...
- 5.
- 6. It’s possible toshare 70-80-90% of code between platforms Depending on: + Architecture + Functionality + Third-party plugins usage Sharing code between platforms
- 7. Can be shared +Business logic + Container components Sharing code between platforms Can’t be shared - Platform specific stuff - Different interface patterns
- 8. Can be shared +Business logic + Container components Sharing code between platforms Can’t be shared - Platform specific stuff - Different interface patterns It depends... ● Code that works with plugins ● Presentational Components (depending on design)
- 9. Let’s make apparchitecture
- 10. * That’s howReact/React Native ecosystem looks like :)
- 11. Let’s start frombasement
- 12. View and BusinessLogic separation with Redux tap tap... User Container Component Thanks @andrestaltz for inspiration State Reducer Middleware Store Presentational Components View Actions Reducer API Render data
- 13.
- 15. But not allapps are working offline...
- 16. And even don’tforget your maps route screenshot
- 17. ...we are offline taptap... User Container Component State Reducer Middleware Store Presentational Components View Actions Reducer API Render ? ?
- 18. We can solvea lot of problems it in few lines of code + Persist store state on each change to AsyncStorage + Rehydrate store on App Start const store = createStore(reducer, compose( applyMiddleware(/* ... some middleware */), autoRehydrate() )); Using redux-persist enhancer persistStore(store, {storage: AsyncStorage});
- 19. Redux-persist Persist store stateon each change to AsyncStorage Container Component State Reducer Middleware Store Presentational Components View Reducer Device AsyncStorage Render Actions
- 20. Redux-persist Auto rehydrate storeon Application start Container Component State Reducer Middleware Store Presentational Components View Reducer Device AsyncStorage Initial Render
- 21. Actually we received offline-firstfor viewing data Let’s improve :)
- 22. Viewing data offline taptap... User Container Component Store Presentational Components View Actions API Render existing data Adding “offline” label Redux-persist State Reducer Middleware Reducer Marking data as outdated
- 23. Optimistically render new data Creating dataoffline (optimistic ui) tap tap... User Container Component Store Presentational Components View Actions API Adding “not sync” label Redux-persist State Reducer Middleware Reducer Marking data as not synchronised
- 24. Hints Generate item Idson client
- 25. Hints If you havesome data dependencies invoice depending on client and product make simple dependency tree for synchronisation order
- 26. Hints Use storage versionto not break anything while updating app
- 27. Hints Offline-first editing ofexisting data is much more complicated: + Deal with conflicts + Sync challenges + Multiple users challenges * Do it only if it’s one of the main selling points of your app
- 28.
- 29.
- 30. Navigation approaches JS-based Navigation ●Navigator ● NavigationExperimental ● react-native-router-flux ● ex-navigation ● ... Native Navigation ● NavigatorIOS ● react-native-navigation (wix) ● airbnb solution (not yet opensourced)
- 31. Pros: + Works withall latest RN versions + Declarative approach: <Router createReducer={reducerCreate}> <Scene key="loginPage" component={LoginPage} title="Login"/> ... </Router> + Can be easily debugged (it’s just JS code) + Has good custom extensions support React-native-router-flux
- 32. Cons: - Bad documentation -Non native JS animations, non native styles - Unable to smoothly integrate with existing IOS/Android apps React-native-router-flux
- 33. Pros: + Native userexperience for Android and IOS platforms + Developed and supported by Wix Cons: - You need to know Objective C/Java to debug it/fix issue - Hard to implement something really custom - Limited React Native version support (stable version supports 0.25.1 and experimental 0.37.0) React-native-navigation
- 34.
- 35. React Native ThreadsCommunication JS Thread (JavaScriptCore) Native Thread UI (Main) Thread Async Bridge Process Serialize Deserialize Process Render Long process Becomes not responsive Process
- 36. How to improve +Use shouldComponentUpdate - avoid not needed rendering (and bridging from JS to UI thread) + Run calculations after animations finish with InteractionManager.runAfterInteractions + Offload animations to UI Thread with Layout Animation + If everything is completely wrong - write Native code (we haven’t experienced such situations)
- 37. Going to production- expected path Write some JS code
- 38. Going to production- actually Write some JS code Tests and CI setup example at: https://git.io/rnstk
- 39. What we needbesides JS code ● Javascript tests: Unit and components
- 40. Unit tests -example describe('auth.reducer', () => { it('should set token on login success', () => { const action = { type: types.AUTH_LOGIN_SUCCESS, payload: {token: '111'} }; expect(auth(INITIAL_STATE, action)).to.be.deep.equal({ ...INITIAL_STATE, token: '111', loading: false }); }); });
- 41. Components testing + enzyme +react-native-mock + chai-enzyme
- 42. Components tests withEnzyme - example describe('Button.spec.js', () => { let wrapper, pressHandler; beforeEach(() => { pressHandler = sinon.stub(); wrapper = shallow(<Button onPress={pressHandler}>text</Button>); }); it('should render text in button', () => { const text = wrapper.find(Text).first(); expect(text).to.have.prop('children', 'text'); }); it('should handle press', () => { wrapper.simulate('Press'); expect(pressHandler).to.have.been.calledOnce; }); });
- 43. Integrational (end toend) tests ● Javascript tests: Unit and components ● Integrational (end to end) tests: ○ Write in JavaScript - yeah, we are JS developers! :) ○ Run app on simulator ○ Login (check API work) ○ Went through main functionality and check that it works
- 44. Appium - architecture ●Uses Selenium Webdriver ● Appium is an HTTP server that creates and handles WebDriver sessions ● Appium starts “test case” on device that spawns a server and listen for proxied commands Appium test
- 45. The same testscrossplatform
- 46. The same testscrossplatform React Native uses different props to access elements on iOS and Android. Hope will be fixed soon: https://github.com/facebook/react- native/pull/9942
- 47. Test Example it('should login',() => getDriver() .waitAndClickElement('SignIn') .waitForElement('Login') .setElementValue('Email', EMAIL) .setElementValue('Password', PASSWORD) .clickElement('Login') .waitForElement('Dashboard') ) * With using of custom methods created with wd.addPromiseChainMethod
- 48. What about automatingcustom actions? Like: + Signin + Signout + Redirect to page example at: https://git.io/rnstk
- 49. Automate commands Appium test Mobile TestRunner Action Server (servesactions) Push action Press execute button fetch action get action dispatch action example at: https://git.io/rnstk
- 50.
- 51. Continuous delivery withFastlane + Manage certificates and provision profiles (for iOS) + Make app builds (for iOS) + Submits Beta builds to TestFlight / PlayStore alpha track + Submits Release builds to AppStore / PlayStore
- 52. but... - We needto wait before Apple approves our app - Users do not update their apps for a long time - If you update app through appstore it resets user reviews :( - It’s harder to support different versions of app - especially for supporters :) We need to be able to update javascript immediately (like on web)
- 53. CodePush Cloud service withReact Native support
- 54. CodePush Deploy Code updatesdirectly to users: code-push release-react MyApp ios ● JS Bundle ● Image assets
- 55. CodePush features ● SeparateStaging and Production versions ● Promoting updates ○ Partially promoting (like 20%) ○ A/B testing ● Rollback updates ○ Auto-rollback if app crashes
- 56. Links React Native StarterKit: https://github.com/philipshurpik/react-native-starter-kit Performance tuning: https://medium.com/@talkol/performance-limitations-of-react-native-an d-how-to-overcome-them-947630d7f440#.2dsdud7yr https://facebook.github.io/react-native/docs/android-ui-performance.ht ml
- 57.