React-native new Architecture, what to expect ?

Salem_Raouf — Sat, 12 Mar 2022 22:05:04 +0000

react-native team has announce that 2022 will be the new architecture release
2022 is going to be the year of the New Architecture in open source.
but why a new architecture? to understand why to take a look at the current react-native architecture
let’s recap the current architecture components
Bridge: handle the communication between JavaScript thread and native/UI thread
JavaScriptCore: engine in android to run JavaScript code in your android and it bundled with your app
Yoga: layout engine takes all flex-box based styles and converts them to native layout width, height, spacing.

Welcome to the new react-native architecture

react native new architecture

as we can see the bridge will be replaced with a module called JSI (JavaScript Interface)

so what is JSI (JavaScript interface) ?

A lightweight API to embed a JavaScript engine in a C++ application. Fabric uses it to communicate between Fabric’s C++ core and React.

since the JSI is written with C++ that allows JS to invoke the native methods directly which means Less serialization of data between JS and Native/UI thread, with the power of C++ react-native, will expand new systems like smartwatches, TVs.
In another case bridge is only compatible with the JavaScriptCore engine which is not like the JSI, the JSI enables the use of other JavaScript Engines like Chakra, v8, Hermes, etc. that will reduce the app size in android.

Turbo Modules

at the start-up, The current architecture need to initialize all native modules (e.g. File Storage, Bluetooth ..etc) even if they are not used that making the user stuck in the splash screen for a while, slow load time
So what’s turbo module does is hold only the references for those native modules which mean to call them only when they are required, which will improve the start-up time

CodeGen

CodeGen will be the type checker, JSI as we discuses above the JSI is written with C++, C++ is a Statically Typed Language, and the react-native apps written with JavaScript which is a Dynamically typed language, so CodeGen will ensure the communication between them
NB: the difference between Statically Typed Language and Dynamically typed language is that in statically typed programming languages, type checking occurs at compile time Conversely, in dynamically typed languages, type checking takes place at runtime or execution time

Fabric

another big enhancement in the new architecture is Fabric
Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system.
we will discuss Fabric in the next article .

React-native architecture - [part one]

Salem_Raouf — Fri, 18 Feb 2022 17:52:09 +0000

What's react-native ?

React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS.

React-native spark :

Inside Facebook, Jordan Walke found a way to generate UI elements for iOS from a background JavaScript thread, which became the basis for the React web framework. They decided to organize an internal Hackathon to perfect this prototype to be able to build native apps with this technology.

React-native Born :

In 2015, after months of development, Facebook released the first version for the React JavaScript Configuration. During a technical talk, Christopher Chedeau explained that Facebook was already using React Native in production for their Group App and their Ads Manager App.

React-native Architecture :

1 - JS bundler thread :

as we type
react-native ios-android or react-native run-ios
the packager takes all your JS code and puts it into a single file: main.bundle.js.

Wait here, what's the packager?
The official react-native packager is Metro
Metro is a JavaScript bundler. It takes in an entry file and various options and gives you back a single JavaScript file that includes all your code and its dependencies.

the device will look for the native entry point in react native source code android or ios directory then starts the JavaScript virtual machine in a thread, In this thread, our main.bundle.js will run.
Wait here, But How to run JavaScript virtual machine on a Mobile?
here we have a JavaScriptCore library that allow to run the JavaScript code on IOS devices, In android this framework is not provided by the OS, so its bundled with the app that' make the app size a bit larger

2 - Native UI thread

The native thread or (Main thread) this is the main application thread on which your Android or iOS app is running and it is responsible for native interactions and events like Scroll. The communication between the native UI thread and the JavaScript thread pass throw the bridge

The Bridge

The bridge is responsible for data transmission in form of a JSON file between the native UI thread and JS bundle UI, the data is serialized and deserialized in the bridge to complete its way, this operation made react-native slower in time manner and performance

3 - Shadow thread :

under the hood, the shadow tree uses to create UI tree and
uses the Yoga layout engine to take all the current flexbox based styles and convert it to native layout width, height, spacing

Conclusion

React native is a great piece of tech that allows JavaScript developers to expand their abilities in the native environment, but it is still a little bit slower compared to some hybrid cross platforms like a flutter. for that reason, react-native needs a re-architecture.

DEV Community: Salem_Raouf