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 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.
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.
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.
The New React Native Architecture
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.
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.
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 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.
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.