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
   

   View Slide

2. REACT NATIVE:
   

   PAST, FUTURE AND PRESENT
   

   View Slide

3. REACT NATIVE:
   

   PAST, FUTURE AND PRESENT
   change is good*
   

   View Slide

4. REACT NATIVE:
   

   PAST, FUTURE AND PRESENT
   change is good*
   *unless it’s Brexit
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    ???
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    …
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

48. CHANGE IS GOOD
    #ReactAdvanced @kelset @formidableLabs
    

    View Slide

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

    View Slide

50. CHANGE IS GOOD
    #ReactAdvanced @kelset @formidableLabs
    ⚛ + ⏳ =
    • the JSI is probably the single most important new concept in React Native
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide