Deep dive into React Native’s New Architecture
August 22, 2022
Current React Native Architecture
React Native handles the actual layout by translating React-based display styles (for example, flex) to the relative position values where each element is to be structured before passing it over the UI layer of the native world to ensure uniformity across all platforms. The current React Native design is primarily built on three main threads:
- Native code is run in the central/Native/UI thread, which renders all UI elements.
- The layout thread, often known as the shadow thread, is the one that calculates the actual layout. It uses the Yoga layout engine from Facebook to recast the flexbox layout, as was already mentioned.
Emerging of JSI
Differences between the bridge and JSI
In conclusion, we may state that Bridge will be replaced by JSI technology. While both JSI and Bridge will be used in projects for the foreseeable future, Bridge will soon be replaced, and all native modules will use JSI. Since JSI offers quicker and more direct access to the JS runtime, it produces a more efficient structure than Bridge.
Contrarily, with Bridge, communication between the JS and Native sides occurs asynchronously, messages are processed in batches, and the await keyword is necessary for a straightforward operation like adding two numbers.
They can also be utilized in top-level scope because everything in JSI operates synchronously by default. Of course, asynchronous methods can be developed for lengthy activities, and promises are simple to use. Because JSI accesses the JS runtime, remote debuggers like Chrome cannot be used. Instead, we may debug our applications using the Flipper Desktop software.
We don’t need to use the JSI directly or be familiar with C++ internals because the JSI evolved into an abstraction layer for native implementation. As before, we merely call native functions from the JS side. The Native Modules API and the Turbo Modules API are very similar. As a result, every existing Native Module in the RN ecosystem may be quickly converted to Turbo Modules without starting from scratch.
Standpoint on React Native
New Architechture: React Native
JSI-based architecture benefits include:
The first benefit of this layer is that JS can keep track of the references to host objects and call their methods as needed. Therefore, even before the app is opened, we do not need to pre-load the native modules that JavsScript uses. Additionally, the additional serialization burden currently exists in Bridge-based architecture is eliminated.
The rendering system that will take the place of the current UI Manager is called Fabric.
Let’s first take a look at the benefits of Fabric by examining how UI is now produced in React Native:
The Layout Engine uses this shadow Tree to determine where UI items should be placed on the host screen.
The shadow tree is converted into a hostviewtree, made up of Native Elements, once the results of the layout calculation are known. (For instance, ViewGroup on Android & UIView in iOS will be translated from the ReactNative View/> element, respectively.)
Fabric is React Native’s new delivering framework is a calculated expansion of the old render framework.
What benefits does Fabric offer?
The Shadow Tree method, which enables renderers to display only the portions of our program that have changed, will be moved to the native realm by Fabric utilizing C++. Fabric will profit from React’s concurrent rendering approach to be able to do that.
- The renderer can focus on unambiguous client associations to guarantee they are dealt with expeditiously because of the accessibility of multi-need and simultaneous occasions.
- Server-side rendering for React Native is simpler to develop.
- The new render system’s consistency is cross-platform, making it simpler to maintain consistency across many platforms.
The new architecture will, therefore, also feature a static type checker named CodeGen.
JSI will improve the modules’ performance and the programs that use them. We don’t believe that JSI will impact standard React Native app development because it is only modifying infrastructure. However, if you’re a library maintainer, we believe learning C++ and converting a straightforward library to JSI will be helpful.