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

Bringing the New React Native Architecture to t...

Bringing the New React Native Architecture to the OSS community

At the end of 2021, we successfully rolled out the New React Native Architecture in the Facebook app.

Now, it’s time to empower every React Native developer on the globe to use the New React Native Architecture, both the new Fabric renderer and the new TurboModule system.

But migrating an entire ecosystem to a New Architecture is no easy task.

To support the whole community in this endeavor, we lined up a set of tools and materials that will help both app and library developers to join us in this journey.

In the talk, we will present how the New React Native Architecture looks in the OSS space. We will discuss the impact this will have on developing React Native projects. Lastly, we will cover what we learned from the React Native New Architecture migration at Meta, and how you can tackle your migration in your organization.

Nicola Corti

January 01, 2023
Tweet

More Decks by Nicola Corti

Other Decks in Technology

Transcript

  1. Parashuram N - React Native's New Architecture React Conf 2018

    53K views 3 years ago Joshua Gross - The New React Native: 
 Bringing the Fabric renderer to the “Facebook” app RNEU 2021 15K views 2 years ago 2.5K views 6 months ago Emily Janzer - The New React Native RNEU 2019 React Native New Architecture
  2. Parashuram N - React Native's New Architecture React Conf 2018

    53K views 3 years ago Joshua Gross - The New React Native: 
 Bringing the Fabric renderer to the “Facebook” app RNEU 2021 15K views 2 years ago 2.5K views 6 months ago Emily Janzer - The New React Native RNEU 2019 React Native New Architecture
  3. Why

  4. Why • The Bridge • Shared C++ Implementation • Sharing

    of platform-specific 
 optimizations • Type Safety • New Capabilites
  5. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native';

    export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; }
  6. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native';

    export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('NativeAnswerSolver');
  7. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native';

    export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('Na
  8. Codegen import type {TurboModule} from 'react-native'; import {TurboModuleRegistry} from 'react-native';

    export interface Spec extends TurboModule { answerTheUltimateQuestion(input: string): number; } export default TurboModuleRegistry.getEnforcing<Spec>('Na
  9. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule

    { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } }
  10. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule implements ReactModuleWithSpec, TurboModule

    { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod(isBlockingSynchronousMethod = true) @DoNotStrip public abstract double answerTheUltimateQuestion(String input); }
  11. Codegen public abstract class NativeAnswerSolverSpec extends ReactContextBaseJav implements ReactModuleWithSpec, TurboModule

    { public NativeAnswerSolverSpec(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod(isBlockingSynchronousMethod = true) @DoNotStrip public abstract double answerTheUltimateQuestion(String input); }
  12. Codegen @protocol NativeAnswerSolverSpec <RCTBridgeModule, RCTTurboModule> - (NSNumber *)answerTheUltimateQuestion:(NSString *)input; @end

    namespace facebook { namespace react { /** * ObjC ++ class for module 'NativeAnswerSolver' */ class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule { public: NativeAnswerSolverSpecJSI(const ObjCTurboModule :: InitParams &params); }; } // namespace react } // namespace facebook
  13. Codegen @protocol NativeAnswerSolverSpec <RCTBridgeModule, RCTTurboModule> - (NSNumber *)answerTheUltimateQuestion:(NSString *)input; @end

    namespace facebook { namespace react { /** * ObjC ++ class for module 'NativeAnswerSolver' */ class JSI_EXPORT NativeAnswerSolverSpecJSI : public ObjCTurboModule { public: NativeAnswerSolverSpecJSI(const ObjCTurboModule :: InitParams &params); }; } // namespace react } // namespace facebook
  14. Build Tools • C++ - CMake files • Java/Kt -

    React Native Gradle Plugin • To replace react.gradle in the future • Custom logic in Ruby Gradle ocoaPods
  15. Hermes • Currently recommended 
 for the New Architecture •

    0.69 to consume a Bundled Version of Hermes • 0.70 to have Hermes as the default engine
  16. Modern Languages • Now supported by the Codegen • Currently

    fully supported in RN • react-native-website#3018 • Expect Template to be updated in the future • We’re looking into it Typescript Swift Kotlin
  17. Timeline 68 69 70 71 • New Architecture Support •

    React 18 Support • Bundled Hermes • Hermes as default • Android NewArch Autolinking • CMake Support • Unified Codegen Config • To the infinity… 72 • Simplified Templates • (More to come…)
  18. React 18 & React Native React Native .67 React Native

    .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
  19. React 18 & React Native React Native .67 React Native

    .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
  20. React 18 & React Native React Native .67 React Native

    .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
  21. React 18 & React Native React Native .67 React Native

    .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
  22. React 18 & React Native React Native .67 React Native

    .68 React Native .69/.70 
 Old Arch React Native .69/.70 
 New Arch React 17 React 18 
 w/ Concurrent React React 18 w/o Concurrent React
  23. New App Template # android/gradle.properties # Use this property to

    enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=false
  24. New App Template $ npx react-native run-android # android/gradle.properties #

    Use this property to enable support to the new architecture. # This will allow you to use TurboModules and the Fabric render in # your application. You should enable this flag either if you want # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=true
  25. Library Spotlight react-native-slider: Migrated react-native-reanimated: Migrated 
 In the process

    of testing and profiling for performances react-native-template-new-architecture: Migrated. 
 Gradually adopting/testing more fellow Libraries react-native-template-typescript: Migrated react-native-webview: Started react-native-navigation: Ongoing react-native-pager-view: Ongoing react-native-screens: Migrated react-native-gesture-handler: Migrated
  26. React Native New Architecture Migrating your whole React Native App

    to the New Architecture 5 mins read https:// blog.awesomecompany.com/ Lessons Learned from using Fabric and TurboModules in production 7 mins read https:// blog.anotherwesomecompany.com/ How we approached the New Architecture at YAC 5 mins read https:// blog.yetanothercompay.com/