React Native 

new Architecture 2024

Hello Developers,

Today, we're diving into the new architecture of React Native. But before we do, let's take a glance at the old architecture.

Please take a moment to look at the old architecture below.👇

Let's create native user interface and native elements. You really cannot have access to the directly.

To address this problem we will ensure that there is a way to communicate between two world. In the React Native world we will call it the React Native Bridge.

Relied on a JavaScript thread, a native thread, and a Bridge for communication.

This Bridge is a simple mechanism to pass messages from JavaScript world to the native world and back.

The other big gap in this system is that, on the web if you ask about layouts the answer is going to be Flex box, but the Platform UI(Android/iOS) doesn't really understand flex box.

Platform UI(Android/iOS)  has its own layout system, bcoz we cannot really use Flex box , we implement our own version of flex box in a library called Yoga.

Yoga: Yoga is a cross-platform layout engine that implements Flex box, a CSS standard for development. Yoga ensure that user interface elements are consistent across different device and platforms.

React Native has three main threads:

1.) Main UI Thread: This is the place where all of your scrolling, view rendering, initialising the app , touch events happens.

2.) Layout/ Shadow Thread: where most of the layout happens. It calculates the perfect positions for UI elements on the user's screen.

3.) Javascript Thread/ Background Thread : This is the place where all of your react business logic, all of your javascript code executes.

Why There Was a Need for a New React Native Architecture?

• It is asynchronous: one layer submits data to a bridge and waits for the data to be processed by the other layer, even when it’s unnecessary.
• It is single-threaded: JavaScript used to be single-threaded, so computation that takes place has to be performed on that single thread.
• Overhead costs: each time one layer communicates with another, it must serialise the data. The other layer must deserialize it. JSON was chosen for its simplicity and human readability, despite being a lightweight format it has a cost associated with it.

Suppose you have a really really long list with a really really large numbers of items and you are trying to scroll really fast you can. you might end up in the situation where you see white patches before the actual rendering happens.

The reason why this happens is because when you have an on scroll the onScroll event sent to the javascript thread. Now the javascript thread is not synchronous so you would basically respond back in an asynchronous manner to the shadow thread where the layout happens and then the next response happens to the main thread and by the time entire jump & hop happens the scroll is completed. The scroll needs to be synchronous as soon as you scroll you need to know what happens on the main thread with the current architecture of react native you may not be able to do that. 

This is a problem.😧

New interface that's a way for communicating between Javascript & native , we call it JSI(Java script interface).

Now we will see how new architecture solves this problem.

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++.

Another big advantage of JSI is that it is written in C++. With the power of C++ React Native can target large numbers of Systems like Smart TVs, Watches etc.

Replaces the Bridge with the JavaScript Interface (JSI) for improved communication.

What is Fabric?

According to the official ReactNative documentation,

“Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system”

The JavaScript Interface will directly expose native methods to JavaScript, which also includes UI methods. As a result of this, the JS and UI thread can be in sync. This will improve performance for lists, navigation, gesture handling etc.

What are the benefits of Fabric?

With the new rendering system, user interactions such as scrolling, gestures etc can be prioritized to be executed synchronously in the main thread or native thread. While other tasks such as API requests will be executed asynchronously.

That’s not all. The new Shadow Tree will be immutable, and it will be shared between the JS and UI threads, for allowing straight interaction from both ends.

Turbo Modules

In the current architecture, all the Native Modules used by JavaScript (e.g. Bluetooth, Geo Location, File Storage etc) have to be initialized before the app is opened. This means, even if the user doesn’t require a particular module, it still has to be initialized at start-up.

Turbo Modules are basically an enhancement over these old Native modules.  now JavaScript will be able to hold reference to these modules, which will allow JS Code to load each module only when it is required. This will significantly improve start-up time for ReactNative apps.

CodeGen

All this talk of Turbo Modules and Fabric sounds promising, but JavaScript is a Dynamically typed language, and JSI is written in C++, which is a Statically Typed Language. Consequently, there is a need to ensure smooth communication between the two.

That’s why the new architecture will also include a static type checker called CodeGen.

By using the typed JavaScript as the source of truth CodeGen will define interface elements used by Turbo Modules and Fabric. It will also generate more native code at build time, instead of run time.