Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native: Things we learned the Hard way

6a7e70c62672f481b223d4695bd4bc50?s=47 gauravkaushik
September 13, 2017

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

6a7e70c62672f481b223d4695bd4bc50?s=128

gauravkaushik

September 13, 2017
Tweet

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)