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

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