I have been working with react for over 3 years now and I realized that I didn't know how to explain how react/react-native worked in the middle of an interview. Now, I blame myself for this because my motto with things like these has always been: "preparation should not be the reason you fail at something". I am a self-though developer, so I didn't bother trying to learn the theoretical parts of technologies, but these parts are very important when you're interviewing for a job.

Imagine interviewing for a react-native role and you don't know how to explain the way react-native works. I personally think I wowed them in that interview except for this single fact, so I did some research(wasn't that hard, to be honest, there's a lot of content out there), this blog post is just me, trying to learn better by teaching someone else out there.

React

According to the react docs which are maintained by Facebook, React is a JavaScript library for building user interfaces. But how exactly does react do that? If you are new to web development, you probably shouldn't be learning about React right away, but if you're not, you should know about the Document Object Model (DOM). The DOM is a programming interface for HTML and XML documents, what this means is that an HTML web page, such as this one you're looking at can be represented as nodes and objects, this makes it easier for programming languages to be able to change the structure, style, and content the web page, by using object methods. The dom, however, has different methods from a regular object in JavaScript, you can read more about it here Introduction to the Dom - MDN docs.

React uses a concept called a Virtual DOM(which is similar to the real DOM) where an ideal representation of a User Interface(web or mobile) is kept in memory and is synchronized with the actual dom. A Virtual DOM object has similar properties to the real DOM object, but it cannot directly make changes to what's on the screen.

When a JSX element is rendered, every single node on the Virtual DOM gets updated, react then compares the updated Virtual DOM with a snapshot that was taken right before the update. By comparing this new Virtual DOM with the previous one, react figures out exactly which objects have changed and updates only those on the real DOM. This process is called DIFFING. This is the basic working principle behind react.

React-Native

React native is a library for building mobile interfaces. It was built using React, which by default has no opinion about what nodes are present in the Virtual DOM object. Instead, it uses DIFFING to figure out the changes to the web page (which provides its own node primitives). React Native on the other hand provides its own node primitives such as <View>, <Text>, <ImageBackground>, etc, which do not render HTML elements but maps to native views like UIView and UIImageView. React provides the diffing and rendering infrastructure that allows React native to work.

React-Native Execution Environment

React native, just like react, has an execution(runtime) environment.

There are three threads in the react-native execution environment,

• The Javascript thread.
• The Native/main thread.
• The Background thread(shadow tree)

When a react native app is launched(started). It starts a thread known as the main thread or user interface(UI) thread and assigns it to the app, the main thread spins up a JavaScript thread and a background thread(I'd refer to this as the shadow tree from here because it sounds cooler).

A bridge connects the JavaScript thread, main thread, and the shadow tree, so let's imagine the JavaScript thread and the native thread are the two sides of the bridge, while the shadow thread just exists in the background(shadows). The UI elements are written in JavaScript, the shadow tree calculates and processes those elements that are defined on the JavaScript side of the bridge, and then sends it over the bridge as a serialized JSON object, to the main thread.

Updates to the native views, using DIFFING are patched together and sent over the bridge to the native thread after each iteration of the JavaScript event loop(which involves diffing). In addition to passing properties, functions can also be passed to the main thread to be used as a callback, for example, if a button is pressed on the screen, the native event is sent over to the JavaScript side when the callback is executed. Because of the way react patches all the updates together and sends them over the bridge, there could be performance problems when running complex activities, like complex animations, so it's recommended to stay on the main thread as much as possible when handling animations.

New React Native Architecture

Facebook is currently working on a new JavaScript Interface(JSI) that enables JavaScript to communicate with native code (JavaScript core for ios and Hermes for android) and vice versa by sitting between the JavaScript code and the JavaScript engine on native devices. Currently, react-native runs on the JavaScript core which is present on IOS, and Hermes(an open-source, lightweight JavaScript engine for android). The benefit of using the JSI is that the JavaScript side and the native side can now talk to each other without having to serialize JSON objects to send over the bridge to talk to the other side.

The new shadow tree would be written in C++ and shared across both sides. Currently, the communication between the JavaScript side and the native side happens asynchronously, having the new shadow tree would enable the communication to be synchronous which would eliminate a lot of performance issues. This works because JavaScript would be able to have a reference to the C++ object and invoke methods on it.

Read about the new javascript Interface HERE