New Architecture with version 0.68.0 by React Native Team: The Talk of the Town

The React Native team has been creating wonders in the fields of mobile and web technologies since it came into effect. Recently, the team launched a new React Architecture, version 0.68.0 that enables developers to create highly effective and responsive apps. React Native is basically an open-source UI software framework used by a broad range of programming professionals like advanced, iOS developers, React beginners, new programmers, and many more. This software framework developed by Meta Platforms underwent remarkable transformations over the decades and the latest React Native version 0.68.0 resonates as one of the most commendable developments of 2022 with respect to React Native’s high-performing internal operations.  

According to Statista, at present React Native is the second most widely used cross-platform mobile framework among software developers after Flutter. As per Statista’s data for 2021 38% of software developers use React Native for various app development purposes. Also, React Native is one of the most used libraries and frameworks among 12.57% of developers as of 2022. Hence, the New React Architecture will overcome the limitations of the Old Architecture, fix bugs, and positively impact your React Native App in many ways.  

The Rationale Behind the New React Architecture 

The New React Architecture aims to resolve the issues that affected the Old Architecture and hindered progress with respect to performance and flexibility. The New Architecture version 0.68.0 is packed with upgraded capabilities to help developers for preparing high-performant and responsive apps. The Old Architecture would operate by serializing data that was supposed to be transferred from the JS to the Native layer with the help of The Bridge, a component of React Native. The Bridge would then move some data to the consumer layer from the producer layer. Then the consumer layer would then analyze data, restructure it and perform further functions. But The Bridge in the Old system involved some potential drawbacks such as,  

• It runs on an asynchronous system where data submitted to the bridge from one layer had to wait for another layer to process it.  
• The JS system in the bridge operated on a single thread. Hence, the computation on that particular layer was done on that single thread.  
• The Old Architecture involves a costly process because one layer was always dependent on the other. Every time one layer would serialize data and the other would deserialize it and the process went on. The preferred format for this was JSON which is easy to use, involved human readability, and is lightweight too but still, it is expensive.  

The new version of React Native Architecture replaced the use of The Bridge and introduced the JavaScript Interface (JSI) that enables a JavaScript object to seize reference to a C++ and vice versa. The new version of Architecture further brings in a number of superior benefits such as a synchronous execution system, lowers costs, concurrency, easy code sharing, and Safety typing of code. We will discuss the benefits in detail later.  

The latest React Native Version redefines the way React Native Modules and Native components operate during the serialization and deserialization of data. React Native Module has also designed a few Pillars of the New React Architecture which are,  

• The New Native Module System consists of Turbo Modules. Turbo Modules is a framework that supports effective and easy integration with native code.  
• The New Native Renderer is comprised of a Fabric that is capable of enhancing cross-platform consistency and processes in rendering.  
• The Codegen creates a boilerplate C++ which will be ultimately used by the New React Architecture version through static typing in JavaScript.  

New Architecture vs Old Architecture 

Here, we will study a comparative analysis of New Architecture and Old Architecture to dive deep into React Native’s internals. We will start our discussion with the Current/Old Architecture and its constraints and then focus on the upgraded React Native Architecture. We will see how far the New React Architecture has been capable of solving the issues that afflicted the Old Architecture and how the latest version of React Architecture will be advantageous to developers.  

We will start our discussion by understanding the Current Architecture first. Within the Current Architecture, we see that there are two versions, native world, and JavaScript which operate and interact with each other. Developers build cross-platform apps by forming native elements recognizable by React Native. Thus, the node of that formed element cannot be accessed and any type of manipulation cannot be conducted with the JavaScript world. Hence, as already discussed, there takes place two-way communication, which is executed by The Bridge.  

In the present version of React Native Architecture, there are 3 major threads that perform the bulk of work such as converting display styles, structuring each element, and then transferring it over to the UI layer. These are  

• JS Bundle or JS thread – It creates a thread for execution for all the codes written in React Native.   

• Native/UI thread – This thread is responsible for Native UI. It is responsible for making all interactions such as clicks, tapping on buttons, scrolling, etc. In simple words, it is responsible for all the native features where UI elements are rendered and the code is executed.  

• Shadow tree/Shadow thread – This thread is responsible for calculating all the positions, height, and length of the elements and then converting it into the native elements such as UI view into the iOS app and the like.  

So, this is how the Current/Old Architecture works and there are going to be some remarkable changes taking place in the New React Native Architecture.  

The limitations of the Current Architecture,  

• Since serialization of data takes place with the help of The Bridge within the Current Architecture which reduces the rate of transferring data and monotonous copying of data that is not required.  
• Since the interaction of data operates on an asynchronous approach it cannot execute the performance in real-time but rather it is responsible for scheduling the actions taking place. Although it is good for a few use cases, still there are some situations that demand the JS code and the native code to be in sync.  

This is why a New React Architecture has been introduced to resolve these issues by replacing The Bridge with JavaScript Interface (JSI).  

The New React Native Architecture 

The new version of React Native Architecture will create a link between the native world and the JavaScript World and create seamless communication between the two worlds through synchronization. 

JavaScript Interface 

So, with the implementation of JSI in the New React Architecture, it shuns the need for serialization of data and this already indicates the fast transfer of data since it doesn’t involve conversion to JavaScript Object Notation (JSON), a text-based format for representing organized data based on JavaScript object syntax. Moreover, it is written in C++ format. The New Architecture has decoupled JSI from the JavaScript Core Engine which is at present operating in the Current Architecture. Since it is a C++ format, you are free to integrate other engines in the latest React Native Architecture such as V8, Chakra, and many more. The worth of C++ is indeed very high and extensive, so it is expected that the New Architecture will be able to support more devices, windows, etc.  

You can exploit the power and use cases of C++ directly from JavaScript. In a way, this lasted version of React Native Architecture is going to create an entire synchronization of the JS thread along with Native Modules seamlessly. To do certain things in a much better and more efficient manner, you need to do synchronization instead of relying on asynchronization methods.  

Fabric 

Then comes the Fabric, which the React Native team is emphasizing and working on. In the Current React Native Architecture, all the rendering and positioning take place through the threads, mainly the Shadow thread. But the new version of Architecture attempts to replace the present UI Manager by introducing a new approach with the help of JSI itself. The Fabric enables the rendering mechanism more optimized and effective since it attempts to build a shadow tree directly into C++. This immensely improves interoperability with other host platforms.  

Turbo Modules 

In the Current Architecture what happens is since you are not connected to everything like accessing a C++ reference, or any other language such as Bluetooth, GPS location, etc., the React Native app used to invoke all the elements by JavaScript so that in case your app takes advantage of these elements, they can call them. It doesn’t matter whether you need these apps or not. Hence, all your data gets in with your application start. This is obviously a problem since it will slower your app and also a hectic task because if you don’t need those apps, it will just be an unnecessary task of bloating for you. This is obviously a waste of time and doesn’t make sense.  

But as the latest version of Architecture has JSI, you don’t need to go for a bloating task because the Turbo Modules with which you can hold a reference of the elements directly so that you can call them anytime. There is no need to invoke these elements or native modules prior to the opening of the app. This effectively excludes the hectic task of serialization which currently operates in The Bridge of the existing Architecture.  

CodeGen  

Since JavaScript is a Dynamically Typed language and JSI is also in C++, a Statistically Typed Language, the React Native Team has to work for building an easier and more seamless interaction between the two. This is why the New React Native Architecture consists of a built-in checker used to understand the types of language so that you don’t have to use typescript and you can write your regular JavaScript. 

The CodeGen will define interface elements utilized by Turbo and Fabric by accessing the typed JavaScript.  

What Are the Benefits of the New Architecture? 

By now, it is quite evident that the New Architecture has been developed to fix the problems happening within the Old Architecture and help developers become more efficient. In this section, we will discuss about the benefits of the New React Native Architecture to understand its importance over the Old Architecture.  

• The Bridge is replaced by JSI which confirms the faster transfer of data without involving serialization.  
• The JSI is written in C++ format which makes it easy to abstract all types of codes and shares those seamlessly between the platforms.  
• It supports a synchronous execution.  
• It ensures concurrency which makes it easy from JavaScript to invoke functions appearing on different threads.  
• It ensures interoperability and seamless communication among all threads and host platforms.  
• It will enable type safety to ensure that JS can accurately invoke all elements on C++ objects and vice versa and will automatically generate a code. The code generated must be typed via Flow or Typescript. 
• It easily gets integrated with other engines.  
• It eliminates lowering the speed of your apps by holding a reference of the elements with the help of the Turbo feature.  

Wrapping Up! 

So, this article consists of all the basic information you need to know about the React Native New Architecture version 0.68.0 and also how it differs from the Old Architecture. Since it is a new development as its name suggests we need to wait some more time to gain empirical knowledge about its use cases, workflow, connectivity, performance, compatibility, etc. But it is indeed a splendid development by the React Native Team to overcome the issues affecting the performance and flexibility of the Old Architecture.   

But still, there remains a few questions in the minds of the developers about the new version such as whether the Turbo Modules will serve the purpose fruitfully as excepted or how CodeGen will check all the things regarding language in advance, and many more. Although most of these questions have been already addressed by the React Native Community, the implementation and adaptation of this new React Native Architecture will talk more about its benefits and relevance in the market.  

So, hurry up and try this exciting version of React Native and upgrade your existing Architecture with powerful improvements. Get in touch with us at Webuters for building high-performing apps and get rid of a complex interface for your projects. We at Webuters will help you to exploit all the advantages of the ideal framework for your cross-platform developments.