Exploring Fabric: The New Architecture for React Native

Introduction

Fabric is the new architecture for React Native, announced in August 2019 and developed to address performance bottlenecks and limitations in the original architecture. With this new update, React Native has undergone a complete UI layer rewrite that improves performance and allows for more seamless interoperability between synchronous and asynchronous tasks. Here's a deep dive into what Fabric brings to the table and how it enhances the React Native experience.

Key Components of the New Architecture

1. Fabric Renderer

   • Purpose: The new rendering layer in React Native replaces the older bridge-based rendering architecture. It leverages JSI (JavaScript Interface) to communicate directly with the JavaScript runtime, bypassing the need for message serialization.
   • Benefits: Fabric allows direct interaction between JavaScript and native code, which results in faster and more efficient UI updates. This change eliminates the need for JSON serialization in communication, enabling smoother animations and interactions.

2. JSI (JavaScript Interface)

   • Purpose: JSI serves as a lightweight API layer that enables JavaScript to directly call synchronous functions in C++ and access JavaScript objects from C++.
   • Benefits: JSI eliminates the traditional bridge, which relied on asynchronous message passing. It allows native modules to be initialized lazily and called synchronously from JavaScript.

3. TurboModules

   • Purpose: TurboModules provide a new way to structure native modules in React Native, leveraging JSI for high-performance and synchronous interaction between JavaScript and native code.
   • Benefits: With TurboModules, modules are loaded on-demand instead of at startup, which improves startup speed. This also allows more efficient communication between JavaScript and native code without relying on the bridge.

4. CodeGen

   • Purpose: CodeGen is a tool that automatically generates bindings between JavaScript and native code, ensuring type safety and reducing boilerplate code for developers.
   • Benefits: CodeGen simplifies the process of maintaining the interface between JavaScript and native code, streamlining development and reducing errors.

Impact and Advantages of the New Architecture

• Performance Improvements: By minimizing the reliance on the bridge, Fabric significantly reduces latency and overhead, leading to smoother UI updates and animations.
• Synchronous and Asynchronous Execution: Fabric supports both synchronous and asynchronous execution, which is essential for accessing native capabilities like layout calculation directly from JavaScript.
• Improved Startup Time: Lazy initialization of native modules and more efficient communication improve app startup times.
• Enhanced Reliability: With CodeGen ensuring type safety and consistency, Fabric enhances platform stability and reduces bugs.
• Future-proof: The new architecture facilitates adopting upcoming changes in the JavaScript ecosystem, keeping React Native a modern and robust solution for cross-platform development.

Fabric and the new architecture represent a significant step forward for React Native, offering improved performance and a robust foundation for building native applications using JavaScript. This update is essential for developers aiming to create complex, high-performance applications that fully utilize the capabilities of the underlying platforms.