The New React Native Architecture Explained: Part Two

April 2, 2019

Part Two: JSI and JSC

First announced in 2018, the React Native re-architecture is a massive effort Facebook undertook to address some long-standing issues of this cross-platform mobile solution.

In this series we will give an overview of the main elements that comprise React Native’s new structure. We will avoid showing code, to keep this explanation as accessible as possible, and will share our excitement regarding this new implementation.

In this second post we will dive into how React Native consumes the code you write, and how the re-architecture changes it.

Because of the nature of JavaScript, the React Native team has to rely on an engine to interpret it so that it can run in a native mobile application. In the current architecture, the team chose to use JavaScriptCore (JSC) directly, as per Apple’s iOS guidelines rule “to use the appropriate WebKit framework and WebKit JavaScript” (JSC is the one used by WebKit).

To enhance this element, (second block of the current React Native architecture) they decided to properly separate the bundled and minified JavaScript produced from the written code, and the engine that would “digest it”. This was made possible by introducing a third element between the two, unequivocally called JavaScript Interface (JSI).

The JSI is not part of React Native per se—it is a unified, lightweight, general-purpose layer for (theoretically) any JavaScript engine. But, when inserted in the broader puzzle of the new architecture, it allows for a few truly important improvements.

The first one is fairly intuitive—potentially, the JSC could now be swapped out more easily for other engines (or newer versions of the JSC, as recently happened in RN 0.59). Other options you may know are ChakraCore by Microsoft and V8 by Google.

The second improvement—arguably the cornerstone of the whole re-architecture—is that “by using JSI, JavaScript can hold reference to C++ Host Objects and invoke methods on them.” This means that, finally, we are tackling the core issue explained in the previous article: the two realms of JavaScript and Native will be really aware of each other, and there won’t be any need to serialize to JSON the messages to pass across, removing all congestion on the bridge (we’ll explore this more in the next article).

This is a very exciting change because C++ has long been one of the few ways to share code between Android and iOS without relying on JavaScript; Android’s native code is written in C\C++ (Java and Kotlin gets “translated down” via a Java Native Interface) and similarly iOS supports it by default (Objective-C is none other than a strict superset of C).

So this re-architecture step of React Native both enables massive changes to the current structure and opens the door to write more C++ for your apps, also enabling easier brownfield approaches.

If we were to replace the second block of the architecture with its new counterpart (you can find the full graph in the first article), the change would look like this:

JavaScriptCore module & sub-modules

This concludes the second part of our exploration of the re-architecture. Over the next few weeks we’ll release more posts diving into the other blocks. In the meantime, remember to share this article with your fellow developers or reach out for follow-up questions over on Twitter (DMs are open).

As you can imagine, these changes open the door to many more improvements in the next block, and we hope they spark excitement regarding how they will impact your codebases, without requiring any rewrites.

All aboard the hype train!

Other installments:

Part 1 | Part 3 | Part 4

Related Posts

What the Hex?

October 24, 2022
If you’re a designer or frontend developer, chances are you’ve happened upon hex color codes (such as `#ff6d91`). Have you ever wondered what the hex you’re looking at when working with hex color codes? In this post we’re going to break down these hex color codes and how they relate to RGB colors.

Screen and Webcam Mixing and Recording with Web APIs

September 22, 2022
There are great native applications on the market for screen recording and editing. While tools like these include a whole host of powerful editing features, for short-form content that doesn’t require post-processing, they might be overkill. I wanted to explore how far browser technology has come in the way of screen sharing and recording, and attempt to create a tool that would allow me to quickly create short-form technical video content with a little bit of flare.

Theming a React Application with Vanilla Extract

December 1, 2021
In this blog post, we're going to look at theming a React application with Vanilla Extract, which solves a lot of our theming problems in a single CSS-in-JS library.