React Native - JavaScript Interface(JSI)


React Native JSI is a lightweight API that embeds a JavaScript engine in a C++ application. React Native Fabric uses it to communicate between its C++ core and React.

Why JSI?

JSI acts as a bridge between Javascript and Native(Objective-C/Java) code. It even removes the requirement of serializing or deserializing information as JSON which is required for communication between the native side and JavaScript.

Following are some points which would help us understand the JavaScript Interface methods:

  • JSI allows methods, available via global object in javascript, to be registered with Javascript runtime.
  • The methods can be used to communicate with native codes i.e. Java code in Android and Objective-C in iOS.
  • Any native module built with a bridge communicating between Javascript and native can be moulded into a JSI module with a superficial layer in C++.
  • On iOS, writing this layer is super easy as C++ code can directly run in Objective-C hence the code can be used directly. While in Android, this execution requires a Java Native Interface.

Differences in variable definitions in JavaScript and JSI:

Number definition:

// Javascript
const integer = 32
// JSI (C++)
jsi::Value integer = jsi::Value(32)

As seen in the above example, we have to create an instance of the Value class in the jsi namespace.

String definition:

// Javascript
const string = “String”
// JSI (C++)
jsi::Value string = jsi::String::createFromUtf8(runtime,”String”)

Here, string variables are created using the createFromUtf8 method of the String class in the  jsi namespace.

How is JSI better than Bridge?

  • JSI creates a well-functioning structure when compared to Bridge as it provides both faster and direct access to the JS runtime.
  • JSI functions are direct, synchronous, and have the fastest invocation method, unlike Bridge where JavaScript and the native side communication happens asynchronously and messages are processed as batches.

Conclusion:


Thus it shows the performance of native modules and applications using native modules improves when the bridges are replaced with JSI methods.

However, since JSI only changes the infrastructure, it won’t affect regular React native applications. While for library maintainers, migrating libraries to JSI could prove useful.

Mohit Charkha

Mohit Charkha

Mobile Application Developer at PLG works
Pune, India