Table of Contents
- Where is the JavaScript?
- Understanding React Native Architecture
React Native App Development Part 1: A Beginners Guide to React Native Architecture
Let’s take a look at one screen from an app that is purely React Native and ask ourselves what is the UI that we see here.
Is this an HTML? Is this a webview like other implementations like PhoneGap or Cordova?
The answer is, without a doubt, No. The views in React Native are purely native views so from our app the navigation controller that you see here the top bar is UINavigationController. Now, if you are an iOS developer you would these are the same UI views that you use in your native apps.
If I had shown you the same screen on Android, you would see that the implementation is completely different. It renders to the native views. If the UI is completely native with React Native, where is the JavaScript?
Where is the JavaScript?
JavaScript is what running under the hood. Where you as a developer specify the business logic and which components you want and then the framework renders it for you. To understand this better, let’s dive into React Native a little deeper and see the architecture from the inside.
Understanding React Native Architecture
Consider there are two realms running side by side in your app. You have the JavaScript realm and you have the native realm.
JavaScript Realm
The JavaScript realm is where you program in JavaScript, naturally. The code there is running on a JavaScript engine. Specifically in React Native it uses jscore, that is the open source JavaScript engine for WebKit. You are probably familiar with other engines like V8. They do the same things and this engine is running inside your app on one of the threads. Your app is a process that has several threads in it. JavaScript is just one of them.
Native Realm
In the native Realm, you still develop an objective C and Swift if you are on iOS or with Java if you are on Android. You use the native platform specific languages that you use before and you have the main UI thread as usual. In all platforms, you can usually change UI only from the main UI thread and you can create as many background threads as you want.
The Bridge
These two realms are different and connecting these two realms is the bridge. The React Native is a very important construct in this entire setup. Did you ever try to debug a React Native application using Chrome for example, so when you debug a React Native application using Chrome, then you have the two realms actually running on different computers. You can run the JavaScript role entirely inside Chrome itself.
You can debug it inside Chrome debugger and you have the native realm still running on your phone. Then instead of going inside your app, you would go through a WebSocket. The bridge, which is just a communication protocol, can travel over WebSocket as well.
Tags