Overview
- The React Native team has announced that the new architecture will be rolled out in 2022.
- This piece (of writing) aims to understand the most important updates brought by the new architecture.
Current Architecture
Before we get to the new architecture, let’s recap how the current architecture works.
The current execution of react native apps happens over three threads:
- JS Bundle: Responsible for executions of JS Bundle by using JS Engine.
- Native UI: Responsible for running the native modules to handle functions like UI rendering and user events etc.
- Shadow: Responsible for calculating all the positions and layouts for an element and transforming it into the native element.
Presently the communication between JS Bundle and Native Threads is persisted with an object called a bridge. When delivering data through the bridge it has to be optimized as JSON. This bridge can only handle asynchronous transmissions.
JavaScript Interface (JSI)
The beauty of this interface is that it is written in C++. It has decoupled this JSI from the existing JAVASCRIPT code engine which is working in react native.
- Currently, render requests or any data is sent over React Native bridge which is using JSON for communication with data.
- If we want to send a huge amount of JSON data between the native and Javascript realm we run into bottleneck problems due to the long processing time of huge JSON data.
- By using JSI we will be able to directly call native functions without passing huge amounts of data, also with JavaScript and Native realme data sharing, we will not even copy any data from two worlds. This will help us solve the JSON processing time problem.
- Even though JSI will be used mostly by library developers, the app developers will benefit from the JSI when we need it.
- JavaScript will reduce the need to serialize JSON and it will resolve congestion issues.
- With the power of C++, React Native can target a big number of systems like smart Watches, TVs, etc.
Fabric
Fabric is React Native’s new rendering system, conceptual evolution of the legacy render system. React Native world is taking a new approach to how to render UI elements.
Currently, React Native rendering happens in the below order in general:-
- React -> React Shadow Tree -> Bridge -> Native UI
When Fabric is released rendering order will be like the below in general:-
- React -> Native -> Shadow Tree (C++) -> Native UI
What are the benefits of Fabric?
- Fabric will move the Shadow Tree mechanism which helps renderers to render the only changed sections of our app to the native realm by using C++. To be able to do that fabric will benefit from the concurrent rendering mechanism of React 17 and above.
- With the support of multi-priority and synchronous events, the renderer can prioritize certain user interactions to ensure they are handled in a timely manner.
- With the support of multi-priority and synchronous events.
- Easier to implement server-side rendering for React Native.
- Consistency of the new render system is cross-platform, it is easier to keep consistency among different platforms.
Turbo Modules
Turbo Modules are basically an enhancement over these old Native modules.
At the runtime of the application, the Turbo Models open a bridge that will later allow the JS code to initialize any module at its first use, The modules thus created will have the same structure as any other module. Turbo Modules enable us to load and initialize native modules only when they are needed.
Summary
If we combine all the updates, the new architecture will look like this.
Here the key highlights are:
- Ability to swap the JavaScriptCore with other Engines.
- The bridge will be replaced with JSI.
- Time-sensitive tasks can be executed synchronously.
- Lazy loading of turbo modules.
This new structure will give React Native some powerful improvements.
Happy Coding..!!!
You may also like
A Simple Guide to Get started with Graph Database – Neo4J
Neo4J is an open-source NoSQL natively graph database which ...
Introduction to MobX with React Native
MobX is a simple, scalable, boilerplate-free state management solution. It allows you to manage appl...
A Billion-Dollar Math Problem: Reversal of SHA-256
A Mathematical problem that resulted in billions of dollars to solve. Check about its purpose, usage...
