The new architecture is here… what now?

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 Wrocław 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 Wrocław @callstackio @kelset 2
   

   View Slide

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

   React Native core maintainer & releaser (since 2018)
   RN Wrocław @callstackio @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 Wrocław @callstackio @kelset 4
   

   View Slide

5. TAKING A 🦶 BACK
   

   THE OLD ARCHITECTURE (📄)
   RN Wrocław @callstackio @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 Wrocław @callstackio @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 Wrocław @callstackio @kelset 7
   

   View Slide

8. RN Wrocław @callstackio @kelset 8
   

   View Slide

9. A WHOLE NEW WORLD ✨
   

   THE NEW ARCHITECTURE (🪡)
   RN Wrocław @callstackio @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 Wrocław @callstackio @kelset 10
    

    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 Wrocław @callstackio @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 Wrocław @callstackio @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 Wrocław @callstackio @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 dedicated tool to
    automate the generation
    C++ is strongly typed
    we can trust the data that
    are passed back and forth
    RN Wrocław @callstackio @kelset 14
    

    View Slide

15. THE CODEGEN FLOW
    typed
    

    JS
    parser schema
    generated
    interfaces
    • It’s modular
    repo: aka.ms/rn-codegen
    can be used to infer
    code status
    one per each type
    system
    RN Wrocław @callstackio @kelset 15
    

    View Slide

16. 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 Wrocław @callstackio @kelset 16
    

    View Slide

17. LET'S COMPARE THEM
    🪡 > 📄
    • No more JSONs to communicate but native
    interoperability
    • 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 Wrocław @callstackio @kelset 17
    

    View Slide

18. RN Wrocław @callstackio @kelset 18
    

    View Slide

19. SO, WHAT NOW?
    

    HOW DO WE START USING 🪡
    RN Wrocław @callstackio @kelset 19
    

    View Slide

20. AN OVERVIEW OF THE PRACTICAL STEPS
    RN Wrocław @callstackio @kelset 20
    src: aka.ms/rn-newarch
    

    View Slide

21. AN OVERVIEW OF THE PRACTICAL STEPS
    👏
    & team
    RN Wrocław @callstackio @kelset 21
    src: aka.ms/rn-newarch
    

    View Slide

22. AN OVERVIEW OF THE PRACTICAL STEPS
    Premise:
    Code pre-dates RN 0.68
    👏
    & team
    RN Wrocław @callstackio @kelset 22
    src: aka.ms/rn-newarch
    

    View Slide

23. FOR LIBRARIES
    RN Wrocław @callstackio @kelset 23
    

    View Slide

24. FOR APPS
    RN Wrocław @callstackio @kelset 24
    

    View Slide

25. “What could go wrong?”
    RN Wrocław @callstackio @kelset 25
    

    View Slide

26. RN Wrocław @callstackio @kelset 26
    

    View Slide

27. THE CHALLENGERS
    • Typing
    • New arch con
    fi
    guration
    • Third party libraries
    RN Wrocław @callstackio @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 Wrocław @callstackio @kelset 28
    

    View Slide

29. NEW ARCH CONFIGURATION
    RN Wrocław @callstackio @kelset 29
    src: aka.ms/rn-nalib
    

    View Slide

30. NEW ARCH CONFIGURATION
    findNodeHandle
    
    
    UIManager.measure()
    
    
    setNativeProps
    
    
    requireNativeComponent🛠
    
    
    dispatchViewManagerCommand
    To turn on Fabric…
    RN Wrocław @callstackio @kelset 30
    src: aka.ms/rn-nalib
    

    View Slide

31. NEW ARCH CONFIGURATION - #2
    🍎 🤖
    !?!
    FIXED IN 0.70
    RN Wrocław @callstackio @kelset 31
    

    View Slide

32. THIRD PARTY LIBRARIES
    4+1
    RN Wrocław @callstackio @kelset 32
    src: https://reactnative.directory/
    

    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 Wrocław @callstackio @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 Wrocław @callstackio @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 Wrocław @callstackio @kelset 37
    

    View Slide

38. Jokes aside, I left out quite a few more things
    RN Wrocław @callstackio @kelset 38
    

    View Slide

39. 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 Wrocław @callstackio @kelset 39
    

    View Slide

40. AND THIS IS WHERE
    
    
    I'D PUT BENCHMARKS
    IF I HAD ANY
    RN Wrocław @callstackio @kelset 40
    

    View Slide

41. PLANNING FOR IT 💭
    RN Wrocław @callstackio @kelset 41
    

    View Slide

42. RN Wrocław @callstackio @kelset 42
    

    View Slide

43. “AN IDEA OF A” PLAN
    RN Wrocław @callstackio @kelset 43
    

    View Slide

44. Also viable: create-react-native-library
    Fabric doesn't have backward compat
    React 18
    be on latest RN version
    use RNNewArchitectureApp
    use RNNewArchitectureLibraries
    RN Wrocław @callstackio @kelset 44
    

    View Slide

45. WHY START NOW?
    The feedback loop
    RN Wrocław @callstackio @kelset 45
    

    View Slide

46. WHY START NOW?
    The feedback loop
    RN Wrocław @callstackio @kelset 46
    src: aka.ms/rn-newarch-wg
    

    View Slide

47. 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 Wrocław @callstackio @kelset 47
    

    View Slide

48. Try fast, fail fast, tell everyone
    and help each other!
    RN Wrocław @callstackio @kelset 48
    CONCLUDING
    

    View Slide

49. @kelset
    kelset.dev
    RN Wrocław @callstackio @kelset 49
    THANK YOU!
    

    View Slide