React Native ushered in a major architecture upgrade, performance will be greatly improved

On July 14, Joshua Gross of the React Native core team said on Twitter that RN's new architecture has been implemented within Facebook, and 99% of the code has been open source. This architecture upgrade has been “planned for a long time,” Joshua said they have been planning since January 2018.

Facebook announced a plan and roadmap for a large-scale refactoring of RN in June 2018. The purpose of the entire refactoring is to make RN more lightweight, more adaptable to hybrid development, and close to or even achieve a native experience. Specifically include the following aspects:
Change the threading model. UI updates no longer need to be triggered on three different threads at the same time. Instead, JavaScript can be invoked synchronously on any thread for priority updates, while low-priority work is pushed out of the main thread in order to maintain responsiveness to the UI.
The introduction of asynchronous rendering capabilities allows multiple renderings and simplifies asynchronous data processing.
Simplify JSBridge to make it faster and lighter.
This architecture upgrade is of great significance to React Native. According to the official statement, this will greatly improve the performance of RN. Since the release of RN, it has roughly gone through the following several iterations (picture from Jingdong Xiong Wenyuan GMTC PPT), this time it is mainly to solve the performance problem that has been criticized for a long time.

In order to further understand the details of RN's architecture iteration, InfoQ reporter interviewed Jiang Hongwei, a senior front-end engineer of 58.com, and the person in charge of 58RN and Hybrid framework. The following is the specific content.
InfoQ: Can you introduce the architecture upgrade that you understand? Will the new Fabric rendering engine greatly improve the performance of RN?
Jiang Hongwei: First of all, to explain, Fabric is not a rendering engine, but the code name of the UI rendering part of the new architecture. React Native's new architecture includes three key parts: JSI, TurboModules and Fabric. The full name of JSI is JavaScript Interface, which replaces the original Bridge. The way that JS calls C++ and C++ calls Java/OC realizes the mutual operation between JS and Java/OC.
TurboModules is the code name for the API part of the new architecture. Thanks to JSI, JavaScript can directly call the methods of the Native module. Similar to in a browser, JavaScript calls the method of obtaining latitude and longitude, but actually calls the method of obtaining the bottom layer of C++.
Fabric is the code name for the UI rendering part of the new architecture. Thanks to JSI, JavaScript can directly manipulate Native components and render UI. Similarly, in the browser, JS calls createElement to create a div element, and renders the UI through the underlying C++.
According to the existing performance reports, the performance of the new architecture has probably improved by an order of magnitude. The performance here refers to the operational performance of the API and UI, and the impact on the performance of the first screen needs to be further evaluated.
InfoQ: Has all the new architecture code been put on GitHub? Does your team plan to upgrade?
Jiang Hongwei: The code for the new architecture implemented within Facebook has not been completely put on GitHub. At present, the JSI and TurboModules parts are already available, and the Fabric part will have to wait a while. In addition, it is estimated that there will be many changes in the ecological aspects of the new architecture, such as navigation and animation.
We have an upgrade plan this year, and we very much look forward to using the new RN architecture as soon as possible. According to our previous upgrade experience, the most important thing to care about is the compatibility of the new and old versions. We have 9 apps internally, and 300+ projects need to be migrated. We need not only automated migration tools, but also the cooperation of business development and testing students, and a gradual expansion plan.
InfoQ: People often compare RN with Flutter. At GMTC in 2019, Jingdong architect Xiong Wenyuan said that RN is slightly better than Flutter in terms of startup performance, but it is obviously inferior to Flutter in terms of rendering, which is the bottleneck of the entire framework of RN. After this upgrade, how would you evaluate the two frameworks?
Jiang Hongwei: After this upgrade, RN can match Flutter in performance. First of all, AOT pre-compilation is supported on both JavaScript and Dart languages, which is a tie. Secondly, JavaScript and Dart interact with the underlying layer through C++, which is a tie. Finally, RN native component drawing has platform optimization bonuses, which may be better than Flutter self-drawing engine drawing.
In other respects, carrots and vegetables have their own loves, front-end students will prefer RN, and client-side students prefer Flutter.
InfoQ: Have you researched Flutter?
Jiang Hongwei: We actually have many apps using Flutter internally. We also open source the Flutter Fair UI & template dynamic framework, and the tool flow developed by Magpie. However, super apps like 58.com and Anjuke didn't use Flutter. The main concerns were the package size and startup memory.
InfoQ: From your perspective, what are the key factors that determine the development of cross-end frameworks? What kind of dynamic balance will there be in the future between cross-terminal and native solutions?
Jiang Hongwei: The key factor in the development of the cross-terminal framework is the size of the net income. From the perspective of framework developers, Facebook has 1000+ RN pages inside, and the cross-platform net income is definitely very good. Flutter I am a little uncertain, it depends on the success of Google's Fuchsia operating system. From the perspective of framework users, the development cost of the ecosystems, such as Weex and NativeScript, is too high, and the net income may be negative, which in turn will restrict the development of the framework.
Where there are natives, there are cross-terminals, and the two will always coexist, but the market share of cross-terminal solutions will become larger. Native solutions are more in some innovative and basic scenarios, such as short video, VR or cross-terminal infrastructure. Cross-terminal solutions, such as Hybrid, Mini Programs, RN, Flutter, etc., will be more mature and will be used in more scenarios. And because it can save development costs, it will be used more in existing scenarios.

Jingdong architect Xiong Wenyuan once shared the new architecture of RN in detail at GMTC. If you want to see his Slides, you can send me a private message on the video account, and I will send you a separate message.

Laiguangying Xiaogai
Will be broadcast live at 09:00 on July 31st

Reserve
Video number
If you have other incremental information about this architecture upgrade, please leave a message in the comment area.