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

The new architecture is here… what now? 2.0

Lorenzo S.
September 28, 2022

The new architecture is here… what now? 2.0

updated version of the talk with new mentions of RN 71+
---
The React Native new architecture has been "coming next year!" since 2019 - but, this time, it’s actually here! So… what now? What do we actually need to do, to benefit from this all new shiny tech? In this talk, I want to provide some insights and in-depth analysis of the current state of the migration path to the new architecture, to help you and your team evaluate and estimate when and how and how long it will take you to get to the next level!
---
Presented at React Native London meetup

Lorenzo S.

September 28, 2022
Tweet

More Decks by Lorenzo S.

Other Decks in Technology

Transcript

  1. THE NEW ARCHITECTURE IS HERE
    Photo by Tim Mossholder on Unsplash

    View Slide

  2. "COMING NEXT YEAR” SINCE 2019
    React Norway meetup
    January 2019
    React Edinburgh meetup
    May 2019
    React Advanced
    October 2019
    ItalianCoders
    April 2020
    RN London 28-sep-22 @kelset 2

    View Slide

  3. @kelset
    kelset.dev
    👋
    Lorenzo Sciandra (he/him)
    Senior Software Engineer @ Microsoft

    React Native core maintainer & releaser (since 2018)
    RN London 28-sep-22 @kelset 3

    View Slide

  4. MY GOALS
    1. Understanding of the core concepts of the new
    architecture
    2. Awareness of the challenges in moving to the new
    arch to help plan it
    RN London 28-sep-22 @kelset 4

    View Slide

  5. TAKING A 🦶 BACK

    THE OLD ARCHITECTURE (📄)
    RN London 28-sep-22 @kelset 5

    View Slide

  6. THE OLD ARCHITECTURE 📄
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JSC
    Yoga
    JSON JSON
    bridge
    Shadow thread
    UI thread
    JS thread
    RN London 28-sep-22 @kelset 6

    View Slide

  7. LIMITATIONS
    • Let’s talk about the main tradeoffs
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JSC
    Yoga
    JSON JSON
    bridge
    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
    RN London 28-sep-22 @kelset 7

    View Slide

  8. RN London 28-sep-22 @kelset 8

    View Slide

  9. A WHOLE NEW WORLD ✨

    THE NEW ARCHITECTURE (🪡)
    RN London 28-sep-22 @kelset 9

    View Slide

  10. THE KEY CHANGE
    • A direct interface between JS and C++ a.k.a. JSI
    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: aka.ms/rn-jsi
    RN London 28-sep-22 @kelset 10
    no need to JSON-ify
    data anymore

    View Slide

  11. TURBOMODULES
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JS* vm
    UI thread
    JS thread
    JSI
    TurboModules
    direct reference
    between realms
    native method can be
    called synchronously
    we only load the
    module when actually
    needed
    RN London 28-sep-22 @kelset 11

    View Slide

  12. FABRIC
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JS* vm
    Yoga
    Shadow thread
    UI thread
    JS thread
    JSI
    Fabric
    TurboModules
    shared ownership of the
    C++ shadow tree
    Opt-in synchronous
    execution for high
    priority UI updates
    Multiple rendering priorities in
    React (Concurrent mode)
    src: aka.ms/react-concurrent
    RN London 28-sep-22 @kelset 12

    View Slide

  13. WHO NEEDS A BRIDGE ANYWAY?
    • Third phase of re-architecture AKA Initialization AKA Venice AKA Bridgeless AKA React JS Bundle
    Native UI
    Native Modules
    Metro
    JS* vm
    Yoga
    Shadow thread
    UI thread
    JS thread
    JSI
    Fabric
    TurboModules
    bridge
    RN London 28-sep-22 @kelset 13

    View Slide

  14. CODEGEN
    • Type-safety AKA adding the Codegen
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JS* vm
    Yoga
    Shadow thread
    UI thread
    JS thread
    JSI
    Fabric
    TurboModules
    types
    Generated Interfaces
    Codegen
    a (optional) tool to
    automate the generation
    C++ is strongly typed
    we can trust the data that
    are passed back and forth
    RN London 28-sep-22 @kelset 14

    View Slide

  15. THE NEW REACT NATIVE (🪡)
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JS* vm
    Yoga
    Shadow thread
    UI thread
    JS thread
    JSI
    Fabric
    TurboModules
    types
    Generated Interfaces
    Codegen
    RN London 28-sep-22 @kelset 15

    View Slide

  16. LET'S COMPARE THEM
    🪡 > 📄
    • No more JSONs to communicate but native
    interoperability & concurrency
    • Faster Startup
    • Host components are lazily initialised by default
    • Better memory management
    • Less crashes
    • Type safety ➡ improved code quality
    • Improved DX via new tooling
    RN London 28-sep-22 @kelset 16

    View Slide

  17. RN London 28-sep-22 @kelset 17

    View Slide

  18. SO, WHAT NOW?

    HOW DO WE START USING 🪡
    RN London 28-sep-22 @kelset 18

    View Slide

  19. AN OVERVIEW OF THE PRACTICAL STEPS
    RN London 28-sep-22 @kelset 19
    src: aka.ms/rn-newarch

    View Slide

  20. AN OVERVIEW OF THE PRACTICAL STEPS
    RN London 28-sep-22 @kelset 20
    src: aka.ms/rn-newarch
    👏
    & team

    View Slide

  21. AN OVERVIEW OF THE PRACTICAL STEPS
    Premise:
    from 0.67 -> 0.71+
    👏
    & team
    RN London 28-sep-22 @kelset 21
    src: aka.ms/rn-newarch

    View Slide

  22. FOR LIBRARIES
    RN London 28-sep-22 @kelset 22

    View Slide

  23. FOR APPS
    RN London 28-sep-22 @kelset 23
    ...back when 0.67 -> 0.70

    View Slide

  24. FOR APPS
    RN London 28-sep-22 @kelset 24
    0.67 -> 0.71+

    View Slide

  25. “What could go wrong?”
    RN London 28-sep-22 @kelset 25

    View Slide

  26. RN London 28-sep-22 @kelset 26

    View Slide

  27. THE CHALLENGERS
    • Typing
    • New arch con
    fi
    guration
    • Third party libraries
    RN London 28-sep-22 @kelset 27

    View Slide

  28. TYPING
    • TurboModules + Codegen ➡ you need Typescript or Flow for all your code
    ✅ Primitive types
    ✅ Function types
    ✅ Object types
    ✅ Array types
    🔴 Union types
    🔴 Custom types
    🟡 Read-only types
    🟡 Exact* same signature across 🍎/🤖
    🟡 Typescript support still in beta
    RN London 28-sep-22 @kelset 28

    View Slide

  29. NEW ARCH CONFIGURATION
    RN London 28-sep-22 @kelset 29
    src: aka.ms/rn-nalib

    View Slide

  30. NEW ARCH CONFIGURATION
    findNodeHandle


    UIManager.measure()


    setNativeProps


    requireNativeComponent🛠


    dispatchViewManagerCommand
    To migrate to the new arch in your library…
    RN London 28-sep-22 @kelset 30
    src: aka.ms/rn-nalib

    View Slide

  31. NEW ARCH CONFIGURATION - #2
    🍎 🤖
    !?!
    RN London 28-sep-22 @kelset 31

    View Slide

  32. THIRD PARTY LIBRARIES
    6+1
    RN London 28-sep-22 @kelset 32
    src: https://reactnative.directory/
    6+1+6

    View Slide

  33. A new challenger appears
    #reactnative @ReactNativeMSFT @kelset

    View Slide

  34. A new challenger appears
    #reactnative @ReactNativeMSFT @kelset

    View Slide

  35. REACT 18 ⚛
    React
    React 18
    Please check: aka.ms/react18
    RN London 28-sep-22 @kelset 35

    View Slide

  36. REACT 18 ⚛
    Make sure that your state management is React 18 compliant:
    👍
    🚨Same for GraphQL clients🚨
    Other libs I’ve heard support 18 well:

    🐻 zustand 👻jotai
    🆇
    xstate
    RN London 28-sep-22 @kelset 36

    View Slide

  37. REACT 18 ⚛
    Make sure that your state management is React 18 compliant:
    👍
    🚨Same for GraphQL clients🚨
    Other libs I’ve heard support 18 well:

    🐻 zustand 👻jotai
    🆇
    xstate
    aka.ms/rn-statelibs-guide
    RN London 28-sep-22 @kelset 37

    View Slide

  38. REACT 18 ⚛ X2
    Check: aka.ms/rn-react18
    RN London 28-sep-22 @kelset 38

    View Slide

  39. Jokes aside, I left out quite a few more things
    RN London 28-sep-22 @kelset 39

    View Slide

  40. Jokes aside, I left out quite a few more things
    The new
    arch is
    great
    YOU
    ME
    Refactoring
    View recycling
    Swift support
    Build times Non-core platforms
    RN London 28-sep-22 @kelset 40
    slow JSI
    no newArch
    fl
    ag

    View Slide

  41. AND THIS IS WHERE


    I'D PUT BENCHMARKS
    IF I HAD ANY
    RN London 28-sep-22 @kelset 41

    View Slide

  42. PLANNING FOR IT 💭
    RN London 28-sep-22 @kelset 42

    View Slide

  43. RN London 28-sep-22 @kelset 43

    View Slide

  44. “AN IDEA OF A” PLAN
    RN London 28-sep-22 @kelset 44

    View Slide

  45. Also viable: create-react-native-library
    React 18

    + concurrent
    be on latest RN version
    use RNNewArchitectureApp
    use RNNewArchitectureLibraries
    RN London 28-sep-22 @kelset 45
    Already supports new arch
    you can use RNDirectory too

    View Slide

  46. WHY START NOW?
    The feedback loop
    RN London 28-sep-22 @kelset 46

    View Slide

  47. WHY START NOW?
    The feedback loop
    RN London 28-sep-22 @kelset 47
    src: aka.ms/rn-newarch-wg

    View Slide

  48. CONCLUDING
    A. The new architecture is pretty, pretty awesome 🚀
    B. Migrating to it will take N months for most projects ⏳
    C. Supporting OSS libraries is key to enabling the new arch 🛠
    RN London 28-sep-22 @kelset 48

    View Slide

  49. Try fast, fail fast, tell everyone
    and help each other!
    RN London 28-sep-22 @kelset 49
    CONCLUDING

    View Slide

  50. @kelset
    kelset.dev


    @ReactNativeMSFT
    RN London 28-sep-22 @kelset 50
    THANK YOU!

    View Slide