$30 off During Our Annual Pro Sale. View Details »

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
  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
  3. SETTING THE SCENE 🎥 
 REVIEW THE ARCHITECTURES @ReactAdvanced 21-oct-22

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

  8. WHAT NOW? 
 HOW DO WE START USING 🪡 @ReactAdvanced

    21-oct-22 @kelset 8
  9. AN OVERVIEW OF THE PRACTICAL STEPS @ReactAdvanced 21-oct-22 @kelset 9

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

    src: aka.ms/rn-newarch 👏 & team
  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
  12. FOR LIBRARIES @ReactAdvanced 21-oct-22 @kelset 12

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

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

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

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

  17. THE CHALLENGERS Typing New arch con fi guration Third party

    libraries @ReactAdvanced 21-oct-22 @kelset 17
  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
  19. NEW ARCH CONFIGURATION @ReactAdvanced 21-oct-22 @kelset 19 src: aka.ms/rn-nalib

  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
  21. NEW ARCH CONFIGURATION 🍎 🤖 !?! @ReactAdvanced 21-oct-22 @kelset 21

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

    8+1+7
  23. A new challenger appears #reactnative @ReactNativeMSFT @kelset

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

  25. REACT 18 ⚛ React React 18 Please check: aka.ms/react18 @ReactAdvanced

    21-oct-22 @kelset 25
  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
  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
  28. REACT 18 ⚛ Check: aka.ms/rn-react18 @ReactAdvanced 21-oct-22 @kelset 28 x2

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

    @kelset 29
  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
  31. AND THIS IS WHERE I'D PUT BENCHMARKS IF I HAD

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

  33. MICROSOFT ❤ REACT NATIVE @ReactAdvanced 21-oct-22 @kelset 33 Check: reactnative.dev/showcase

    (and many, many more...)
  34. @ReactAdvanced 21-oct-22 @kelset 34

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

  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
  37. WHY START NOW? The feedback loop @ReactAdvanced 21-oct-22 @kelset 37

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

    src: aka.ms/rn-newarch-wg
  39. FEEDBACK LOOP: BONUS ROUND! @ReactAdvanced 21-oct-22 @kelset 39 src: aka.ms/rn-improve-22

    Only until the 25th!
  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
  41. Try fast, fail fast, tell everyone and help each other!

    @ReactAdvanced 21-oct-22 @kelset 41 CONCLUDING
  42. @ReactAdvanced 21-oct-22 @kelset 42 @kelset kelset.dev 
 
 @ReactNativeMSFT THANK

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

    THANK YOU!