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
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
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
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
5. TAKING A 🦶 BACK 
 THE OLD ARCHITECTURE (📄) RN Wrocław @callstackio @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 Wrocław @callstackio @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 Wrocław @callstackio @kelset 7
8. RN Wrocław @callstackio @kelset 8
9. A WHOLE NEW WORLD ✨ 
 THE NEW ARCHITECTURE (🪡) RN Wrocław @callstackio @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 Wrocław @callstackio @kelset 10
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
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
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 Wrocław @callstackio @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 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
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
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
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
18. RN Wrocław @callstackio @kelset 18
19. SO, WHAT NOW? 
 HOW DO WE START USING 🪡 RN Wrocław @callstackio @kelset 19
20. AN OVERVIEW OF THE PRACTICAL STEPS RN Wrocław @callstackio @kelset 20 src: aka.ms/rn-newarch
21. AN OVERVIEW OF THE PRACTICAL STEPS 👏 & team RN Wrocław @callstackio @kelset 21 src: aka.ms/rn-newarch
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
23. FOR LIBRARIES RN Wrocław @callstackio @kelset 23
24. FOR APPS RN Wrocław @callstackio @kelset 24
25. “What could go wrong?” RN Wrocław @callstackio @kelset 25
26. RN Wrocław @callstackio @kelset 26
27. THE CHALLENGERS • Typing • New arch con fi guration • Third party libraries RN Wrocław @callstackio @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 Wrocław @callstackio @kelset 28
29. NEW ARCH CONFIGURATION RN Wrocław @callstackio @kelset 29 src: aka.ms/rn-nalib
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
31. NEW ARCH CONFIGURATION - #2 🍎 🤖 !?! FIXED IN 0.70 RN Wrocław @callstackio @kelset 31
32. THIRD PARTY LIBRARIES 4+1 RN Wrocław @callstackio @kelset 32 src: https://reactnative.directory/
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 Wrocław @callstackio @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 Wrocław @callstackio @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 Wrocław @callstackio @kelset 37
38. Jokes aside, I left out quite a few more things RN Wrocław @callstackio @kelset 38
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
40. AND THIS IS WHERE I'D PUT BENCHMARKS IF I HAD ANY RN Wrocław @callstackio @kelset 40
41. PLANNING FOR IT 💭 RN Wrocław @callstackio @kelset 41
42. RN Wrocław @callstackio @kelset 42
43. “AN IDEA OF A” PLAN RN Wrocław @callstackio @kelset 43
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
45. WHY START NOW? The feedback loop RN Wrocław @callstackio @kelset 45
46. WHY START NOW? The feedback loop RN Wrocław @callstackio @kelset 46 src: aka.ms/rn-newarch-wg
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
48. Try fast, fail fast, tell everyone and help each other! RN Wrocław @callstackio @kelset 48 CONCLUDING
49. @kelset kelset.dev RN Wrocław @callstackio @kelset 49 THANK YOU!