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

Bringing the New React Native Architecture to the OSS community

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. View Slide

  2. Bringing the New


    React Native Architecture


    to the OSS community
    Nicola Corti


    he/him


    @cortinico

    View Slide

  3. he/him


    Android @ React Native


    twitter.com/cortinico


    github.com/cortinico


    ncorti.com
    Nicola Corti

    View Slide

  4. React Native New Architecture

    View Slide

  5. 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

    View Slide

  6. 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

    View Slide

  7. View Slide

  8. 2018 Q2 2019

    View Slide

  9. 2018 Q2 2019 2020 2021

    View Slide

  10. 2020 2021 2022 2023

    View Slide

  11. Why

    View Slide

  12. Why
    Why

    View Slide

  13. Why
    • The Bridge


    • Shared C++ Implementation


    • Sharing of platform-specific

    optimizations


    • Type Safety


    • New Capabilites

    View Slide

  14. Pillars
    Fabric TurboModule
    Codegen Bridgless

    View Slide

  15. Codegen

    View Slide

  16. Codegen
    import type {TurboModule} from 'react-native';

    import {TurboModuleRegistry} from 'react-native';

    View Slide

  17. Codegen
    import type {TurboModule} from 'react-native';

    import {TurboModuleRegistry} from 'react-native';

    export interface Spec extends TurboModule {

    answerTheUltimateQuestion(input: string): number;

    }

    View Slide

  18. 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('NativeAnswerSolver');

    View Slide

  19. 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('Na

    View Slide

  20. 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('Na

    View Slide

  21. Codegen

    View Slide

  22. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule

    implements ReactModuleWithSpec, TurboModule {

    }

    View Slide

  23. Codegen
    public abstract class NativeAnswerSolverSpec extends ReactContextBaseJavaModule

    implements ReactModuleWithSpec, TurboModule {



    public NativeAnswerSolverSpec(ReactApplicationContext reactContext) {

    super(reactContext);

    }

    }

    View Slide

  24. 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);

    }

    View Slide

  25. 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);

    }

    View Slide

  26. Codegen

    View Slide

  27. Codegen
    @protocol NativeAnswerSolverSpec

    - (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

    View Slide

  28. Codegen
    @protocol NativeAnswerSolverSpec

    - (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

    View Slide

  29. Build Tools
    • C++ - CMake files


    • Java/Kt - React Native Gradle Plugin


    • To replace react.gradle in the future
    • Custom logic in Ruby
    Gradle
    ocoaPods

    View Slide

  30. 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

    View Slide

  31. 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

    View Slide

  32. Timeline &


    Versions

    View Slide

  33. 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…)

    View Slide

  34. 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

    View Slide

  35. 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

    View Slide

  36. 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

    View Slide

  37. 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

    View Slide

  38. 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

    View Slide

  39. Docs &


    Material

    View Slide

  40. It’s all about Docs…

    View Slide

  41. It’s all about Docs…

    View Slide

  42. Official Docs

    View Slide

  43. Official Docs

    View Slide

  44. Official Docs

    View Slide

  45. Deep Dives

    View Slide

  46. Deep Dives

    View Slide

  47. New App Template
    $ npx react-native init MyAwesomeApp

    View Slide

  48. New App Template
    $ pod install

    View Slide

  49. New App Template
    $ RCT_NEW_ARCH_ENABLED=1 pod install

    View Slide

  50. New App Template
    $ RCT_NEW_ARCH_ENABLED=1 pod install
    $ npx react-native run-ios

    View Slide

  51. 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

    View Slide

  52. 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

    View Slide

  53. New App Template

    View Slide

  54. New App Template

    View Slide

  55. New Architecture Working Group

    View Slide

  56. New Architecture Working Group

    View Slide

  57. New Architecture Working Group

    View Slide

  58. App


    Sample


    Repo

    View Slide

  59. App


    Sample


    Repo

    View Slide

  60. App


    Sample


    Repo

    View Slide

  61. Library


    Sample


    Repo

    View Slide

  62. 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

    View Slide

  63. React Native New Architecture

    View Slide

  64. 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/

    View Slide

  65. Tell us your


    migration story

    View Slide

  66. Nicola Corti


    @cortinico
    Thank You & Contribs are Welcome

    View Slide