Fabric and Turbo Architecture:

Now, React Native is one of the most trending platforms to develop mobile applications. So, it is vital to learn about the architecture used by React-Native. Now, the latest rendering system used by react-native is Fabric architecture.

What is the Fabric architecture?

The fabric works to build again the react-native’s rendering layer. In the present correspondence, the sequence of cross-bridge steps handles all of the UI operations. The latest implementation lets the UI manager generate the shadow tree in C++ directly. This enhances the speed of the whole process by decreasing the amount of jumps across the realm. This will increase the responsiveness of the User interface a lot. You can say that that’s render optimization for the screen and it will greatly enhance the performance.

The fabric reveals the UI operations to JS by utilizing the JSI as functions such as the shadow tree (that figures out what to display on the screen) are shared with 2 realms that provide the interaction among both ends.

If this is not a great improvement, the direct control with JS lets you have priority queues by new React for UI operations, so that you will have a choice of synchronous executions as it is beneficial for performance there. The foundation will bring improvement in general pitfalls such as navigation, gesture handling, and lists.

Existing Architecture Structure:

In the existing architecture, there are four main sections. The four core sections are:

• React Code
• Java Script interprets what we write.
• The Bridge- A series of elements
• Native side

The main point of the existing architecture is the Java Scrip and Native, both two realms are not “aware” of each other. That’s why, for communication, they depend on asynchronous JSON messages that are transmitted by The Bridge. Thus, it is sent to the native code with the thought that it will somehow manage to get a response in the future.

New Architecture Structure:

1.      JSI:

The JSI will get the position of the bridge as in the existing architecture. The JS Runtime engine gets API by JSI. JS runtime engine is the place where JS code executes when someone runs it. The JSI lets JS aware of native functions and it also aware the object directly, without using The Bridge. It plays an essential role in synchronizing the calls by Native to the JS thread and vice versa. It works fast by utilizing the direct call to the UI Main Thread and also by transmitting the data among the threads.

2.      Fabric:

The fabric is basically a new name for UI Manager that will work in despite of the old native side. The major change is that it will show its native function by working with JSI. Instead of working in the old way as it used to communicate the JS side from Bridge, now it works differently. By utilizing the Fabric, they will communicate directly by ref functions. The performance will also improve drastically providing more efficiency and passing the data between the sides.

3.      Turbo Modules:

The working of Turbo modules will be quite the same as of native modules in existing architecture. However, it implements and acts in a bit different way as compared to old native modules. The turbo modules are lazy-loaded. They load when the app requires them and don’t load during the launch time. Moreover, It is exposed by JSI, so JS has a reference to utilize it on the React Native JS lib side which provides even better performance specifically on launch time.

4.      Code Gen:

Code Gen worked as creating the Java Script as the only source of truth. The Code Gen specifically assists in generating the static type of the Java Script so the fabric and turbo modules (native side) will be aware of this. Thus, it does not need to validate the data all the time and this decreases time consumption and provides efficient and better performance and minimal chance of issues while transmitting the data.

The flow of the new Architecture:

1. Click the app’s icon.
2. The Fabric will load the native side directly.
3. The Fabric will inform the JS thread, that it is ready, and it’s when the JS side loads all main.bundle.js containing the whole JS along with react logic+ components.
4. The JS interacts with the Fabric by a ref native function that displays by JSI API. This function will assist in generating a tree of shadow nodes in Fabric, as performed before.
5. Yoga does calculations to arrange the layout by conversion from flexbox based style to the layout of the host.
6. The Fabric performs its work and displays the UI.

Where can you use it?

React-Native screen with Fabric:

An implementation has been performed in the react-native screen in existing and new architecture both. To create the fabric app for the first time by react-native screens, follow the following steps:

1. To generate a new app by React Native CLI, enter : npx react-native init NewRN68App --version 0.68.0-rc.1
2. Then similarly add the react-native screen, you do regularly:  yarn add react-native-screens
3. After this, to enable the Fabric in iOS, in ios folder run: RCT_NEW_ARCH_ENABLED=1 pod install
4. To enable in Android, change the newArchEnabled=true in android/gradle.properties
5. After all this, you can work on further creating your app in both Android and iOS. Moreover, In the installed version of the screen, you can automatically detect if Fabric. It will also serve as an efficient implementation.

Conclusion:

To conclude this, New Architecture will take the React-Native to a higher level. It will also improve the user experience by making it smoother. The fabric-compatible version of the react-native screen is an advancement to use the latest react-native architecture. The article will deeply explain to you what huge alterations are coming by the community in the architecture.