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

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Technology

Transcript

  1. "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
  2. @kelset kelset.dev 👋 Lorenzo Sciandra (he/him) Senior Software Engineer @

    Microsoft 
 React Native core maintainer & releaser (since 2018) RN Wrocław @callstackio @kelset 3
  3. 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
  4. 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
  5. 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
  6. A WHOLE NEW WORLD ✨ 
 THE NEW ARCHITECTURE (🪡)

    RN Wrocław @callstackio @kelset 9
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. SO, WHAT NOW? 
 HOW DO WE START USING 🪡

    RN Wrocław @callstackio @kelset 19
  16. AN OVERVIEW OF THE PRACTICAL STEPS 👏 & team RN

    Wrocław @callstackio @kelset 21 src: aka.ms/rn-newarch
  17. 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
  18. THE CHALLENGERS • Typing • New arch con fi guration

    • Third party libraries RN Wrocław @callstackio @kelset 27
  19. 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
  20. NEW ARCH CONFIGURATION - #2 🍎 🤖 !?! FIXED IN

    0.70 RN Wrocław @callstackio @kelset 31
  21. 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
  22. 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
  23. Jokes aside, I left out quite a few more things

    RN Wrocław @callstackio @kelset 38
  24. 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
  25. AND THIS IS WHERE I'D PUT BENCHMARKS IF I HAD

    ANY RN Wrocław @callstackio @kelset 40
  26. 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
  27. 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
  28. Try fast, fail fast, tell everyone and help each other!

    RN Wrocław @callstackio @kelset 48 CONCLUDING