How does the Fabric architecture work in React Native ?
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.
The React native architecture is based on the thread. There are basically 3 threads that carry all the operations:
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?
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:
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.
This works similarly to our web applications:
let domNode = document.getElementById(‘domNode’);
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.