JSI (JavaScript Interface) & JSC (JavaScript Core) Discussion

[kelset]

What's the current status of JSI? Read here

Intro

With this issue I'd like to try and create a "one stop" for all the information available around the JavaScript Interface, the unified lightweight general purpose API for (theoretically) any JavaScript virtual machine.

Currently, the default Javascript Virtual Machine used by React Native is JavaScriptCore (JSC) - it is used in WebKit.

Terminology

• Fabric: just the UI layer re-architecture, to take full advantage of concurrent React architecture. (dedicated issue)
• TurboModules: re-architecture of NativeModules, also using JSI. (dedicated issue)
• CodeGen: a tool to "automate" the compatibility between JS and native side. (dedicated issue)

TL;DR

From @axe-fb's blogpost, here's a temporary description of the JSI (please consider that this is not yet finalized, it may change in the future)

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.

Available Materials

At ReactConf 2018 @axe-fb did a talk about React Native's New Architecture, which also explains the 3 concepts above: JSI, Fabric, TurboModule.

Recently the JSC was upgraded for Android, you can check the commit here and the related issue in the main repo.

On twitter, @karanjthakkar did a thread detailing how he integrated the new JSC in the Skyscanner app.

In Q1 2019, @kelset wrote a high level explanation in a blogpost: https://formidable.com/blog/2019/jsi-jsc-part-2/ and did a talk about the whole rearchitecture in April 2019 at React Edinburgh.

Over on twitter, @ericlewis published a sample repo with @chrfalch to showcase how to use directly C++ in a RN app (thanks to the JSI): https://github.com/ericlewis/react-native-hostobject-demo

@kelset also did a more in-depth talk at React Advanced London in Oct 2019: youtube recording & slides.

@Jarred-Sumner published a quick benchmark difference between a lib and a reimplementation using JSI twitter.

Libraries implemented using JSI

• https://github.com/mrousavy/react-native-vision-camera
• https://github.com/mrousavy/react-native-mmkv
• https://github.com/mrousavy/react-native-multithreading
• https://github.com/software-mansion/react-native-reanimated
• https://github.com/BabylonJS/BabylonReactNative
• https://github.com/craftzdog/react-native-quick-base64
• https://github.com/craftzdog/react-native-quick-md5
• https://github.com/greentriangle/react-native-leveldb
• https://github.com/expo/expo/tree/master/packages/expo-gl
• https://github.com/ospfranco/react-native-quick-sqlite
• https://github.com/ammarahm-ed/react-native-mmkv-storage
• https://github.com/Nozbe/WatermelonDB

Blogposts

• Getting started guide by @ammarahm-ed and revisioned by @mrousavy

Q&A

This is also a place for questions related to this effort and its direction.

[Eyesonly88]

I have a couple of questions:

• Why doesn't React Native use the same exact JSC for iOS and Android?
  AFAIK, Android JSC !== iOS JSC (correct me if I'm wrong)
• Is it even possible to use something else other than JSC for iOS? AFAIK, even Chrome doesn't use V8 on iOS: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zINHc4_dWhk

[Kudo]

@Eyesonly88

Why doesn't React Native use the same exact JSC for iOS and Android?
AFAIK, Android JSC !== iOS JSC (correct me if I'm wrong)

Even at the same version of JSC, the Android implementation is different to iOS.
So that Android JSC will always not equal to iOS.
Furthermore, different iOS versions have different JSCs.

Is it even possible to use something else other than JSC for iOS? AFAIK, even Chrome doesn't use V8 on iOS: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zINHc4_dWhk

Yes, JSI brings a benefit for other platforms to use different JavaScript engine easier.
E.g. react-native-windows will use CharkaCore

BTW Chrome does not use v8 on iOS simply because they should follows App Store Review Guidelines

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.

[Eyesonly88]

@Kudo interesting, thanks for the reply.

Yeah, regarding V8 on iOS, that's what I was wondering about, even if RN provided a way to use other engines, we're stuck with JSC on iOS due to App Store rules.

[Pikaurd]

@Eyesonly88 Please check @Kudo comment 2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript. That focus "browse the web". Chrome is a web browser therefore google has to obey it.

[sJJdGG]

@Pikaurd @Eyesonly88 Yeah I also think @Kudo is right regarding usage of V8 and theoretically it should already be possible to submit V8-powered RN-based apps to app store review process and getting accepted considering JSI efforts on RN side and more importantly the almost new announced JIT-less V8 on V8 side.

But really eager to see a practical example that's accepted to app store.

To me biggest benefit of V8 (In addition to other common reasons) could be V8 snapshots that should help boosting startup times considering parsing javascript is a significant chunk of overall code execution time.

[Eyesonly88]

@sJJdGG I'm happy to try it in one of my production apps, any guide on how would I go about doing that? (I'd do anything to improve startup time)

[sercand]

@sJJdGG @Eyesonly88 ReactNative supports another bundle option which is ByteCode Bundle. It is not documented and I guess facebook uses it in their app. It must be be similar to V8 snapshots.

[aleclarson]

Does this have any implications for WebAssembly interop with React Native?

[kirillpisarev]

I still can't figure out how JSI will solve the problem with RN viewport size suspense in case of embedding RN within a native project? As i understand the flow now is like:

1. init RN native
2. init RN JS
3. build JS shadow tree
4. draw native

During all this time the viewport doesn't know the size of content that leads to UI problems.

So what will be changed to solve exactly this problem?

[kelset]

the viewport doesn't know the size of content that leads to UI problems

my understanding is that actually through JSI & Fabric, the viewport will know. But I may be wrong.

[oNaiPs]

Hi guys, we have been working on a JSI implementation for node.
Idea is to be able to re-use JS<->C++ modules that work in both React Native and Node/Electron. We think JSI has a great potential to become an API for cross-runtime implementations.

We also worked on a C++ template system that allows us to define C++ classes that map easier to a JS object, without any codegen tools.

We would like to share our effort with the community, but would like some guidance on how we could do that, perhaps with some mentoring from people that is involved with JSI implementation.

Thanks

[akshetpandey]

So I have some code using turbomodules but I understandably can't run it in remote debug mode since that runs with the remote chrome js engine. What is the workaround and what does the debug DX look like for JSI HostObjects and turbomodules?

[terrysahaidak]

@akshetpandey I as remember, the current workaround is to have both JSI and the bridge and switching between them when you debugging.

When you're using JSI, your module available using global object, but once you've switched to a remote debugger, use NativeModules instead (if you have bindings).

You can check out @chrfalch's reanimated JSI example (might be outdated a bit): software-mansion/react-native-reanimated@master...chrfalch:jsi-methods

[elicwhite]

When using JSI, we currently recommend using safari to debug the JSC instance running on device, or on Android if you are using Hermes, you can connect Chrome to the instance of Hermes running on device.

[terrysahaidak]

Is there any article/example/docs on how to properly use JSI on Android? Maybe there is already module in current master which uses JSI on Android? I would appreciate any link.

[kelset]

@terrysahaidak I think that the closest thing to that atm is: ericlewis/react-native-hostobject-demo#4

[terrysahaidak]

This looks cool and I've already seen it, but not quite sure how to trigger Java code from C++. By the way, does CodeGen is usable in any kind already?

[kelset]

I'm not sure about it being usable - afaik it's still under heavy development. But you can check it out here -> https://github.com/facebook/react-native/tree/master/packages/react-native-codegen

[chrfalch]

@tomduncalf added a pull request to Eric and my repository showing how to add support for JSI on Android, don't know if that can be used?

ericlewis/react-native-hostobject-demo#4

[terrysahaidak]

Here is my attempt to get JSI working on android. And yeah, JSI definitely works, but also JNI works as well! So yeah, we can call Java from JS right now:
https://github.com/terrysahaidak/host-object-test/blob/master/libs/android-jsi/test-jsi/src/main/cpp/TestJSIInstaller.cpp

[mfbx9da4]

I've noticed some issues with using promises together with async JSI functions. I've raised an issue facebook/react-native#33006

Has anyone here experienced something similar?

[yaaliuzhipeng]

Is there any way to call the callback passed from javascript async .
I have a java method with async listener like below

static public void identifyLanguage(String text) {
        LanguageIdentifier languageIdentifier = LanguageIdentification.getClient();
        languageIdentifier.identifyLanguage(text)
            .addOnSuccessListener(v -> {
               
            })
            .addOnFailureListener(e -> {

            });
    }

I invoked the c++ method from javascript through jsi and the c++ method called this static java method . the problem is I passed in an anonymous callback from javascript to receive calling result , but as you can see the result from java is asynchronous . the registered c++ method cannot get the result synchronous . how can I invoke the passed in callback once the SuccessListener invoked ?

[stephenkopylov]

@yaaliuzhipeng the main thing you need to achieve this is react::CallInvoker. When you'll get all you need to do is something like this:

#include <ReactCommon/CallInvoker.h>
#include <ReactCommon/TurboModule.h>
#include <ReactCommon/TurboModuleUtils.h>

static Value foo(Runtime &rt, TurboModule &turboModule, const Value *args, size_t arg_count) {
	std::weak_ptr<CallbackWrapper> callbackWrapper = react::CallbackWrapper::createWeak(args[0].getObject(rt).getFunction(rt), rt, turboModule.jsInvoker_);
	
	callYourJavaMethodWithAsyncCallbackAsArgument([callbackWrapper](){
		auto strongWrapper = callbackWrapper.lock();
		if (!strongWrapper) {
			return;
		}
		
		strongWrapper->jsInvoker().invokeAsync([callbackWrapper]() {
			auto strongWrapper2 = callbackWrapper.lock();
			if (!strongWrapper2) {
				return;
			}
			
			strongWrapper2->callback().call(strongWrapper2->runtime()); //calling your async callback
			
			strongWrapper2->destroy();
		});
	};
	);
	
	return 0;
};

PS: I'd recommend you to use CallbackWrapper - it's really useful if you are not sure that JSRuntime (ant all it's objects including your callback) is still alive

PPS: Don't forget to destroy all your callbacks in TurboModule's destructor

PPPS: as I mentioned before - here's a good example of TurboModule with JSCallInvoker in it

[laptou]

How do I get a shared_ptr to the JS runtime on Android? It seems to be exposed as a shared_ptr on iOS, which is great b/c I can convert it into a weak_ptr and this lets me know when the runtime is destroyed, but on Android it seems that I just get a raw pointer with no easy way to track the lifetime of the runtime.

[intergalacticspacehighway]

Is there any recommended way to release native resources held by the HostObject when it's being garbage collected? (Assuming HostObject gets GCed when there are no references to them in JS world and when the garbage collector runs)

[mrousavy]

Yes, the HostObject's C++ destructor.

[intergalacticspacehighway]

Great. Thank you @mrousavy. Tried putting a destructor and noticed it gets called sometimes but not consistently when we release the variable references from JS. Maybe because it's still not garbage collected?
In that case, I guess it would be safer to provide some function in HostObject that we can manually call to release resources? Let me know if I am understanding it correctly.

[mrousavy]

Yes, JS memory management works different than C++' memory management. The HostObject only gets deleted when the GC runs (which btw might even be on another Thread, so be careful when doing JSI or JNI stuff).

See react-native-vision-camera's Frame Host Object for an example :)

[laptou]

Is the lifetime of the CallInvoker tied to the lifetime of the Runtime? As in, if I schedule a callback using invokeAsync, is it guaranteed that the runtime will still exist when the callback is called?

[laptou]

@DominickVale install React Native into a node_modules folder, then add the following paths to your header search path:

node_modules/react-native
node_modules/react-native/React
node_modules/react-native/React/Base
node_modules/react-native/ReactCommon/jsi
node_modules/react-native/ReactCommon/callinvoker

You can also get the same headers by downloading the Hermes source code (they are located in the API folder).

[laptou]

How do you get a reference to the RuntimeExecutor on iOS? It's available via CatalystInstance on Android, but I can't find the analogous method on iOS.

[DominickVale]

Hi, what would be the correct way to have an array of objects constantly being updated and the js side being notified of those changes? All the attempts I've made end up in crashes. I tried callbacks, i tried manually getting the data from a js loop etc. They are all not working at higher speeds (for example less than 50ms)

[JiriHoffmann]

Hi, I was wondering... Is there was a way to pass an ArrayBuffer from C++ to the JS side? I know there is the getArrayBuffer method to get ArrayBuffer from JS, but I couldn't find anything for the other way around.

[mhorowitz]

Hi, I was wondering... Is there was a way to pass an ArrayBuffer from C++ to the JS side? I know there is the getArrayBuffer method to get ArrayBuffer from JS, but I couldn't find anything for the other way around.

Not currently. There was discussion of this in facebook/hermes#419 (comment) in the past. It's not something on our roadmap, but we would be happy to advise on what we would want to see in a PR.

[mfbx9da4]

@JiriHoffmann Does react-native-buffer do what you need?

@DominickVale I've also experienced performance issues with async JSI functions

[JiriHoffmann]

@JiriHoffmann Does react-native-buffer do what you need?

Not really, it uses memcpy which is the same thing I do.

Hi, I was wondering... Is there was a way to pass an ArrayBuffer from C++ to the JS side? I know there is the getArrayBuffer method to get ArrayBuffer from JS, but I couldn't find anything for the other way around.

Not currently. There was discussion of this in facebook/hermes#419 (comment) in the past. It's not something on our roadmap, but we would be happy to advise on what we would want to see in a PR.

@mhorowitz I would love to give it a try, although I'm not sure if my JSI and C++ knowledge is up to par yet. Maybe a new issue would be helpful so that others can take a look at it as well?

Also I created two JSI libraries if you want to add them to the list:

• react-native-clusterer
• react-native-cryptopp

[DominickVale]

@JiriHoffmann Does react-native-buffer do what you need?

@DominickVale I've also experienced performance issues with async JSI functions

I'd love to only get performance issues. I literally cannot find a reliable way to get state updates from the c++ side of things. Whether i call a c++ function from javascript every 20ms or i call said javascript function from state hooks on the c++ side it crashes in a non-deterministic way 80% of the time (at least to me). The worst part is actually the fact that it works most of the time but it crashes in this random way. I tried debugging but the stack trace doesn't make sense to me as it's just internal JSI stuff and nothing regarding what I'm doing natively.
What i need to do is pretty simple... I just want real-time data from the c++ side. It's been a month and still no solution.

[kelset]

@DominickVale that sounds like a big problem - can you try to isolate it into a repro project and report it (similarly to what @mfbx9da4 did) so that it can be investigated further?

[chrfalch]

@DominickVale Could there be an issue with accessing the Javascript JSI objects from other threads than the JS thread? This could be a source of unreliable crashes like this.

[yotamishak]

Not sure if this is the right place for this, if so it would be great if you could refer me to where this can be discussed

I wanted to ask how native modules in the new architecture work compared to "jsi modules".

"jsi modules" below

Libraries implemented using JSI

• https://github.com/mrousavy/react-native-vision-camera
• https://github.com/mrousavy/react-native-mmkv
  ....

Will all new native modules (turbo modules) essentially be "jsi modules"?

Is there any need for c++ code in order to implement this or are codegen declarations on the js side enough for synchronous calls to native functions out of the box?

Does calling native function synchronously mean that return values are also returned synchronously ( as opposed to promises or callbacks)?

From my understanding, the bridge will still exist for backward compatibility, so how will migration of legacy native modules be handled? Is it enough to generate a codegen schema for the modules to redirect calls to these modules through the jsi as opposed to the bridge?

I don't want to overwhelm with questions but I feel as if the answers to all of these questions are related...
Thanks in advance!

[mrousavy]

Hey @yotamishak, I spotted my libs there! 😄

"JSI Modules" is what I call my libs that use the bare JSI C++ API to provide fast and synchronous bindings from JS to native (C++).

Turbomodules is an abstraction built ontop of JSI to make it easy for everyone to write native modules that are powered by JSI, without having to touch C++ code.

So yes, Turbomodules (the new native module system for React Native) will use JSI under the hood, just like my libraries. It's just a bit abstracted/wrapped to make it easier, since my JSI Modules are a bit complex in code (lots of C++)

[yotamishak]

@mrousavy thanks for the quick response
I'm well familiar with your libraries and have been trying to pick out part of your code to find a Jsi solution to my use case.

I noticed this repo https://github.com/mrousavy/react-native-jsi-library-template of yours.

So using the new architecture I wouldn't need to use this template at all correct? I would get all of this functionality out of the box?

[mrousavy]

Yea, when using Turbomodules you won't need my jsi-library-template. Instead, take a look at this guide.

There are some parts that are still not covered by Turbomodules, e.g. custom JSI HostObjects, shared memory ArrayBuffers, and multithreaded JSI Runtimes - which is why MMKV or VisionCamera (the Frame Processors Part specifically) cannot be migrated to a Turbomodule (yet).

I've been investigating solutions that allow you to create JSI HostObjects with the Java/ObjC APIs on Turbomodules and pass them around like normal types (boolean, number, string, object, array), maybe I'll open a PR to react-native core soon

[fwon]

@Kudo

2.5.6 Apps that browse the web must use the appropriate WebKit framework and WebKit Javascript.

If so, why Hermes engine is supported in iOS, does it means that we should use Hermes for JSI & JavasScriptCore for inner WebView. Then we must keep two engine in RN iOS project?

[kelset]

hey folks, since we have an official deep dive discussions section open on this in the ReactWG New architecture, let's close this one and make the conversation progress over there: https://github.com/reactwg/react-native-new-architecture/discussions/categories/deep-dive (there are also some other sections, like Q&A, to ask more specific questions with an easier UX for replying)

Remember that you can apply to the WG (in case you are not in it yet) by applying to the form in the readme.