ALL >> Technology,-Gadget-and-Science >> View Article
Deep Dive Into React Native’s New Architecture
![Profile Picture](https://www.123articleonline.com/upload/fimg8nqwqLA04M.png)
The React Native team has announced that the new architecture will be rolled out in 2022. Checkout 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 checkout this blog by Bianca Dragomir.
In a nutshell:
When you run a RN app, all you 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:
1) The JavaScript thread: used ...
... by the JS Engine, to run the JS Bundle
2) The Native/UI thread: used to run the Native Modules and to handle operations like UI Rendering, user gesture events etc.
3) 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 is 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 positions of UI elements for the user’s screen.
1. 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.
2. 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 element will be translated into ViewGroup in Android & UIView in iOS respectively)
Read Also:- https://www.expertappdevs.com/blog/iot-based-smart-mobile-parking-system
3. 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 a 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.
4. 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
Experienced chief executive officer @expertappdevs with a demonstrated history of working in the information technology and services industry.
Add Comment
Technology, Gadget and Science Articles
1. Wordpress Development Service: Build A Powerful And Scalable WebsiteAuthor: Mindpath
2. How To Import Google Contacts To Another Google Account? Efficiently
Author: Rohit Sharma
3. The Benefits Of Restaurant Management System
Author: sidharthh
4. How Ai In Returns Management Transforming Retail Businesses
Author: Warren
5. Unleash Your Gaming Vision: Why Hiring Unity 3d Game Developers Is Your Best Move
Author: yansiel
6. How Virtual Answering Services Have Added A New Dimension To Business Profits
Author: Julian Serle
7. Unlocking Business Potential Through Technology
Author: Digiprima Technologies
8. Custom Erp Software Development Company
Author: sidharthh
9. Know How Stellar Data Recovery Helps You Recover Lost Data
Author: Stellar India
10. The Crucial Role Of Rolling Shutter Parts In Modern Construction
Author: harsh sharma
11. Thermal Instrument's Helicoidal Thermowell: The Leading Solution For Accurate Temperature Monitoring
Author: Raman Joshi
12. Enhancing Mobile Application Security Through Cybersecurity Professional Services
Author: Stellanova GlobalTech
13. Android App Development Company: Building Scalable & Innovative Mobile Solutions
Author: Perfectiongeeks
14. Optimize Your Website Structure With An Internal Link Checker Tool
Author: EliteSiteOptimizer
15. Efficiently Build Your Website With Odoo: A Quick Guide
Author: Alex Forsyth