Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The new architecture is here… what now?

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

74f1e72fd4d260d8192ee1a9a02ecb87?s=128

Lorenzo S.

July 14, 2022
Tweet

More Decks by Lorenzo S.

Other Decks in Technology

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!