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
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!