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
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
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
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
5. TAKING A 🦶 BACK 
 THE OLD ARCHITECTURE (📄) RN London 28-sep-22 @kelset 5
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
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
8. RN London 28-sep-22 @kelset 8
9. A WHOLE NEW WORLD ✨ 
 THE NEW ARCHITECTURE (🪡) RN London 28-sep-22 @kelset 9
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
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
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
13. WHO NEEDS A BRIDGE ANYWAY? • Third phase of re-architecture AKA Initialization AKA Venice AKA Bridgeless AKA <insert ne 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
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
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
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
17. RN London 28-sep-22 @kelset 17
18. SO, WHAT NOW? 
 HOW DO WE START USING 🪡 RN London 28-sep-22 @kelset 18
19. AN OVERVIEW OF THE PRACTICAL STEPS RN London 28-sep-22 @kelset 19 src: aka.ms/rn-newarch
20. AN OVERVIEW OF THE PRACTICAL STEPS RN London 28-sep-22 @kelset 20 src: aka.ms/rn-newarch 👏 & team
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
22. FOR LIBRARIES RN London 28-sep-22 @kelset 22
23. FOR APPS RN London 28-sep-22 @kelset 23 ...back when 0.67 -> 0.70
24. FOR APPS RN London 28-sep-22 @kelset 24 0.67 -> 0.71+
25. “What could go wrong?” RN London 28-sep-22 @kelset 25
26. RN London 28-sep-22 @kelset 26
27. THE CHALLENGERS • Typing • New arch con fi guration • Third party libraries RN London 28-sep-22 @kelset 27
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
29. NEW ARCH CONFIGURATION RN London 28-sep-22 @kelset 29 src: aka.ms/rn-nalib
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
31. NEW ARCH CONFIGURATION - #2 🍎 🤖 !?! RN London 28-sep-22 @kelset 31
32. THIRD PARTY LIBRARIES 6+1 RN London 28-sep-22 @kelset 32 src: https://reactnative.directory/ 6+1+6
33. A new challenger appears #reactnative @ReactNativeMSFT @kelset
34. A new challenger appears #reactnative @ReactNativeMSFT @kelset
35. REACT 18 ⚛ React React 18 Please check: aka.ms/react18 RN London 28-sep-22 @kelset 35
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
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
38. REACT 18 ⚛ X2 Check: aka.ms/rn-react18 RN London 28-sep-22 @kelset 38
39. Jokes aside, I left out quite a few more things RN London 28-sep-22 @kelset 39
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
41. AND THIS IS WHERE I'D PUT BENCHMARKS IF I HAD ANY RN London 28-sep-22 @kelset 41
42. PLANNING FOR IT 💭 RN London 28-sep-22 @kelset 42
43. RN London 28-sep-22 @kelset 43
44. “AN IDEA OF A” PLAN RN London 28-sep-22 @kelset 44
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
46. WHY START NOW? The feedback loop RN London 28-sep-22 @kelset 46
47. WHY START NOW? The feedback loop RN London 28-sep-22 @kelset 47 src: aka.ms/rn-newarch-wg
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
49. Try fast, fail fast, tell everyone and help each other! RN London 28-sep-22 @kelset 49 CONCLUDING
50. @kelset kelset.dev 
 
 @ReactNativeMSFT RN London 28-sep-22 @kelset 50 THANK YOU!