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

The new architecture is here… what now? 3.0

Lorenzo S.
October 21, 2022

The new architecture is here… what now? 3.0

updated version of the talk with new mentions of RN 71+, updates from core and a few React Advanced 2022 elements
---
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!

Lorenzo S.

October 21, 2022
Tweet

More Decks by Lorenzo S.

Other Decks in Programming

Transcript

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

    View Slide

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

    React Native core maintainer & releaser (since 2018)
    @ReactAdvanced 21-oct-22 @kelset 2

    View Slide

  3. SETTING THE SCENE 🎥

    REVIEW THE ARCHITECTURES
    @ReactAdvanced 21-oct-22 @kelset 3

    View Slide

  4. THE OLD ARCHITECTURE 📄
    React JS Bundle
    Native UI
    Native Modules
    Metro
    JSC
    Yoga
    JSON JSON
    bridge
    Shadow thread
    UI thread
    JS thread
    @ReactAdvanced 21-oct-22 @kelset 4

    View Slide

  5. 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
    @ReactAdvanced 21-oct-22 @kelset 5

    View Slide

  6. LET'S COMPARE THEM
    🪡 > 📄
    No more JSONs to communicate

    ➡ Native interoperability & concurrency
    Faster Startup

    ➡ Native components are lazily initialised by default
    Better memory management
    Less crashes
    Type safety

    ➡ improved code quality
    Improved DX via new tooling
    @ReactAdvanced 21-oct-22 @kelset 6

    View Slide

  7. @ReactAdvanced 21-oct-22 @kelset 7

    View Slide

  8. WHAT NOW?

    HOW DO WE START USING 🪡
    @ReactAdvanced 21-oct-22 @kelset 8

    View Slide

  9. AN OVERVIEW OF THE PRACTICAL STEPS
    @ReactAdvanced 21-oct-22 @kelset 9
    src: aka.ms/rn-newarch

    View Slide

  10. AN OVERVIEW OF THE PRACTICAL STEPS
    @ReactAdvanced 21-oct-22 @kelset 10
    src: aka.ms/rn-newarch
    👏
    & team

    View Slide

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

    View Slide

  12. FOR LIBRARIES
    @ReactAdvanced 21-oct-22 @kelset 12

    View Slide

  13. FOR APPS
    @ReactAdvanced 21-oct-22 @kelset 13
    ...back when 0.67 -> 0.70

    View Slide

  14. FOR APPS
    @ReactAdvanced 21-oct-22 @kelset 14
    0.67 -> 0.71+

    View Slide

  15. “What could go wrong?”
    @ReactAdvanced 21-oct-22 @kelset 15

    View Slide

  16. @ReactAdvanced 21-oct-22 @kelset 16

    View Slide

  17. THE CHALLENGERS
    Typing
    New arch con
    fi
    guration
    Third party libraries
    @ReactAdvanced 21-oct-22 @kelset 17

    View Slide

  18. 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
    @ReactAdvanced 21-oct-22 @kelset 18

    View Slide

  19. NEW ARCH CONFIGURATION
    @ReactAdvanced 21-oct-22 @kelset 19
    src: aka.ms/rn-nalib

    View Slide

  20. NEW ARCH CONFIGURATION
    findNodeHandle


    UIManager.measure()


    setNativeProps


    requireNativeComponent🛠


    dispatchViewManagerCommand
    To migrate to the new arch in your library…
    @ReactAdvanced 21-oct-22 @kelset 20
    src: aka.ms/rn-nalib

    View Slide

  21. NEW ARCH CONFIGURATION
    🍎 🤖
    !?!
    @ReactAdvanced 21-oct-22 @kelset 21
    x2

    View Slide

  22. THIRD PARTY LIBRARIES
    8+1
    @ReactAdvanced 21-oct-22 @kelset 22
    src: https://reactnative.directory/
    8+1+7

    View Slide

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

    View Slide

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

    View Slide

  25. REACT 18 ⚛
    React
    React 18
    Please check: aka.ms/react18
    @ReactAdvanced 21-oct-22 @kelset 25

    View Slide

  26. 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
    @ReactAdvanced 21-oct-22 @kelset 26

    View Slide

  27. 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
    @ReactAdvanced 21-oct-22 @kelset 27

    View Slide

  28. REACT 18 ⚛
    Check: aka.ms/rn-react18
    @ReactAdvanced 21-oct-22 @kelset 28
    x2

    View Slide

  29. I left out quite a few more things
    @ReactAdvanced 21-oct-22 @kelset 29

    View Slide

  30. 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
    @ReactAdvanced 21-oct-22 @kelset 30
    slow JSI
    no newArch
    fl
    ag

    View Slide

  31. AND THIS IS WHERE


    I'D PUT BENCHMARKS
    IF I HAD ANY
    @ReactAdvanced 21-oct-22 @kelset 31

    View Slide

  32. PLANNING FOR IT 💭
    @ReactAdvanced 21-oct-22 @kelset 32

    View Slide

  33. MICROSOFT ❤ REACT NATIVE
    @ReactAdvanced 21-oct-22 @kelset 33
    Check: reactnative.dev/showcase
    (and many, many more...)

    View Slide

  34. @ReactAdvanced 21-oct-22 @kelset 34

    View Slide

  35. “AN IDEA OF A” PLAN
    @ReactAdvanced 21-oct-22 @kelset 35

    View Slide

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

    + concurrent
    be on latest RN version
    use RNNewArchitectureApp
    use RNNewArchitectureLibraries
    @ReactAdvanced 21-oct-22 @kelset 36
    react-native-test-app

    supports new arch
    you will be able to use
    RNDirectory too

    View Slide

  37. WHY START NOW?
    The feedback loop
    @ReactAdvanced 21-oct-22 @kelset 37

    View Slide

  38. WHY START NOW?
    The feedback loop
    @ReactAdvanced 21-oct-22 @kelset 38
    src: aka.ms/rn-newarch-wg

    View Slide

  39. FEEDBACK LOOP: BONUS ROUND!
    @ReactAdvanced 21-oct-22 @kelset 39
    src: aka.ms/rn-improve-22
    Only until
    the 25th!

    View Slide

  40. 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 🛠
    @ReactAdvanced 21-oct-22 @kelset 40

    View Slide

  41. Try fast, fail fast, tell everyone
    and help each other!
    @ReactAdvanced 21-oct-22 @kelset 41
    CONCLUDING

    View Slide

  42. @ReactAdvanced 21-oct-22 @kelset 42
    @kelset
    kelset.dev


    @ReactNativeMSFT
    THANK YOU!

    View Slide

  43. Q&A!
    @ReactAdvanced 21-oct-22 @kelset 43
    @kelset
    kelset.dev


    @ReactNativeMSFT
    THANK YOU!

    View Slide