React Native: Things we learned the Hard way

These are the slides from a talk I gave at Fragments (formerly, droidCon India) 2017, explaining our learnings at Myntra in embracing React Native

Transcript

1. React Native: Things we learned the Hard way Gaurav Kaushik (@g7kaushik) SSE, Myntra
2. Where are we with RN?
3. Where are we with RN? • More than 80% of iOS, and 60% of android on RN
4. Where are we with RN? • More than 80% of iOS, and 60% of android on RN • 95% of our RN codebase common across both platforms
5. Where are we with RN? • More than 80% of iOS, and 60% of android on RN • 95% of our RN codebase common across both platforms • All new features taken up in RN (eg: Myntra Shopping Groups)
6. What is React Native?
7. What is React Native? • React Native lets you build mobile apps using only JavaScript
8. What is React Native? • React Native lets you build mobile apps using only JavaScript • Native & Declarative
9. What is React Native? • React Native lets you build mobile apps using only JavaScript • Native & Declarative • Developer friendly; Learn Once, write anywhere
10. Basic render flow
11. Basic render flow XML/ Storyboard Native View Hierarchy On-screen render Native
12. Basic render flow XML/ Storyboard Native View Hierarchy On-screen render Native Tree of React components Native View Hierarchy On-screen render JSX React JS Bridge JS Engine Native UI Thread
13. Benefits
14. Benefits • Saved build times, instant refresh (HMR, Live reload)
15. Benefits • Saved build times, instant refresh (HMR, Live reload) • Over-the-air (OTA) updates, users needn’t update their apps
16. Benefits • Saved build times, instant refresh (HMR, Live reload) • Over-the-air (OTA) updates, users needn’t update their apps • Faster product iteration, and even faster bug-fixes (just like web!)
17. Benefits • Saved build times, instant refresh (HMR, Live reload) • Over-the-air (OTA) updates, users needn’t update their apps • Faster product iteration, and even faster bug-fixes (just like web!) • Cross-platform code sharing
18. Benefits • Saved build times, instant refresh (HMR, Live reload) • Over-the-air (OTA) updates, users needn’t update their apps • Faster product iteration, and even faster bug-fixes (just like web!) • Cross-platform code sharing • Saved costs, same dev owns the feature irrespective on both platforms
19. Challenges and Learnings
20. Organising our repos
21. Organising our repos iOS
22. Organising our repos iOS android
23. Organising our repos iOS android recommended
24. Organising our repos batbelt
25. Organising our repos batbelt
26. Organising our repos batbelt
27. Organising our repos batbelt
28. Organising our repos batbelt
29. Organising our repos batbelt
30. Organising our repos batbelt
31. Managing heavy computational tasks JS Bridge JS Engine/ Runtime Main Thread (Native) Source: android logcat
32. Managing heavy computational tasks JS is single-threaded (and no planned support for web workers in RN)
33. Managing heavy computational tasks To get JS bridge logs, enable SPY mode from MessageQueue module (MessageQueue.spy(true)) JS is single-threaded (and no planned support for web workers in RN)
34. Managing heavy computational tasks
35. Managing heavy computational tasks For heavy computational tasks, offload computation to native via Native Modules
36. Managing heavy computational tasks For heavy computational tasks, offload computation to native via Native Modules For moderate computation tasks, use InteractionManager.runAfterInteractions()
37. Managing heavy computational tasks For heavy computational tasks, offload computation to native via Native Modules For moderate computation tasks, use InteractionManager.runAfterInteractions() Make sure traffic on your JS bridge is as smooth as possible
38. Initial screen load time: android
39. Initial screen load time: android iOS JSC Engine Already initialised by the OS
40. Initial screen load time: android Safari iOS JSC Engine Already initialised by the OS apps (UIWebView)
41. Initial screen load time: android Safari RN app iOS JSC Engine Already initialised by the OS apps (UIWebView)
42. Initial screen load time: android
43. Initial screen load time: android android Already initialised by the OS Chrome V8 engine
44. Initial screen load time: android Chrome Other apps (WebView) android Already initialised by the OS Chrome V8 engine
45. Initial screen load time: android Chrome Other apps (WebView) android Already initialised by the OS Chrome V8 engine JSC Engine Packaged with the app
46. Initial screen load time: android Our app Chrome Other apps (WebView) android Already initialised by the OS Chrome V8 engine JSC Engine Packaged with the app
47. Initial screen load time: android
48. Initial screen load time: android JS engine/runtime initialisation (~400ms on low- end devices)
49. Initial screen load time: android JS engine/runtime initialisation (~400ms on low- end devices) Loading of bundle onto engine and eventual execution (time depends on bundle size and kind of device)
50. Initial screen load time: android JS engine/runtime initialisation (~400ms on low- end devices) Loading of bundle onto engine and eventual execution (time depends on bundle size and kind of device) More on this later
51. Just a little further!
52. Just a little further!
53. Navigation in a hybrid (RN+N) app
54. Navigation in a hybrid (RN+N) app React Native React React
55. Navigation in a hybrid (RN+N) app React Native React React All existing solutions based on the assumption that entire app in built ground up in RN (eg: reactNavigation, ex-navigation, react-router etc)
56. Navigation in a hybrid (RN+N) app React Native React React All existing solutions based on the assumption that entire app in built ground up in RN (eg: reactNavigation, ex-navigation, react-router etc)
57. Navigation in a hybrid (RN+N) app React Native React React All existing solutions based on the assumption that entire app in built ground up in RN (eg: reactNavigation, ex-navigation, react-router etc)
58. Navigation in a hybrid (RN+N) app
59. Navigation in a hybrid (RN+N) app React Native React React
60. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation
61. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation
62. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation
63. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation
64. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation Can we do better?
65. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation Unnecessary initialisation of two ReactActivities/VCs Can we do better?
66. Navigation in a hybrid (RN+N) app React Native React React Our implementation: Wrap each react screen in its own activity/ ViewController and let a NativeModule handle navigation Unnecessary initialisation of two ReactActivities/VCs Enter react-native-navigation by wix Can we do better?
67. Bundle updates on already installed apps
68. Bundle updates on already installed apps dev
69. Bundle updates on already installed apps dev Jan 1.1.0 Release branch
70. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 Release branch
71. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 major bug gets reported Release branch
72. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 March 1.3.0 major bug gets reported fix with this release Release branch
73. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 March 1.3.0 major bug gets reported fix with this release RN world fix with this release Release branch
74. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 March 1.3.0 major bug gets reported fix with this release RN world push fix for 1.1.0 push fix for 1.2.0 fix with this release Release branch
75. Bundle updates on already installed apps
76. Bundle updates on already installed apps dev
77. Bundle updates on already installed apps dev Jan 1.1.0 app version
78. Bundle updates on already installed apps dev Jan 1.1.0 app version jsbundle-1.1.0 JS bundle name
79. Bundle updates on already installed apps dev Jan 1.1.0 app version jsbundle-1.1.0 JS bundle name 1.0.0 JS bundle version
80. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 app version jsbundle-1.2.0 jsbundle-1.1.0 JS bundle name 1.0.0 1.0.0 JS bundle version
81. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 major bug app version jsbundle-1.2.0 jsbundle-1.1.0 JS bundle name 1.0.0 1.0.0 JS bundle version
82. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 major bug app version jsbundle-1.2.0 jsbundle-1.1.0 JS bundle name 1.0.0 1.0.0 JS bundle version 1.0.1
83. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 major bug app version jsbundle-1.2.0 jsbundle-1.1.0 JS bundle name 1.0.0 1.0.0 JS bundle version 1.0.1 1.0.1
84. Bundle updates on already installed apps
85. Bundle updates on already installed apps dev Jan Feb 1.1.0 1.2.0 app version Native repos
86. Bundle updates on already installed apps dev 1.1.0 batbelt version dev Jan Feb 1.1.0 1.2.0 app version Native repos Batbelt repo 1.2.0
87. Bundle updates on already installed apps major bug dev 1.1.0 batbelt version dev Jan Feb 1.1.0 1.2.0 app version Native repos Batbelt repo 1.2.0
88. Bundle updates on already installed apps major bug dev 1.1.0 batbelt version dev Jan Feb 1.1.0 1.2.0 app version Native repos Batbelt repo 1.2.0
89. Bundle updates on already installed apps major bug dev 1.1.0 batbelt version dev Jan Feb 1.1.0 1.2.0 app version Native repos Batbelt repo 1.2.0
90. Bundle updates on already installed apps major bug dev 1.1.0 batbelt version dev Jan Feb 1.1.0 1.2.0 app version Native repos Batbelt repo 1.2.0 1.1.1 1.2.1
91. Bundle updates on already installed apps
92. Bundle updates on already installed apps initially on dev branch
93. Bundle updates on already installed apps initially on dev branch checkout to 1.1.0 branch
94. Bundle updates on already installed apps initially on dev branch checkout to 1.1.0 branch update versions in package.json, generate and publish bundle
95. Bundle updates on already installed apps
96. Bundle updates on already installed apps • Target internal audience (@myntra.com IDs) for a day or two, and then do percentage rollouts to external users
97. Bundle updates on already installed apps • Target internal audience (@myntra.com IDs) for a day or two, and then do percentage rollouts to external users • Support at most last 3 (android) & last 2 (iOS) app versions
98. Bundle updates on already installed apps • Target internal audience (@myntra.com IDs) for a day or two, and then do percentage rollouts to external users • Support at most last 3 (android) & last 2 (iOS) app versions • Ensure new features are released simultaneously on both platforms
99. Product requirements
100. Product requirements Managing your Product Managers
101. Product requirements Managing your Product Managers And UX designers
102. Product requirements Managing your Product Managers And UX designers Given this newfound power, accommodating their ever evolving experiments/requirements
103. My manager Me Product Manager
104. My manager Me Product Manager
105. But this didn’t last long… My manager Me Product Manager
106. Product Manager Me again!
107. Product Manager Me again!
108. Future plans
109. Future plans • Move the rest of the app to RN • Ideal state: Single React Activity/VC & Single WebView
110. Future plans • Move the rest of the app to RN • Ideal state: Single React Activity/VC & Single WebView • Divide our bundles into core and feature bundles
111. Future plans • Move the rest of the app to RN • Ideal state: Single React Activity/VC & Single WebView • Divide our bundles into core and feature bundles • OTA diff updates (Sending only what is necessary)
112. Future of RN landscape
113. Future of RN landscape • React Fiber, React VR
114. Future of RN landscape • React Fiber, React VR • ReactXP by microsoft
115. Future of RN landscape • React Fiber, React VR • ReactXP by microsoft • A fresh, end to end alternative to REST based implementations (React + Relay + GraphQL)
116. Future of RN landscape • React Fiber, React VR • ReactXP by microsoft • A fresh, end to end alternative to REST based implementations (React + Relay + GraphQL) • Ever growing and active community
117. Future of RN landscape • React Fiber, React VR • ReactXP by microsoft • A fresh, end to end alternative to REST based implementations (React + Relay + GraphQL) • Ever growing and active community • More companies now use it in prod (Instagram, Airbnb, Amazon, Walmart, Flipkart, to name a few)
118. Conclusion and our take
119. Conclusion and our take • Cross-platform code-sharing, OTA updates, impeccable dev experience
120. Conclusion and our take • Cross-platform code-sharing, OTA updates, impeccable dev experience • We are android/ios/web mobile developers
121. Conclusion and our take • Cross-platform code-sharing, OTA updates, impeccable dev experience • We are android/ios/web mobile developers • We think react-native and PWAs are the game changing technologies to come out in recent years of mobile evolution
122. Thank you!
123. Questions? Gaurav Kaushik (@g7kaushik)