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.

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