TurboModules (NativeModules Re-architecture)

fkgozali commented 5 years ago

Introduction

This is a place for discussions around the upcoming "TurboModule" feature.

Full proposal here: https://github.com/react-native-community/discussions-and-proposals/blob/master/proposals/0002-Turbo-Modules.md
Previous discussions: https://github.com/react-native-community/discussions-and-proposals/pull/11

Terminology

Fabric: just the UI layer re-architecture, to take full advantage of concurrent React architecture. (dedicated issue)
JSI: JavaScript Interface, it's a unified lightweight general purpose API for (theoretically) any JavaScript virtual machine. It enables every other piece of the rearchitecture. (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 TurboModules (please consider that this is not yet finalized, it may change in the future)

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. [...] 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.

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.

IN Q1 2019, @kelset wrote a more high-level explanation in a blogpost: https://formidable.com/blog/2019/fabric-turbomodules-part-3/ and did a talk about the whole rearchitecture in April 2019 at React Edinburgh.

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

Q&A

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

MateWW commented 2 years ago

Hello, I'm playing with TurboModules and figured out something confusing. I was testing my brand new turbo module which uses ExoPlayer. ExoPlayer requires all actions to be triggered from the same thread. I've created two methods represented by the below interface.

export interface Spec extends TurboModule {
  register(): string;
  play(key: string, url: string): void;
}

I was surprised when I've triggered those methods one by one and got an error

const key = Player.register()
Player.play(key, "url")

I've tested it further and noticed that there are two types of methods in TurboModule

synchronous - methods that return values are running on the JS thread and can be treated in JS files as a synchronous call
asynchronous - methods that define void as a return type are running on something called native modules thread and we cannot guess when it will be accomplished(order is different with every application run)

I've prepared a small playground. https://github.com/MateWW/RNNewArchitectureApp

Can someone elaborate on why it's like that?

kelset commented 2 years ago

hey folks, since we have now an official deep dive discussion 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/2

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

react-native-community / discussions-and-proposals