React Native was a leader in cross-platform app development, but traditional bridge-based designs showed limitations in performance and scalability. To solve these problems, React Native JSI (JavaScript Interface)A new architecture has been introduced as the center.

Let's take a look at how technologies such as TurboModels, Fabric, and Hermes have actually brought about performance changes in combination with JSI, and how they can be used in practice.

Bridge and JSI

Existing React Native used Bridge to call Native from Javascript. Bridge played a role in connecting the different environments called Javascript and Native. There was an issue where Bridge was slow to connect these different environments

Why is it slower when using Bridge, and why is it faster when using JSI?

• Serializing data
• To pass data processed by Javascript to native code via a bridge, the data must be serialized. Also, conversely, when passing from native to Javascript, the data must be deserialized back to its original form. At this time, these tasks use a lot of CPU, so if you use a bridge frequently, performance will degrade.

• Thread context switching
• Bridge exchanges data between Javascript threads and native threads, and at this time, context switching (Context Switching) between threads occurs, causing performance degradation.

• Bridge Queue Queue
• When using Bridge, call requests are piled up in a queue. Longer queues can slow response times because requests must be processed sequentially. In the case of large applications that use Bridge a lot, this problem often occurs.

This issue was caused by linking Javascript to another environment called native. JSI is a principle that all of the above problems disappear because Javascript and Native are directly connected. Let's understand the principles of Bridge and JSI and look at changes in React Native.

TurboModules: Native module call optimization

In existing React Native, native modules were loaded all at once during the app initialization phase.

• problem:
  • Even unused modules are loaded into memory, causing memory waste
  • App startup slows down due to longer initialization times
  • In large apps, the more native modules there are, the more serious the inefficiency of initialization

TurboModules is a new architecture introduced in React Native to improve the performance of native modules. The existing native module method uses Bridge to transfer data to calls between JavaScript and native code, and there was a problem where performance deteriorated during the serialization/deserialization process. TurboModules solves this problem and improves performance.

1. Lazy Loading
2. TurboModules are native modules Dynamically load only when neededI will. This greatly improves initialization speed and memory usage.

2. Module call optimization
3. When an existing native module makes a call between JavaScript and native BridgeSince data had to be transferred through, there was a decrease in performance during processes such as serialization/deserialization. TurboModules improved this by Immediate call It provides possible native modules and uses more efficient communication methods.

To use TurboModule, you must first implement a new native module. This module defines an interface between JavaScript and native code using the TurboModule architecture.

In Javascript, you can use it as follows:

Fabric: new UI rendering engine

What is the existing React Native UI rendering engine YogaIt was. Yoga is a layout engine developed by Facebook and used in React Native to calculate the UI's layout. Yoga was designed to provide the same layout across platforms, and mainly worked by passing layout data calculated in JavaScript to native code.

However, the existing React Native UI rendering engine had the following issues.

• Inefficiency in layout calculations: Performance degradation could occur in the process of calculating the layout in JavaScript and transferring the results to native code.
• Bridge performance: In the traditional way of using Yoga, Bridge had to be used to transfer data between JavaScript and native, which caused performance degradation due to serialization/deserialization and context switching between threads.

fabricis a newly introduced UI engine to solve this problem. It uses JSI (JavaScript Interface) to synchronize the UI state between JavaScript and native code in real time, and to process layout calculations more efficiently.

Fabric improvements

1. Rendering integrated with JSI
2. ‍Fabric uses JSI to synchronize UI state between JavaScript and native in real time. This can solve data serialization/deserialization problems and performance degradation that occurred with the existing Bridge method.

2. React Concurrent Mode support
3. Fabric supports React's latest Concurrent Mode. This makes UI updates smoother and more efficient, and eliminates stuttering in animation and UI response speed.

Fabric usage examples

List rendering

Fabric provides a smooth user experience even when rendering large lists. For example, scrolling remains smooth even in a scrolling list containing thousands of items.

• Traditional method:

Using Fabric, the above code works more optimally internally, and can process more data without scrolling delays.

Hermes: Mobile-optimized JavaScript engine

The background of Hermes

Previously, React Native used common JavaScript engines such as JSC (JavaScriptCore) or V8, but there were many parts that were not optimized for mobile environments.

• When running an app, it takes time to interpret JavaScript files, causing the app to start up slowly
• Performance issues occur on low-end devices due to high memory usage

To solve this, Hermes tried to solve the criteria problem as follows:

• Accelerate app initialization by pre-compiling JavaScript code into bytecode.
• Reduce unnecessary memory consumption with garbage collection and memory management methods optimized for mobile environments.

Hermes usage examples

1. Fast app launch

Hermes optimizes app initialization speed so users can use apps faster.

• exemplify: An app that used to take 3 seconds to initialize when using JSC was reduced to 1 second when running with Hermes
  

2. Support for low-end devices

Thanks to its low memory usage, it runs smoothly even on low-end Android devices. For example, using Hermes in apps targeting the Southeast Asian market can help increase market share.

Effects of React Native's latest architecture

React Native's new architecture organically combines JSI, TurboModels, Fabric, and Hermes to provide the following effects:

• Faster app initialization: LDrastic reduction in initialization time with azy loading and Hermes
• Efficient use of resources: Avoid wasting resources by loading modules only when needed and optimizing memory
• Smooth user experience: Provides seamless UI even for large lists and animations thanks to Fabric and Concurrent Mode
• Flexible data processing: JSI eliminates the data serialization/deserialization process, making it advantageous even for large-scale data processing

React Native has now evolved into a platform that can overcome performance limitations, even for large-scale applications. React Native as well as other hybrid frameworks use Bridge, but they are gradually applying other methods. Apps created with a hybrid framework are trying to extract the same performance as Native, and this change in React Native should also be paid attention to in terms of performance.