WhoBuilt

New Architecture of React Native

Mar 12, 2021· 12 min· 2.7K views·Watch on YouTube

Speakers

Callstack hosts a React Native EU 2020 Q&A panel with React Native team member Ram, Monica, and other panelists discussing React Native’s new architecture and its rollout.

What the rollout looks like

Ram says there is no single release date for the new architecture. Facebook was initially aiming for 2020, but COVID affected productivity, and 2021 was only a possibility. Internally, Fabric and TurboModules were being tested, with early rollout underway; stability and avoiding crashes were priorities.

What is available to try

Ram says Fabric and TurboModules are in the open source repository, but the build scripts depend on Facebook’s Buck system. An iOS community contribution had wired the systems into Xcode, while Android still needed Gradle work. Codegen could be tried, but Ram did not recommend it for production because it was not officially supported.

Where to follow progress

Ram points to React Native’s Discussions and Proposals repository, where people can submit proposals, critique them, and share implementation updates. Monica recommends the React Native and React Native Community repositories, particularly the community releases section, along with changelogs and release notes.

What panelists value in the architecture

The host favors TurboModules for type safety between native code and JavaScript, lower call overhead, and faster app startup. Ram highlights JSI as the foundation for the architecture and a way to expose native APIs to JavaScript. Other panelists favor Fabric for synchronous UI work, smoother interactions with image-heavy collections, and better support for third-party platforms.

Takeaways

  • Treat the architecture rollout as gradual; plan for incremental adoption rather than a single switch date.
  • Test experimental architecture components outside production until they are officially supported.
  • Follow the Discussions and Proposals repository and community release updates for implementation progress.
  • TurboModules may help apps with many native integrations through type safety and lower call overhead.
  • Fabric’s shared cross-platform core may make custom platform maintenance easier.

Mentioned in this talk

Search inside this talk

What was claimed 11

  • integrates with
    JSI integrates with Hermes Agent
    “makes Hermes integration very easy”
    YouTube
    Unverified1 source· Talk
  • feature
    JSI: Provides a unified, lightweight, general-purpose API for JavaScript virtual machines
    “a unified, lightweight, general-purpose API for any JavaScript virtual machine”
    YouTube
    Unverified1 source· Talk
  • feature
    code generation: Synchronizes type definitions and method declarations between native and JavaScript
    “synchronizing type definitions and method declarations between native and JavaScript”
    YouTube
    Unverified1 source· Talk
  • feature
    React Native: TurboModules modernize native modules for better performance and synchronous access
    “a new implementation of native modules for better performance and synchronous access”
    YouTube
    Unverified1 source· Talk
  • feature
    Fabric: UI re-architecture designed to take advantage of the new architecture and concurrent React
    “the UI re-architecture to take full advantage of these features and the concurrent React architecture”
    YouTube
    Unverified1 source· Talk
  • uses
    “the Oculus companion app that I work on is starting to roll out TurboModules”
    YouTube
    Unverified1 source· Talk
  • uses
    Meta uses Buck
    “Facebook internally uses Buck”
    YouTube
    Unverified1 source· Talk
  • feature
    Discussions and Proposals: Public repository for submitting proposals, critique, discussion, and implementation
    “anyone in the world can submit a proposal, critique it”
    YouTube
    Unverified1 source· Talk
  • feature
    TurboModules: Reduces overhead when JavaScript calls native methods and can speed application startup
    “overhead reduction TurboModules introduce when calling methods from the JavaScript side”
    YouTube
    Unverified1 source· Talk
  • feature
    Fabric: Enables synchronous UI work and supports cross-platform core development
    “the ability to do synchronous UI work”
    YouTube
    Unverified1 source· Talk
  • feature
    React Native: Fabric’s cross-platform core can benefit new platforms and make new methods possible
    “with Fabric, most of the core is also cross-platform”
    YouTube
    Unverified1 source· Talk

Related talks