$30 off During Our Annual Pro Sale. View Details »

The new architecture is here… what now? 2.0

Lorenzo S.
September 28, 2022

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

Lorenzo S.

September 28, 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 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!