Getting started with React Native: Core Architecture of React Native

React Native is a modern framework that allows JavaScript to run on and interact with iOS and Android phones in the same way as native code does. It provides opportunities for organizations that want to consolidate down their application architectures, and take a ‘write once deploy anywhere’ approach to application development for devices. But for starters, it’s really confusing so as to know how does react native really works and hence boils down to understand of these three architecture

1. Javascript Runtime Environment Architecture
2. Build Process Architecture
3. Debugging Architecture

Javascript Runtime Environment Architecture (Bridging)

To understand how react native works, we need to look into how javascript is actually executed in iOS/android devices. For javascript to run, react native uses a runtime environment called Javascript Core, which is just some code on top of operating system.

Fig: Core architecture of react native

In order for JavaScript to run a native app it must still use the underlying native code. From above diagram, We can see that each React Native control will interact with a native counterpart component. React Native simply allows the bridge for the two way communication to happen. So the native code is actually operating on it’s own thread, meaning that if our React Native JavaScript code is taking a long time the UI won’t hang or slow down. It simply calls back across the bridge using events.

Build Process Architecture\ While building react native application, react native does following two things:

• It will run a node web server locally which publishes a payload file that holds all of our React Native JavaScript code
• Then it will build a pure native application project (for IOS or Android) and deploy this to the phone. This project is configured to have the JavaScript runtime environment and then to download the previously generated payload
• This payload is then delivered directly ‘into’ the JavaScript runtime environment via the React Native build process. Now we have both the native container and JavaScript code which are required to power our entire React Native application.

Debugging Architecture For debugging process of react native application, we need to do two things:

• Set the location of the source code
• Open a browser that the debugger can publish debugging information
• Alternatively, we can just log data to console to understand build process or debug application.

React Native enables quick prototyping and a very high initial velocity. Basic features are relatively easy to implement. If needed, they can be extended with native code and native views, and also integrate well with other view controllers. Since react native uses javascript, developers can work faster and more efficiently as they don’t have to restart developed app after each update, they can simply refresh viewing page.

At Gurzu, Mobile applications is relatively a new direction for us, but we’ve already boasted few beautiful apps in our portfolio. We conceptualize, design and develop customized applications to deliver scalable and innovative applications. Mobile Applications such as Stride and Asscky are the recently built apps. We have used react native framework for building android and IOS mobile application and Ruby on Rails on the backend for handling APIs.

Want to learn more? Read about react native’s new architecture in this article.