React-native architecture - [part one]

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.