React Native will be re-architecture in 2020

Tram Ho

React Native was officially introduced in 2015 as a solution for building cross-platform applications using ReactJS, along with compatibility with native operating system components. The original design of the platform has many weaknesses and errors, but it is still strongly supported by the developer community around the world – due to its friendly application builder. Web developer.

As announced in 2018, React Native has been redeveloped by Facebook’s development team to help make the platform more robust and solve some common issues that developers have. have encountered in the last few years.

Let’s see how this re-architecture will affect and improve performance and application development time.

Old architecture

React Native is a platform-agnostic solution. Within that scope, the main goal is to allow developers to write JavaScript code with ReactJS, and below that, React Native will use its own mechanisms to compile React Elements into components that the system needs. Native operating can read and understand.

  • Display the user interface correctly
  • Access to native operating system components

Usually for Android / iOS operating systems, the mechanism of action will look like this:

There are three separate threads running in parallel in any React Native application

  • JS Thread: is where all JavaScript code is read and compiled, and where most of the application’s business logic is handled. Metro will translate alternative Javascript syntax (Typescript or JSX), and combine all Javascript code into a single file. This code will be transferred to JavascriptCore (JSC) to be able to run.
  • Native Thread: is where the native code is launched. It communicates with JS Thread whenever there is a need to change the UI or access Native functions. We can divide Native Thread into Native UI and Native Modules. All Native Modules are started when we use the application. That means the Bluetooth module will always be activated by React Native even when there is no need to use it.
  • Shadow Thread: is where React Native will calculate the layout. It uses Facebook’s own Layout Engine called Yoga to calculate the flexbox layout, then sends the results to the Native UI.

In order for JS Thread and Native Thread to “communicate” with each other, we need to use a C ++ module called Bridge. Below, this Bridge module is built around an asynchronous queue. Whenever it receives data from either side (JS Thread or Native Thread), this data will be serialized as JSON and sent to the queue, eventually decoded upon arrival.

This means that all threads that are based on a JSON signal stream are transmitted asynchronously over a Bridge, and they will be sent to either side in the hope (but not a guarantee) will receive a response. Future. You may also experience information congestion and never receive a response.

Here we will have a fairly common example explaining why performance issues are seen quite clearly when we scroll up and down a large data list: Whenever the event onScroll occurs on Native Thread, information will be sent asynchronously to JS Thread. However, Native Thread does not wait for the JS Thread to perform its own tasks and send it back another way. This creates a delay – there will be a space displayed before information appears on the screen.

Likewise, layout rendering calculations need to go through several rounds before they can be displayed on screen: it needs to go through the Yoga engine before being computed by Native Thread, and of course they are. will have to cross the Bridge to get to the JS Thread.

We can see how the JSON messages sent back asynchronously will create performance problems. But is there any other way our Javascript can communicate with Native code? This is where JSI works.

New architecture

React Native’s new architecture has gradually removed Bridge and replaced it with a new component called Javascript Interface (JSI).

JSI has a few interesting changes.

First, JS Bundle no longer depends on JSC (Javascript Core). In other words, JSC Engine can now be swapped with other JavaScript Engine capable of better performance, such as Chrome Chrome V8 for example.

The second point: by using JSI, Javascript can hold references to C ++ Host Object objects and access methods on them. From there, Javascript and Native components will perceive and communicate with each other.

In other words, JSI offers complete interoperability between all threads. With the Shared Ownership concept, Javascript code can run methods directly from the JS Thread, bypassing the serializing of JSON messages between components, thereby eliminating bottlenecks. Information and asynchronous on the Bridge.

In addition to significantly improving the communication performance between threads, this new architecture also allows us to directly control Native Modules. That is, it is possible to use Native Modules only when they are needed, instead of activating them all when launching the application.

This gives a noticeable performance improvement for application launch time. This new mechanism has the potential to benefit us in many different use cases. For example, now that we have the power of C ++ in hand, it’s easy to see how React Native is used for large system goals.

The story is not over yet

Over the years, React Native has accumulated a lot of components that they are obsolete at the present time, and they are no longer used or used in other ways. With the goal of cleaning up unimportant components and improving maintenance, some components of the React Native framework have been removed from the system. For example, some core components such as WebView or AsyncStorage have been removed from the React Native core, and they become repositories managed and supported by the community.

With a new mechanism, clean core and impressive interoperability between Javascript code and Native code, React Native’s new architecture is set to achieve many improvements in developer performance and workflow. .

With the roadmap towards complete restructuring in the fourth quarter of 2020, it will be interesting to see how our applications work smoother, more efficiently, as well as the experience of our developers becoming better. .

Original article link:

https://duypt.dev/react-native-se-duoc-tai-kien-truc-rong-nam-2020-6AWVe2E7Je.html

https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c

Share the news now

Source : Viblo