Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is the Current React Native Architecture?
3.
The New React Native Architecture
3.1.
Javascript Interface (JSI)
3.2.
Fabric
3.3.
Turbo Modules
3.4.
CodeGen
4.
Frequently Asked Questions
4.1.
What is a general-purpose interface?
4.2.
How does JSI allow Javascript to directly interact with the Native module?
4.3.
What are the key changes in React Native's new architecture?
5.
Conclusion
Last Updated: Mar 27, 2024
Medium

React Native New Architecture

Author Lucifer go
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

The react native team declared that it would be releasing its new react-native architecture in 2022. Some of the significant changes in the new architecture include Fabric, turbo modules, CodeGen, and, most importantly, JavaScript Interface (JSI).

Click on the following link to read further: Hooks in React JS

What is the Current React Native Architecture?

When we create a new react native application and run it, the javascript code is packed together in a JS Bundle Package, and the native code is kept separately. 

The JS code is executed with the help of Javascript Engines like JavaScript Core. In the current architecture, React Native apps are run over three threads.

  • The JavaScript thread runs the JS bundle with the help of the JS engine.
  • The Native/UI thread that is used to run the native modules and to handle UI rendering, user gesture events, etc.
  • The Shadow thread decides the layout of elements in the UI before rendering. It works along with Layout engines like Yoga, which is used to calculate UI elements' positions.

This communication between the JS and Native Threads is carried in the form of batches of serialized JSON packages. These packages travel over an entity called the Bridge which can handle only asynchronous communication.

 

 

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

The New React Native Architecture

The new react-native architecture includes many changes, some of which are listed below: -

Javascript Interface (JSI)

As we saw in the previous section, the current React Native architecture uses Bridge to make communication between the JS and Native threads in the form of JSON packages. 

The JavaScript and Native threads cannot communicate with each other directly and cannot call any function directly on each other. Therefore, when this package is received, it needs to be decoded on the other hand. Moreover, this data sent over the Bridge is asynchronous, but sometimes the JS and the native codes are needed to be in sync.

In the new react-native architecture, the Javascript engine can communicate directly with the native functions with the help of the Javascript Interface (instead of the Bridge), a general-purpose layer written in C++.

Fabric

The Fabric is the rendering system to replace the current User Interface manager. In the present system, when a react application is run, react executes the code to create a react element tree in javascript. The renderer then creates a react shadow tree from the react element tree in C++.

The shadow tree thus created is used by the layout engine for calculating the position of UI elements on the screen. Once the UI element's positioning is calculated, the shadow tree is transformed into a HostView Tree comprising native features.

But this results in a slower transfer rate and unnecessary data being transferred. And since the JS and UI threads are async, there can be some issues of lags and drop in frames (like when scrolling through huge amounts of data in a Flat list).

 

 

Here's where Fabric comes in, which is the new rendering system of React Native. The fabric rendering system can prioritize user interactions such as scrolling and gestures to execute them in sync. Other tasks like API requests would be asynchronous.

The new shadow tree thus created would be immutable and shared between both the threads for direct interaction. This further will allow a reduction in memory usage by the system.

Turbo Modules

In the current architecture, the native modules used by JavaScript (like Bluetooth, file storage, etc.) have to be initialized before the app starts. So, there is an extra loading time associated with these turbo modules, even if we do not need some of them.

Turbo modules allow the JavaScript to reference these modules, thus allowing the JS code to load each module when required. This will improve the start time for the React Native Apps.

CodeGen

Javascript is a dynamically typed language, and JSI is a Statically typed language written in C++. To ensure smooth communication between the two, a new static type checker is included called CodeGen. CodeGen can define interface elements used by Turbo Modules and Fabric by using the typed JavaScript. This results in more code being generated at build time instead of run time.

Frequently Asked Questions

What is a general-purpose interface?

The current architecture uses the JavaScriptCore Engine, the only compatible engine with the bridge. However, for JSI, the JavaScript Interface will be decoupled from the Engine, and it will allow the use of other JavaScript Engines like Chakra, Hermes, etc. Hence we call it the general-purpose interface.

How does JSI allow Javascript to directly interact with the Native module?

This is done via C++ host objects. The Javascript holds the reference to these objects and can invoke these objects and methods directly via these references. Javascript code holds a reference to any DOM elements and calls the methods on it. The JSI, unlike the bridge, will allow the JavaScript code to hold a reference to the Native Modules. JavaScript can directly invoke methods on this reference using the JSI. This removes the need to serialize JSON messages and can fix traffic and asynchronous issues on the bridge.

What are the key changes in React Native's new architecture?

The key changes can be summarized as follows:-

  • JSI will take the place of Bridge for data transfer.
  • Other engines than JavaScript Core can be used.
  • Both the JavaScript and the Native threads can communicate with each other directly.
  • Synchronized execution of time-sensitive tasks.
  • Turbo Modules can be loaded when needed.
  • Rendering like the web.
  • Static Type Checking for making the JS and Native side compatible.

Conclusion

This article extensively discussed React Native New Architecture, its implementation, and its advantages over Old React Native Architecture.

Recommended Reading: Instruction Format in Computer Architecture

We hope that this blog has helped you enhance your knowledge regarding React Native Profiling. You can also consider our React Js Course to give your career an edge over others. If you would like to learn more, check out our articles on Code studio. Do upvote our blog to help other ninjas grow.

“Happy Coding!”

Previous article
Using Hermes for React Native
Next article
Why Choose React Native for Mobile App Development?
Live masterclass