Deep dive into React Native’s New Architecture

The React Native team has announced that the new architecture will be rolled out in 2022. Check out their full blog here.

“2022 is going to be the year of the New Architecture in open source”

Since the release is just around the corner, this is a good time to understand what changes are taking place under the hood and how they might affect your React Native App.

This article aims to cover the most important changes bought by the re-architecture:

JavaScript Interface(JSI)
Fabric
Turbo Modules
CodeGen

Current Architecture

Before we get to the new architecture, let’s recap how the current one works.

Please note that I am only covering points that are relevant to understanding this blog, If you want to learn more about the current architecture, you can check out this blog by Bianca Dragomir.
In a nutshell:

When you run an RN app, all your JavaScript code is bundled together into a package called the JS Bundle. The Native Code is kept separately.

The Execution of React Native apps happens over three threads:

The JavaScript thread: used by the JS Engine, to run the JS Bundle
The Native/UI thread: used to run the Native Modules and to handle operations like UI Rendering, user gesture events etc.
Additionally there is a 3rd thread called the shadow thread, which is used to calculate the Layout of Elements before rendering them on the host screen

The Communication between the JS and Native Threads has carried over an entity called the bridge. When sending data through the bridge it has to be batched(optimized) and serialized as JSON. This bridge can only handle asynchronous communication.

JavaScriptCore: It is the name of a JavaScript Engine, which is used by React Native to execute JS code.
Yoga: It is the name of a Layout engine, which is used to calculate the positions of UI elements for the user’s screen.

JavaScript Interface (JSI)

In the current architecture, React Native uses the Bridge Module to make communication possible between the JS and Native threads. Every time data is sent across the bridge, it has to be serialized as JSON. When the data is received on the other side it must be decoded as well.

This means that the JavaScript and Native worlds are unaware of each other (ie. the JS thread cannot directly call a method on the Native thread)

Another important point to note is; messages send over the bridge are asynchronous in nature, which is a good thing for most use cases, but there are certain instances when JS code and native code needs to be in sync.

Fabric

Fabric is the rendering system, which will replace the current UI Manager.

In order to understand the advantages of Fabric, first let’s look at how UI is currently rendered in React Native:

When your app is run, React executes your code and creates a ReactElementTree in JavaScript. Based on this tree, the Renderer creates a ReactShadowTree in C++.

This shadow Tree is used by the Layout Engine to calculate positions of UI elements for the host screen. Once the results of Layout calculation are available, the shadow tree is transformed into HostViewTree, which comprises of Native Elements. (For example: The ReactNative View element will be translated into ViewGroup in Android & UIView in iOS respectively)

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. As we have seen in the previous part of this article, 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 React Native 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.

Reference https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd