React Native New Architecture

React Native has announced the release of

b. There are 3 threads:

• 
  JavaScript Thread (JavaScript): Responsible for the JavaScript bundle code.


• 
  Main, UI Native Thread : Responsible for the native modules.


• 
  Shadow, or background Thread (Yoga): Responsible for the layout.

🚩 Problems with old Architecture

Communication between the JavaScript and native layers relies on the bridge, which is the main limitation of the old architecture.

A. Direct communication between JavaScript and native layers without a bridge. This is why the new architecture is commonly known as 'bridgeless.'

1. JavaScript Interface (JSI)

JSI is JavaScript Interface, this is the layer written in C++. Any JS engine can be use with this and this enables the cross platform support - not just on IOS, android but also on smart TVs, smart watches, etc.

JSI enables the JavaScript to hold a reference to the native module. These enables the JavaScript to communicate directly with native modules as well as this enables the synchronous communication between JavaScript and Native thread

PS: Your react native code gets bundle through Metro and goes to the JSI.

2. New Native Modules

New Native Modules is the new and improved native modules. This is written in C++ and it enables the synchronous access from JS/TS apis to Native. This means that there will be direct communication between Native, and JavaScript thread without the need of bridge. C++ also enables to write your own native modules for cross platform sharing.

New native modules allows to handle events, read layout, schedule updates both async, and sync.

As we learned earlier, JSI keeps the reference of objects in the TurboModules, this will allow JavaScript code to load each module only when it is required (dynamic loading of modules). This improves the startup time of app as compared to the old architecture.

3. Codegen

Codegen is a tool to create the strongly typed contracts. These contracts are helpful for developers by saving their time and make the communication easier between cross programming languages.

1. performance issues




2. empty frames (missing 60FPS)




3. also, old architecture has to maintain the 2 copy of node and DOM. This leads to the memory issue




4. There was no way to interrupt the low priority tasks to give priority to urgent updates.

In the Fabric these issues were taken care. With new renderer now we can use transition to interrupt the low priority tasks for urgent. This will make the app responsive & Main/UI native thread won't be unblock. The events will be async execute. With new renderer system, there will an immutable tree of the view hierarchy.

Immutable means that it won't be changeable. Benefits of immutable:

1. This allow for thread-safe processing of updates.




2. This also means there will be multiple in-progress trees, each representing a different version of the user interface.




3. As there are multiple trees at different version of UI, *updates can be rendered in the background without blocking the UI *(such as during transitions) or on the main thread (in response to user input)




4. The new renderer can also read layout information synchronously and across different threads. This enables background computation for low-priority updates and synchronous reads when needed.

🎯 End to End Architecture

Happy Learning!!