react-native team has announce that 2022 will be the new architecture release
2022 is going to be the year of the New Architecture in open source.
but why a new architecture? to understand why to take a look at the current react-native architecture
let’s recap the current architecture components
Bridge: handle the communication between JavaScript thread and native/UI thread
JavaScriptCore: engine in android to run JavaScript code in your android and it bundled with your app
Yoga: layout engine takes all flex-box based styles and converts them to native layout width, height, spacing.
Welcome to the new react-native architecture
react native new architecture
as we can see the bridge will be replaced with a module called JSI (JavaScript Interface)
so what is JSI (JavaScript interface) ?
A lightweight API to embed a JavaScript engine in a C++ application. Fabric uses it to communicate between Fabric’s C++ core and React.
since the JSI is written with C++ that allows JS to invoke the native methods directly which means Less serialization of data between JS and Native/UI thread, with the power of C++ react-native, will expand new systems like smartwatches, TVs.
In another case bridge is only compatible with the JavaScriptCore engine which is not like the JSI, the JSI enables the use of other JavaScript Engines like Chakra, v8, Hermes, etc. that will reduce the app size in android.
Turbo Modules
at the start-up, The current architecture need to initialize all native modules (e.g. File Storage, Bluetooth ..etc) even if they are not used that making the user stuck in the splash screen for a while, slow load time
So what’s turbo module does is hold only the references for those native modules which mean to call them only when they are required, which will improve the start-up time
CodeGen
CodeGen will be the type checker, JSI as we discuses above the JSI is written with C++, C++ is a Statically Typed Language, and the react-native apps written with JavaScript which is a Dynamically typed language, so CodeGen will ensure the communication between them
NB: the difference between Statically Typed Language and Dynamically typed language is that in statically typed programming languages, type checking occurs at compile time Conversely, in dynamically typed languages, type checking takes place at runtime or execution time
Fabric
another big enhancement in the new architecture is Fabric
Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system.
we will discuss Fabric in the next article .
Top comments (0)