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!

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