React Native's new architecture - Glossary of terms

As the React Native team is working on the new architecture, there have been a few terms used to describe the various pieces. This post aims to clarify some of the terms and points to places in the repository with relevant code. 

The Bridge

In the current architecture of React Native, the communication between JavaScript and Java/ObjC  happens over "the bridge".
  • This bridge is a queue to send messages encoded as JSON strings between JavaScript and Java/ObjC. During every tick, we dequeue messages from the front of the queue and process them. This way of messaging is fundamentally asynchronous.
  • The bridge also exposes an interface for Java/ObjC to schedule JavaScript execution, typically used for callbacks from Native Modules.
  • The bridge is also tied to the lifecycle of React Native. Starting or stopping React Native usually means that the bridge is initialized or torn down. 
To explore the bridge in more concrete terms, we can install a MessageSpy to look at the exact bytes that are sent back and forth. Also note that while the  bridge is async, we can use @ReactMethod(isBlockingSynchronousMethod = true)for one-off synchronous method calls.
While this asynchronous communication is great in most cases, there are certain use cases where we would prefer JavaScript to draw views on the screen synchronously; a problem that the new architecture aims to solve.

JavaScript Interface (JSI)

Instead of using the bridge for queuing messages, the new architecture allows us to directly "invoke" (think RPC) Java/ObjC methods.
An analogy would be how we call DOM methods from JavaScript in the browser. For example, in the statement var el = document.createElement('div'); the variable el holds a reference not to a JavaScript object, but to an object that was possibly instantiated in C++. When JavaScript calls el.setAttribute('width', 100), we end up synchronously invoking the setWidth method in C++ that changes the actual width of that element.
In React Native, we can similarly use the JavaScript interface to invoke methods on UI Views and Native Modules that are implemented in Java/ObjC.
The snippet below shows a simple usage of JSI and how we could expose Java/ObjC objects to JS.



Most of the code for JSI resides in the jsi folder in React Native and is written in C++.

Fabric

Fabric was the first part of the re-architecture that was announced. While it only deals with the user interface of the new architecture, it is sometimes wrongly used to refer to the entire re-architecture work.
In the current architecture, all UI operations (like creating native views, managing children, etc). are handled by a native module called UIManagerModule. The React Reconciller sends UI commands over the bridge, which are eventually handled by this module and delegated to UIImplementation. This in turn creates shadow nodes that represent the layout tree and are passed to Yoga to determine the relative co-ordinates based on the Flex box styles that are passed in from JS.
In the new system, the UI operations are directly exposed to JavaScript as functions using the JSI interface described above. The new UI manager can then create ComponentDescriptors and the Shadow Nodes for specific view types (like Text, View or Images), and then communicate with Java/ObjC to draw platform specific UI.

TurboModules

The JSI system can also be used to call leverage device capabilities like bluetooth or other sensors by exposing functions that JS can call. This is similar to how browsers expose functions like navigator.geolocation.getCurrentPosition that, when invoked in JavaScript, trigger the respective C++ call in the browser.
In the current system, a table with information about module names and methods is created. When JS calls a specific native module, the indices of the module and methods are passed to Java/ObjC, which then invoke the specific methods. The arguments and return values are also converted between JavaScript and JNI/ObjC objects.
In the new system,
  1. We expose a JSI object  a top level "Native Module Proxy", called global.__turboModuleProxy
  2. To access a native module, say SampleTurboModule, application code will then call in require('NativeSampleTurboModule')
  3. Inside NativeSampleTurboModule.js, we call TurboModuleRegistry.getEnforcing() which then calls the global.__turboModuleProxy("SampleTurboModule")
  4. Calling global.__turboModuleProxy function triggers the JSI function that we exposed in Step 1. This is where the platform divergence happens.
  5. We invoke a getModule function that is defined for Java and ObjC. This function takes in a string, and returns a JSI object for the specific TurboModule.
  6. To get a TurboModule JSI object, we first get the Java/ObjC implementation and then create JSI object from it. 
Now that we have a JSI object for "SampleTurboModule", can invoke methods on this JSI object from JavaScript. During the calls, we also need to convert JSI Values to JNI for argument parameters, and the reverse when sending back results.
Like in the current architecture, most types including boolean, strings, Maps, Arrays, Callbacks and Promises are supported.


CodeGen

In both TurboModule and Fabric, interface available to JavaScript could be defined using Flow (or TypeScript). We can further leverage this interface definition to generate many of the C++ classes, and the interfaces/protocols for Java/ObjC implementations. For example, in case of TurboModules, the C++ class that wraps the Java/ObjC class and exposes the methods using a JSI object can be generated.
This will ensure that all JavaScript calls have implementations available on the native side, and will continue to ensure this with over the air updates like code push.

Conclusion

In terms of backward compatibility, most of the JavaScript application code does not have to change as a result of the new architecture. The Java/ObjC code written for custom View Managers or Native Modules will have to change, but many of them can be code-modded to use the new system. A compatibility layer can also be written that will let custom View Managers and Native Modules to continue working in the new system.
In terms of timelines, most of the JSI code has already landed in the repository at the time of writing this post. A lot of the Fabric code is also in the repository, and updates to TurboModules continue to roll out. Since this is a mostly backward compatible, there does not have to be a single date of release, but more of a gradual rollout. You can follow the React Native repository, and the issues about Fabric and TurboModules for updates.

Using React Native's Plugins with Flutter (Android version)

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase. Like most cross-platform mobile application development frameworks, platform specific APIs and device capabilities are exposed to the developer environments using plugins.
React Native, another framework to build mobile apps using JavaScript and React, also has a similar concept, called Native Modules.

Native SDKs for Hybrid Frameworks

React Native has been around for a while and in addition to the numerous packages created by the community, companies also expose their services (think Square, AWS, OneSignal, MapBox, UrbanAirShip) to React Native apps using native modules. However, many services are only available as iOS and Android SDKs; developers building on the newer hybrid frameworks usually are left to create their own adapters.
I ran into this problem a few years ago when I was porting my Cordova app to the still new React Native framework. While all the Cordova plugins in my app were well supported first-party or community modules, none of them had existed for React Native back then. Instead of re-implementing every module, I explored the idea of creating an adapter to use Cordova Modules in a React Native application.
The share of Android and iOS apps are still significantly higher and creating an adapter for every hybrid framework like Cordova, Xamarin, NativeScript, React Native and Flutter may be too much work. Having been a Cordova committer, worked in a team adjacent to Xamarin, studied NativeScript and now contributing to React Native, I believe that the patterns for invoking native modules in all these hybrid frameworks may be similar enough to be able to create a "universal" system. By simply defining a "cross-platform" API and using a system of adapters, SDKs may be able to support all hybrid frameworks well.

React Native to Flutter

The promise of write-once-run-everywhere has historically been perilous, and it may would help to take smaller baby steps. As a start, I tried the approach to use native modules from React Native in my Flutter app; a port that was surprisingly simple.
Plugins can be bootstrapped using Flutter's CLI that generates both the dart file and the corresponding Java code. The onMethodCall function in Java has an if-else condition that is responsible for executing the right method that the application code in dart invokes.
In React Native, methods exposed to JavaScript are annotated with @ReactMethod. When the native modules is "required" in JavaScript, the methods on the module are discovered using reflection. We can use the same method to use React Native modules in Flutter. 

For the demo, we use the ToastModule that is also used as an example in the React Native documentation. We lazily create a map of string method names to the actual implementation and invoke it when dart calls the method.
 The only challenge is that most of the native modules refer to other React Native bridge classes, many of which we would have to import or stub out. In this case, we simply had to stub out most of the classes.
Additionally, in production, we would not discover the methods at runtime, but would instead generate the onMethodCall if-else at compile time to call the appropriate React Native methods.

The Universal Modules System


While the above method is not perfect, it does get existing React Native modules to work with Flutter. Ideally, we would not need the reflection and instead just have a "universal" interface that can generate plugins for Flutter, React Native and other hybrid systems.
Service SDKs could simply define something like a Typescript file containing the individual method, their arguments and return types that map to the iOS and Android SDKs and the entire plugin code could be generated. Note that TurboModules will use this code generation approach, with the source of truth for the API being in JavaScript. This method would also eliminate the React Native specific code present in all the dependencies.

As I was working on this, Stanisław Chmiela pointed out the work that Expo has been doing in this area. The video does talk of a "Swagger like" API definition for the interfaces. It works with React Native, with an unreleased implementation for Flutter. Extending it to Cordova or NativeScript should not be very hard either.

Though this is still pretty early, I believe that this idea of a universal module system does hold promise and could help ensure that native modules in all the hybrid frameworks are well maintained, and get the same amount of attention that native iOS or Android SDKs get.

React Native Performance Playbook - Part I

Getting Ready - Setting Up Instrumentation


Over the last six months, I have been working on improving the performance of React Native. I specifically focussed on the startup time in Android brownfield apps and we were able to reduce the time by half. Even as we wait for the new UI architecture (Fabric) and synchronous native modules (TurboModules) to rein in significant performance wins, there are many low hanging fruits that could be leveraged today to improve performance

In this series of blog posts, I wanted to outline some of the work we did and how they could apply to your mobile apps.

Background

When working on performance, it is easier to focus on a well defined scenario, and then apply the lessons in a broader context. Android startup time in React Native apps is a common source of pain and makes for a good candidate for this blog post. To define it more specifically
  • The scenario starts with the onCreate of the application.Though there is a is non-trivial amount of work done from when the user clicks the icon to the onCreate, it is not React Native specific. General Android optimizations will help.
  • The scenario ends when the application loads and the user can interact with it. This metric, also called Time-To-Interaction (TTI), is app specific and needs to be defined in the application code, as explained later. 
Before we jump into optimizing code, we will need to setup instrumentation to understand the application startup time better. This will help us identify the areas that warrant a deeper dive and will validate any code changes that we make later.
We will look at collecting data from production as it better represents the behavior of the app in the real world. We can always augment this with local profiling tools that are available to React Native apps.on local builds.

From React Native

React Native already has markers indicating the various steps during the startup process. By adding listeners to the events from ReactMarker, we can report back all the information that the framework gives us during startup.
  1. Copy the contents of the file PerfLogger.java to your app's <app_root>/android/app/src/main/java/com/nparashuram/PerfLogger.java. This file adds a listener to ReactMarker, and stores the performance events with Thread IDs and time stamps.
  2. In your application's MainApplication.java, look for the onCreate method, and initialize the PerfLogger just after the super.onCreate(); line using this - new PerfLogger(getReactNativeHost()).initialize();

 

Defining end of TTI

Now that we have started collecting the performance markers, we also need to define when to stop recording. For this blog post, we defined the "end of startup" to be when content is rendered on the screen and the user can interact with it.
This is usually application specific. Some applications would immediately render content while others may have to show a loading screen, perform a network request and then display the response. In either case, you can distill "loading-complete" down to the appearance of a specific React component on the screen.
Add a prop nativeID="tti_complete" to that element. For example, if we are displaying a feed, the last View on the feed could be <View nativeID="tti_complete">.
The PerfLogger java code waits for the native UI element with the nativeID to be drawn, and then makes all performance data available to your JavaScript code.

The JavaScript code

On the JavaScript side, include perf.js in your application code. When PerfLogger.java sees that TTI is complete, it populates a global JS variable with all the data, which can then be sent to a server.
A significant portion of startup also includes the execution of JS code. You could use the ComponentLogger defined in perf.js to mark the start and stop of mounting components. We would typically start with large sections on the UI, and add wrap more components as we want to get more fine grained data. Since this is also pure JS code, you could experiment with various combinations and iterate fast using over the air updates like code push.
 This component simply wraps your component and stores timestamps for them.
The perf.js file also converts this data to a format that can be loaded in chrome://tracing and sends it to a server after a timeout. In the real world, the data should be sent in the same way any other analytics information is sent.

Analyzing the data

Once we start getting data from production, we can start looking at data from individual traces. Note that using averages here may not help since averages of the ranges do not add up. Instead, we could pick a trace that represents a certain percentile. For example, if our goal is to make our app load in under 1 second for the 75th percentile, we could pick the trace representing P75.
The tracing file can be loaded in chrome://tracing to drill deeper into individual sections. For this post, I looked at the MatterMost app, and here is how a sample trace may look.



Since we also collect thread information, we can see the four threads on which React Native runs. To differentiate React Native code from application logic, I just made that a separate Process 0 at the very top. Note how we record both the loading screen, and the actual content that is rendered, before marking TTI complete.

Next Steps

In the next part of this series, we will look at how we can use this data to start optimizing sections. I would like to base the post on real data, so if you were able to collect this information, Contact me @nparashuram I would love to analyze it and talk about the parts we should optimize.