Connect With Us

Getting started with React Native: Core Architecture of React Native

By Aman Maharjan on Dec, 15, 2017

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.

2_image.png

Diagram: 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 jyaasa, 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 campus brainiac 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.

For more information, click given link to watch presentation given by our mobile software engineer Aman Maharjan on title ‘Architecture of React Native’: video of architecture of react native
 

 

Share This:

Latest Posts


Integrating Afterpay Payment in a Rails Project By Umesh P Kafle on Sep, 07, 2018

Switching to React Native from Ruby on Rails By Kamal Pandey on Aug, 29, 2018

Jyaasa in IT Career Fair 2018 By Sonika Thapa on Jun, 12, 2018

Encrypted secrets in Ruby on Rails By Rasna Shakya on Apr, 20, 2018

Rails Payment Integration with zipPay (Buy Now and Pay Later) By Nelson Suwal on Mar, 23, 2018