Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will learn about the React Native Internal architecture. This article will discuss React Native internal work flow.
A famous quote about learning is :
” Try to learn something about everything and everything about something. “
So, Let’s Start.
Overview
” React Native is a framework which allows developers to build native apps using javascript.”
So What about Cordova Platform and why would anyone want to use React Native?
The Primary difference between React Native and Cordova based app is that
- Cordova based apps run inside a Web View.
- React Native apps renders using Native View.
React Native Application have direct access to all the native APIs and views offered by the underlying mobile OS. React Native Applications have the same feel and performance as that of a native application.
We can assume that React native might be compiling JS code into respective native code directly. But this would be really hard to achieve since Java and Objective C are strongly typed languages while Javascript is not!
React Native does something much more clever.Essentially React Native uses a set of React components, where each component represents the corresponding native views and components.
For example, a native TextInput will have a corresponding React Native component which can be directly imported into the JS code and used like any other React component. Hence, the developer will be writing the code just like for any other React Web app but the output will be a native application.
To understand this, let us take a look at the architecture and Threading model and how React Native works internally.
Architecture
React Native uses similar architecture for iOS and Android platform. There are three parts to React Native Platform :
1. Native Code/Modules
Most of the native code in case of iOS is written in Objective C or Swift, while in the case of Android it is written in Java. But for writing our React Native app, we would hardly ever need to write native code for iOS or Android.
2. JavaScript VM
- The JS Virtual Machine that runs all our JavaScript code. On iOS/Android simulators and devices React Native uses JavaScriptCore, which is the JavaScript engine that powers Safari. JavaScriptCore is an open source JavaScript engine originally built for WebKit.
- In case of iOS, React Native uses the JavaScriptCore provided by the iOS platform. It was first introduced in iOS 7 along with OS X Mavericks.
- In case of Android, React Native bundles the JavaScriptCore along with the application. This increases the app size. Hence the Hello World application of RN would take around 3 to 4 megabytes for Android.
- In case of Chrome debugging mode, the JavaScript code runs within Chrome itself (instead of the JavaScriptCore on the device) and communicates with native code via WebSocket. Here, it will use the V8 engine. This allows us to see a lot of information on the Chrome debugging tools like network requests, console logs, etc.
3. React Native Bridge
React Native bridge is a C++/Java bridge which is responsible for communication between the native and Javascript thread. A custom protocol is used for message passing.
Threading Models
When a React Native application is launched, it spawns up the following threading queues:
1. Main Thread (Native Queue)
- Main thread gets spawned when application launches. It loads the app and starts the JS thread to execute the JavaScript code.
- The Native thread also listens to the UI events like ‘press’, ‘touch’ etc. These events are then passed to the JS thread via RN Bridge.
- Once the Javascript loads, the JS thread sends the information on what needs to be rendered onto the screen.This information is used by a shadow node thread to compute the layout.
- The Shadow thread is basically like mathematical engine which finally decides on how to compute the view positions.
- These instructions are then passed back to the main thread to render the view.
2. JavaScript Thread (JS Queue)
- The Javascript Queue is the thread queue where main bundled JS thread runs.
- The JS thread runs all the business logic, i.e., the code we write in React Native.
3. Custom Native Modules
- Apart from the threads spawned by React Native, we can also spawn threads on the custom native modules to build to speed up the performance of the application.
- For Example – Animations are handled in React Native by a separate native thread to offload the work from the JS thread.
That’s all about in this article.
Conclusion
In this article, We understood about React Native Internal Work Flow. We conclude that React Native work flow based on the threading models and process involved between different threads. We can separate React Native into three Parts :
- React Native-Native Side
- React Native -JS Side
- React Native – Bridge
This is also called “3 Parts of React Native”.
Thanks for reading ! I hope you enjoyed and learned about Internal architecture,Threading Models and Process involved in React Native . Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
