Open In App

How does the Fabric architecture work in React Native ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we discuss Fabric React Native architecture. There is new architecture called Fabric proposed by the community to overcome the current architectural issues, which is going to be proved as a big enhancement to the React Native architecture. We discuss the current architecture and why fabric architecture was launched and what is fabric architecture.

Current React Native Architecture: Current React Native architecture is asynchronous and all of the things taking from rendering UI to the JavaScript optimizations are carried out asynchronously. If we look at any native app, all the operations are performed synchronously (UI, animations, and data manipulations) which makes the app very smooth.

The React native architecture is based on the thread. There are basically 3 threads that carry all the operations:

JavaScript Thread: JavaScript thread executes React and JavaScript code in our app. This thread carried out all DOM hierarchy operations that are straight from the code written by the developers. Once the hierarchy of code is executed, it is sent to the Shadow Thread for optimizations and further operations.

Shadow Thread: Shadow thread is an asynchronous thread that executes operations received from the JavaScript Thread. This thread is specifically designed for optimization. It performs deep enhancements on the hierarchy because redundant operations on user interactions are heavily avoided.

Main Thread: This is the main thread that executes synchronous operations. This is also called a UI thread because it is at the end of all of our component hierarchy. This thread carried out data from Shadow Thread.

Issues in Current Architecture?

As we know, JavaScript works asynchronously so interactions with React component’s UI are also handled asynchronously. Basically, the JavaScript thread handles the listening user events, scroll events, etc., and performs DOM manipulation accordingly and this entire process is asynchronous from the main thread and the UI. Then it is further sent to the Shadow thread (which is also asynchronous) for DOM and for optimization which is further sent to the main thread queue.

This means even for a small interaction execution, it has to execute all the threads which are compressed performance or especially frames that are dropped issues because the responses cannot be kept adjusted with the primary thread except if these are truly synchronized tasks.

This issue may look like a small problem but this small problem gives rise to a big problem e.g Enter the text interactions are stuttery, animation frames are dropped, the lists are rendered with delays, lagging during drag and drop inside the app, etc. So that’s why fabric architecture is proposed by the community.

Fabric architecture: Fabric is the new React Native architecture launched by the community to make the user experience of mobile applications better than native apps. This architecture also uses threads but inefficiently way. Just like Fiber architecture in ReactJS has improved the diffing and performance optimization, the same Fabric is also used to improve the performance and efficiency of the app.

Principles of Fabric architecture: These are three main principles of Fabric:

1. Prioritizing the Tasks: JavaScript treats all async events or activities as the same and all of the events/processes are treated equally in terms of resource allocation even if it has low priority or high priority. But in Fabric architecture, user interactions such as scrolling, touch, hold, gestures, etc have been highly prioritized and will be executed first synchronously in the main thread or native thread. While other tasks such as API requests will be executed as a low priority asynchronously.

2. Immutable Shadow Tree: It is very important to have consistent data or DOM hierarchy because any thread can request a change. To solve this, the shadow tree must be immutable. With this, it doesn’t matter where the changes are coming from as long as our tree is consistent with all other threads that it is being shared with. This is a very important concept that will ensure that no deadlock condition occurs independently of a synchronous or asynchronous request.

3. Reducing Memory Consumption In the current architecture there are two hierarchies/DOM nodes, the first is inside the Shadow thread and the second is the JavaScript thread. It takes a lot of memory, nearly twice of what it should be. So in the fabric architecture, there is a new concept introduced to keep a single copy of it in the memory while the other threads would only have a reference to it to perform any operations.

This works similarly to our web applications:

let domNode = document.getElementById(‘domNode’);

Where, document.getElementById(‘domNode’) returns the native object instead of a JavaScript Object and domNode only keeps a reference to this native object.

How does Fabric Architecture work?

In the Fabric architecture, as in current architecture, there are also three threads but designed in a way to make them as beneficial as possible. The main concept of Fabric architecture that is, tasks are divided into sync and async instead of only async. It allows us to perform the important UI operations first and in sync with the frame rate of the mobile screen. By using this way, there is no frame is dropped as the tasks are executed in sync with the user interactions.

Also as any thread can do the changes in the Shadow thread, the shadow thread would have to be made immutable to maintain consistency and avoid deadlocks.

The other important concept which is to reduce memory consumption is using references instead of two copies of the DOM nodes. This is extremely useful in having consistent and efficient DOM nodes.

Conclusion: React Native Fabric architecture is a next step forward concept. Fabric is based on three principles like prioritized the tasks into sync and async tasks, immutable shadow thread, and memory refinements.


Last Updated : 14 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads