React Native: past, future and present

React Native: past, future and present

React Native is now 4 years old. During this time, we’ve observed more progression than ever before towards the vision of a cross-platform mobile solution. Even still, we have yet to realise its core mission of being as powerful as pure native. There have been many challenges that we’ve faced head on as they’ve surfaced. In overcoming them with the support of the community, we’ve managed to establish React Native as a force that is now defining the future of the segment.

In this talk, we’ll explore this history-in-the-making before diving deeper into more technical subjects including the JSI & JSC upgrade, TurboModules & Fabric, and the CodeGen. With all the pieces of the puzzle in place and landing on master by end of the year, we are closer to reaching our original objective than ever before - while pushing the limits to a whole new level.

C7171fc9d27bc81913733c6703093a61?s=128

Lorenzo Sciandra

October 25, 2019
Tweet

Transcript

  1. REACT NATIVE: 
 PAST, PRESENT AND FUTURE

  2. REACT NATIVE: 
 PAST, FUTURE AND PRESENT

  3. REACT NATIVE: 
 PAST, FUTURE AND PRESENT change is good*

  4. REACT NATIVE: 
 PAST, FUTURE AND PRESENT change is good*

    *unless it’s Brexit
  5. CHANGE IS GOOD NOW React Norway meetup January 2019 React

    Edinburgh meetup May 2019 React Advanced October 2019 React Native core maintainer React Native Community owner ProvidedAsIs organiser
 & RN helper #ReactAdvanced @kelset @formidableLabs
  6. CHANGE IS GOOD NOW React Norway meetup January 2019 React

    Edinburgh meetup May 2019 React Advanced October 2019 React Native core maintainer React Native Community owner ProvidedAsIs organiser
 & RN helper #ReactAdvanced @kelset @formidableLabs
  7. HELLO, I’M LORENZO! • React Native developer > 3yrs •

    React Native core maintainer ~ 2yrs • Software Engineer @ Formidable UK < 1yr #ReactAdvanced @kelset @formidableLabs @KELSET EVERYWHERE
  8. HELLO, I’M LORENZO! • React Native developer > 3yrs •

    React Native core maintainer ~ 2yrs • Software Engineer @ Formidable UK < 1yr we are hiring! #ReactAdvanced @kelset @formidableLabs @KELSET EVERYWHERE
  9. THE PAST how did it all start? #ReactAdvanced @kelset @formidableLabs

  10. THE PAST how did it all start? #ReactAdvanced @kelset @formidableLabs

  11. A LONG, LONG TIME AGO • Back in 2013 React

    Native #ReactAdvanced @kelset @formidableLabs
  12. A LONG, LONG TIME AGO • Back in 2013 React

    Native #ReactAdvanced @kelset @formidableLabs Web-based
 JSX
 Fast to iterate Proprietary stack
 Disjointed
 Slow to iterate
  13. SEPARATE THREADS • In 2015, they come up with an

    idea… React JS Bundle Native (Java / ObjC) Metro JSC UI thread JS thread #ReactAdvanced @kelset @formidableLabs
  14. SEPARATE THREADS • In 2015, they come up with an

    idea… React JS Bundle Native (Java / ObjC) Metro JSC UI thread JS thread #ReactAdvanced @kelset @formidableLabs JavascriptCore iOS native engine 2 threads safer from JS Custom bundler
  15. COMMUNICATION NEEDED • JSON was selected as the data format

    React JS Bundle Native (Java / ObjC) Metro JSC bridge UI thread JS thread #ReactAdvanced @kelset @formidableLabs JSON JSON
  16. COMMUNICATION NEEDED • JSON was selected as the data format

    React JS Bundle Native (Java / ObjC) Metro JSC bridge UI thread JS thread #ReactAdvanced @kelset @formidableLabs JSON JSON JSON messages are batched ONE async messages queue Tied to the RN lifecycle
  17. HANDLING UI • Yoga is a cross-platform layout engine which

    implements Flexbox. React JS Bundle Native UI Native Modules Metro JSC Yoga JSON JSON bridge Shadow thread UI thread JS thread #ReactAdvanced @kelset @formidableLabs
  18. HANDLING UI • Yoga is a cross-platform layout engine which

    implements Flexbox. React JS Bundle Native UI Native Modules Metro JSC Yoga JSON JSON bridge Shadow thread UI thread JS thread #ReactAdvanced @kelset @formidableLabs A dedicated thread Implemented in C++ UI operations are handled by UIManagerModule
  19. THE FULL ARCHITECTURE React JS Bundle Native UI Native Modules

    Metro JSC Yoga JSON JSON bridge Shadow thread UI thread JS thread #ReactAdvanced @kelset @formidableLabs
  20. LIMITATIONS • Let’s talk about the main tradeoffs React JS

    Bundle Native UI Native Modules Metro JSC Yoga JSON JSON bridge #ReactAdvanced @kelset @formidableLabs
  21. LIMITATIONS • Let’s talk about the main tradeoffs React JS

    Bundle Native UI Native Modules Metro JSC Yoga JSON JSON bridge #ReactAdvanced @kelset @formidableLabs on Android must be bundled JS doesn’t really control this ONE bridge means bottleneck We need to load all modules at startup Async batched means no awareness between realms
  22. THE FUTURE what is the change that await us? #ReactAdvanced

    @kelset @formidableLabs
  23. THE FUTURE what is the change that await us? #ReactAdvanced

    @kelset @formidableLabs
  24. THE KEY CHANGE • A direct interface between JS and

    C++ a.k.a. JSI #ReactAdvanced @kelset @formidableLabs React JS Bundle Metro JS* vm JS thread JSI C++ Objective-C Java JNI ???
  25. THE KEY CHANGE • A direct interface between JS and

    C++ a.k.a. JSI #ReactAdvanced @kelset @formidableLabs React JS Bundle Metro JS* vm JS thread JSI C++ Objective-C Java JNI ??? easily swap the engine broader platform target hostObject allows shared ownership src: https://github.com/facebook/react-native/blob/master/ReactCommon/jsi/jsi/jsi.h
  26. NATIVEMODULES • AKA TurboModules #ReactAdvanced @kelset @formidableLabs React JS Bundle

    Native UI Native Modules Metro JS* vm UI thread JS thread JSI NativeModules
  27. NATIVEMODULES • AKA TurboModules #ReactAdvanced @kelset @formidableLabs React JS Bundle

    Native UI Native Modules Metro JS* vm UI thread JS thread JSI NativeModules direct reference between realms native method can be called synchronously we only load the module when actually needed
  28. RENDERER • AKA Fabric #ReactAdvanced @kelset @formidableLabs React JS Bundle

    Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules
  29. RENDERER • AKA Fabric #ReactAdvanced @kelset @formidableLabs React JS Bundle

    Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules shared ownership of the C++ shadow tree Opt-in synchronous execution for high priority UI updates Multiple rendering priorities in React (Concurrent mode) src: https://reactjs.org/docs/concurrent-mode-intro.html
  30. WHO NEEDS A BRIDGE ANYWAY? • Third phase of reArchitecture

    AKA Initialization #ReactAdvanced @kelset @formidableLabs React JS Bundle Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules bridge
  31. WHO NEEDS A BRIDGE ANYWAY? • Third phase of reArchitecture

    AKA Initialization #ReactAdvanced @kelset @formidableLabs React JS Bundle Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules
  32. JSI IS A NEW SUPERPOWER • Type-safety AKA adding the

    Codegen #ReactAdvanced @kelset @formidableLabs React JS Bundle Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules types Generated Interfaces Codegen
  33. JSI IS A NEW SUPERPOWER • Type-safety AKA adding the

    Codegen #ReactAdvanced @kelset @formidableLabs React JS Bundle Native UI Native Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules types Generated Interfaces Codegen a dedicated tool to automate the generation C++ is strongly typed we can trust the data that are passed back and forth
  34. THE CODEGEN FLOW #ReactAdvanced @kelset @formidableLabs typed 
 JS parser

    schema generated interfaces • It’s modular repo: https://github.com/facebook/react-native/tree/master/packages/react-native-codegen
  35. THE CODEGEN FLOW #ReactAdvanced @kelset @formidableLabs typed 
 JS parser

    schema generated interfaces • It’s modular repo: https://github.com/facebook/react-native/tree/master/packages/react-native-codegen can be used to infer code status one per each type system
  36. THE NEW REACT NATIVE React JS Bundle Native UI Native

    Modules Metro JS* vm Yoga Shadow thread UI thread JS thread JSI Renderer NativeModules types Generated Interfaces Codegen #ReactAdvanced @kelset @formidableLabs
  37. LET'S COMPARE THEM #ReactAdvanced @kelset @formidableLabs • No more JSONs

    to communicate but native interoperability • Faster startup time • Better memory management • Less crashes • Improved DX via new tooling
  38. OFFICIAL ROADMAP* ** • JSI - already available • NativeModules

    (TurboModules) - early 2020 • Renderer (Fabric) - mid 2020 • Initialization (full bridge removal) - late 2020 • Codegen - ???? #ReactAdvanced @kelset @formidableLabs *it's a retro-compatible upgrade process **all in the open source repo
  39. THE PRESENT what can we do, now? #ReactAdvanced @kelset @formidableLabs

  40. THE PRESENT what can we do, now? #ReactAdvanced @kelset @formidableLabs

  41. LOW HANGING FRUITS 1. Type your codebase (& keep your

    codebase up-to-date)
 
 
 2. Take advantage of Metro’s configurations (ex. inlineRequires)
 
 
 
 
 
 
 src: https://facebook.github.io/react-native/docs/performance#ram-bundles-inline-requires
 src: https://github.com/facebook/metro/blob/master/packages/metro-react-native-babel-transformer/src/index.js
 src: https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/plugins/inline-requires.js 3. Use FB’s Flipper (and React Dev Tools) for benchmarking performances (will be easier for RN >= 62)
 src: https://blog.nparashuram.com/2019/09/using-flipper-with-react-native.html #ReactAdvanced @kelset @formidableLabs
  42. HERMES “Hermes is an open-source JavaScript engine optimized for running

    React Native apps on Android.” #ReactAdvanced @kelset @formidableLabs repo: https://github.com/facebook/hermes blog: https://engineering.fb.com/android/hermes/ React JS Bundle Metro JS* vm React Precompiled JS Bundle Metro +
 Hermes Hermes • Usable thanks to the JSI • Has a couple of key features that are aimed directly to React Native apps: • Bytecode precompilation • Ahead-of-time static optimization (*not in debug builds) • a garbage collector aimed at low-end devices • support for Chrome remote debugging via the DevTools protocol
  43. HERMES “Hermes is an open-source JavaScript engine optimized for running

    React Native apps on Android.” #ReactAdvanced @kelset @formidableLabs repo: https://github.com/facebook/hermes blog: https://engineering.fb.com/android/hermes/ React JS Bundle Metro JS* vm React Precompiled JS Bundle Metro +
 Hermes Hermes • Usable thanks to the JSI • Has a couple of key features that are aimed directly to React Native apps: • Bytecode precompilation • Ahead-of-time static optimization (*not in debug builds) • a garbage collector aimed at low-end devices • support for Chrome remote debugging via the DevTools protocol
  44. THE LEAN CORE • By moving portions of the current

    main codebase into separate repositories (ex. WebView), we can increase the overall solidity of the whole codebase: A. More people involved B. Reduce dead code in your app #ReactAdvanced @kelset @formidableLabs art async-storage cli jsc-android-buildscripts react-native-button react-native-cameraroll react-native-checkbox react-native-clipboard react-native-datetimepicker react-native-geolocation react-native-image-editor react-native-image-picker-ios react-native-masked-view react-native-netinfo react-native-picker react-native-progress-bar-android react-native-progress-view react-native-push-notification-ios react-native-segmented-control react-native-simple-share react-native-simple-share react-native-slider react-native-statusbar react-native-tvos react-native-viewpager react-native-webview
 …
  45. THE REACT NATIVE COMMUNITY #ReactAdvanced @kelset @formidableLabs • The community

    has always been active actor in the development of React Native
 https://github.com/react-native-community/discussions-and-proposals
 • Synergy with the FB team is leading to a more solid and consistent set of libraries
 
 
 
 • Thanks to the community we got massive DX improvements like Upgrade Helper and Auto-linking CLI
 
 BOB TESTER
 
 CIRCLECI-ORB
  46. COMMUNITY EXPERIMENTS #ReactAdvanced @kelset @formidableLabs 1. Renderer (Fabric) related discussion:

    
 https://github.com/react-native-community/discussions-and-proposals/issues/4
 2. NativeModules (TurboModules) related discussion: 
 https://github.com/react-native-community/discussions-and-proposals/issues/40
 3. JS engines benchmarking & comparison by @kudochien
 https://github.com/Kudo/react-native-js-benchmark
 4. Experimenting with the JSI:
 https://github.com/ericlewis/react-native-hostobject-demo
 
 @ericlewis & @chrfalch showcased & described their tests on HostObject: 
 part 1: https://medium.com/@christian.falch/https-medium-com-christian-falch-react-native-jsi-challenge-1201a69c8fbf
 part 2: https://medium.com/@christian.falch/react-native-jsi-challenge-2-56fc4dd91613
  47. COMMUNITY EXPERIMENTS #ReactAdvanced @kelset @formidableLabs 1. Renderer (Fabric) related discussion:

    
 https://github.com/react-native-community/discussions-and-proposals/issues/4
 2. NativeModules (TurboModules) related discussion: 
 https://github.com/react-native-community/discussions-and-proposals/issues/40
 3. JS engines benchmarking & comparison by @kudochien
 https://github.com/Kudo/react-native-js-benchmark
 4. Experimenting with the JSI:
 https://github.com/ericlewis/react-native-hostobject-demo
 
 @ericlewis & @chrfalch showcased & described their tests on HostObject: 
 part 1: https://medium.com/@christian.falch/https-medium-com-christian-falch-react-native-jsi-challenge-1201a69c8fbf
 part 2: https://medium.com/@christian.falch/react-native-jsi-challenge-2-56fc4dd91613
  48. CHANGE IS GOOD #ReactAdvanced @kelset @formidableLabs

  49. CHANGE IS GOOD #ReactAdvanced @kelset @formidableLabs ⚛ + ⏳ =

  50. CHANGE IS GOOD #ReactAdvanced @kelset @formidableLabs ⚛ + ⏳ =

    • the JSI is probably the single most important new concept in React Native
  51. CHANGE IS GOOD • Over 2020, NativeModules and Renderer and

    Initialisation will land and massively improver our apps #ReactAdvanced @kelset @formidableLabs ⚛ + ⏳ = • the JSI is probably the single most important new concept in React Native
  52. CHANGE IS GOOD • Over 2020, NativeModules and Renderer and

    Initialisation will land and massively improver our apps #ReactAdvanced @kelset @formidableLabs ⚛ + ⏳ = • We don’t need to sit around and wait, we can be active participants of this process • the JSI is probably the single most important new concept in React Native
  53. THANKS FOR LISTENING! @FormidableLabs we are hiring! @kelset
 (DMs are

    open!) Thank you 
 Phil, Alexey, Thibault, Lucas, Pavlos, Michael, Eloy
 the FB team, the React Native Community
 GitNation
 Anna @ProvidedAsIs