Learning stage, quoting others

Architectural model

The basic architecture model is as follows:

  • Native is a Native part, such as iOS Native or Android Native
  • The React side is mainly the React syntax
  • Bridge uses communication with Native and JS
  • Because Native and JS are relatively independent. Communication is achieved through Bridges.

A more detailed architectural model

  1. The top layer provides the React class support, which runs in the JavaScript runtime environment provided by the JSC
  2. The Bridge layer connects JavaScript to the Native world. Specifically, Shadow Tree is used to define UI effects and interactive functions. Native Modules provide Native functions (such as Bluetooth).
  3. The two communicate with each other through JSON messages

Threading model

  • JS thread
    1. JS code execution thread, the source code through Metro package, to the JS engine for parsing
  • Main thread (also known as UI thread or native thread)
    1. Mainly responsible for Native UI rendering and calling Native Modules
  • Shadow thread (also known as Layout thread)
    1. Create a Shadow Tree to simulate the React structure Tree.
    2. Yoga engine will be Flexbox and other styles, parsing into the layout of the native platform
    3. RN uses Flexbox layout, but native is not supported. Yoga uses it to convert Flexbox layout to native platform layout.

Apply colours to a drawing mechanism

  • The JS thread passes view information (structure, style, properties, etc.) to the Shadow thread,
  • Create a Shadow Tree for layout calculation. After the Shadow thread calculates the layout, it passes the complete view information (including width, height, position, etc.) to the main thread
  • The main thread creates a Native View (UI)

You can also use the following image to understand the rendering process:

Interthread communication

The existing architecture starts the process

The new architecture

Contrast between old and New architectures

Major changes to the new architecture

JavaScript layer:

1. React 16+ support new feature enhancements 2.JS Static Type checking (CodeGen) 3. JSI was introduced to allow the substitution of different JavaScript engines. Supports direct communication between JS and NativeCopy the code

Bridge layer:

  • It is divided into Fabric and TurboModules, which are responsible for UI management and Native module respectively

Native layer:

  • Simplify the core modules, split the non-core parts out, and update and maintain them independently as community modules

Enhanced type checking

CodeGen is a code generation tool from FaceBook

  • CodeGen automatically translates statically typed JS code such as Flow or TypeScript into interface files for Fabric and TurboModules.

  • Add type constraint

    • Reduced data type errors
    • Reduces the number of data validation and improves communication performance

For example: numbers in JS are often enclosed in quotes, which converts numeric types into strings. When the converted number is passed to bridge, it usually fails silently on iOS and crashes on Android. In addition. The type constraint also improves the communication performance. Because each communication requires data validation before the type constraint can be added. With the type constraint loaded, there is no need for data validation on every communication. Communication performance is improved by reducing the number of data validations.

Instead of directly feeding JavaScript code to the JSC, the new architecture introduces a layer of JSI (JavaScript Interface) as an abstraction over the JSC

  • JSI is a lightweight framework written in C++. There are two main functions:

    • Through JSI, the REPLACEMENT of JS engine can be realized

  • With JSI, Native can be called directly from JS

    • JS Objects can be directly referenced to C++ Host Objects, allowing direct calls between JS and Native
    • Reduce unnecessary thread communication
    • Serialization and deserialization costs are eliminated
    • The communication pressure is reduced and the communication performance is improved

  • Optimization of Bridge floor

Fabric

  • Simplified UI rendering

Fabric simplifies React Native rendering, which previously had complex cross-thread interactions (React -> Native ->Shadow Tree -> Native UI). After optimization, the Shadow Tree shared by JavaScript and Native is directly created in the C++ layer, and UI operation interface is exposed to JavaScript through the JSI layer, allowing JavaScript to directly control high-priority UI operations. It even allows synchronous calls (for quick list scrolling, page switching, gestures, etc.). This avoids cross-thread operations and greatly improves the responsiveness of the UI.

  • Turbo Modules

    • Through JSI, JS can directly call Native module to realize synchronous operation
    • Before implementing on-demand loading of Native Modules to reduce startup time and improve performance, all Native Modules (whether needed or not) should be initialized at application startup, because Native does not know which functional Modules JS will call. The new Turbo Modules allow Native Modules to be loaded on demand and hold their references directly after module initialization, instead of relying on message communication to invoke module functions. As a result, the startup time of the application will also improve

Lean Core

  • Slim down the React-Native core pack

    • RN has been around for years and its core package is too bloated
    • Some packages are not used in the project and are introduced every time, resulting in a waste of resources

  • Non-essential packages, moved to the community module, maintained separately

    • For example, AsyncStorage and WebView

New architecture startup process