Are you a person like me who keeps hearing the term "React Native Architecture" but never quite gets it? Are you a react native developer who never touched the /ios and /android folders unless some library requires you add some lines there? What are they talking about anyways, is it something like MVC or MVVM? Is it some new folder structure used to organize your code-base?
If you're like me and had these questions, I'd like to report that it is none of the above. In fact, you shouldn't worry about it unless you have an edge case and need to access native code to solve it, or you want to develop a react native library.
That being said, let's dive into what is the react native architecture.
The Problem (The Bridge)
React Native has traditionally operated on a bridge-based architecture, serving as the communication layer between the JavaScript code and native platform. This bridge is asynchronous, meaning that every call from JavaScript to native or vice versa must pass through this bridge asynchronously.
This setup, while effective for a wide range of applications, introduced performance bottlenecks, particularly in complex and high-performance apps. Operations requiring high-frequency interaction between JavaScript and the native side would incur a performance penalty due to the overhead of passing messages across the bridge.
This could lead to less smooth animations, delays in executing touch events, and overall less responsive UIs. The need for a more efficient way to handle these interactions prompted the exploration of a new architecture.
The Solution
The React Native team responded to these challenges with two key innovations: Fabric and TurboModules. Both are designed to improve React Native's performance and efficiency by reimagining the architecture's core.
Fabric: The New UI Layer
Fabric is a new UI layer that replaces the traditional bridge with a more direct connection between JavaScript and native views. It utilizes a concept known as JSI (JavaScript Interface), allowing JavaScript code to directly call native functions synchronously. This means there's no longer a need for the asynchronous bridge for every interaction, which drastically reduces the communication overhead, leading to smoother animations and a more responsive interface.
TurboModules: Efficient Native Module Loading
TurboModules also leverage JSI to provide a more efficient way to load and interact with native modules. Unlike the old architecture, where all modules were initialized at app startup, TurboModules adopts a lazy initialization approach. Modules are loaded only when they are needed, reducing startup time and memory usage. This approach not only speeds up the app's performance but also provides a more modular and efficient system for managing native code.