WeChat Mini Program Development TutorialThe column introduces the Rax mini program runtime solution.

In March 2020, after supporting the compile-time scheme, the Rax applet released a version that supports the run-time scheme. Up to now, Rax is still the only small program development framework in the industry that supports both compile-time and run-time solutions. This article will introduce to you the principles of the Rax applet runtime solution and our thinking.

Review the compile-time solution

Before introducing the run-time solution, let’s review what the compile-time solution is. As the name suggests, the compile-time solution focuses on compilation, and the representative framework is Taro v2.x. It converts JSX into the template language of the mini program (i.e. WXML/AXML, etc.) through static compilation, and then supplements it with lightweight runtime JS code to smooth the difference between the life cycle of the mini program and the React life cycle, making it Users can develop small programs with the familiar React DSL. The compile-time scheme principle of Rax is similar to that of Taro v2.x. For implementation details, you can refer to the previous articles Analysis of the Principle of the Rax to Mini Program Link (1) and Analysis of the Principle of the Rax Mini Program Compilation Scheme. Different from the compile-time solution, the run-time solution focuses on implementing rendering capabilities at runtime and does not rely on static compilation. Therefore, there are almost no syntax restrictions, which is its biggest feature. Let's take a look at the principles of runtime solution implementation.

Basic of Birth

The underlying implementation of the mini program is actually based on Web technology, but when reflected at the developer level, it is quite different from the Web. In the mini program, the logic layer and the view layer are isolated. The logic layer passes data to the view layer to trigger rendering through the unique setData method, and the view layer triggers the logic layer code through events. Its architecture is as shown below shown. Compared with web development, developers can use JS to call the DOM/BOM API provided by the browser to manipulate and render content as they wish. The architecture of mini programs is more closed and safer, but it also means that web code cannot run directly on mini programs.

For modern front-end frameworks (React/Vue), the bottom layer basically creates views by calling the DOM API. The view layer template of the mini program needs to be written by the developer in advance, which means that the method of dynamically creating DOM is not allowed in the mini program. However, the "self-reference" feature of the mini program's custom component opens up a breakthrough for dynamically creating DOM. The so-called self-reference means that the custom component supports using itself as a child node, which means that through recursive reference, we can construct any level and number of DOM trees.

For example, assume that the WXML template of a small program custom component element is as follows:

<view>??<block>??????<element></element>??</block></view><text>??{{r.content}}</text>復(fù)制代碼

Notice that element refers to itself recursively in the template and terminates the recursion through conditional judgment . Then, when the logic layer passes the following data through setData:

{
??"nodeId":?"1",
??"tagName":?"view",
??"children":?[
????{
??????"nodeId":?"2",
??????"tagName":?"text",
??????“content”:?“我是？"
????},
????{
??????"nodeId":?"3",
??????“tagName":?"text",
??????"content":?"rax"????}
??]
}復(fù)制代碼

The final view becomes:

<view>
??<text>我是</text>
??<text>rax</text></view>復(fù)制代碼

In this way, We cleverly implemented the ability to dynamically render views based on the incoming setData data when the WXML template is fixed. And this is the basis for the birth of runtime solutions.

Basic Principle

Rax’s runtime solution is derived from kbone, an isomorphic solution for mini programs and web end officially launched by WeChat. The design principles of kbone can be referred to its official website introduction. A simple summary is to simulate the DOM/BOM API at the logical layer, convert these methods of creating views into maintaining a VDOM tree, and then convert it into the corresponding setData data, and finally render the actual view recursively through the preset template. The basic principle of the process from DOM API to maintaining VDOM tree is not complicated. createElement/appendChild/insertBefore/removeChild and so on correspond to the basic data structure operations.

Students who are familiar with Rax should know that in order to support cross-terminal, Rax has a driver design. In fact, we can write another driver for the small program and implement its interface API based on the above principles. But our final choice was to complete the entire rendering mechanism through a lower-level simulated BOM/DOM API. The considerations for doing this are, first, based on kbone development, which is the fastest solution. The driver on the mini program side only needs to reuse the driver-dom on the web side. After all, the underlying document andwindow The variables have been simulated; secondly, it is because we want to provide developers with a development experience that is closer to the web. This solution means that in addition to using JSX, developers can also directly use the BOM/DOM API to create views, which will be more flexible. We look at all the mini program runtime frameworks on the market. Remax directly interfaces with mini programs from the VDOM layer through react-reconciler (similar to the Rax mini program driver design mentioned above), while kbone and Taro 3.0 both choose to use simulation. Web environment to implement rendering. This is also related to the design intention of the framework developer, and opinions vary. The basic schematic diagram of the Rax applet runtime solution is as follows:

Event system

In the Rax applet runtime, the library that simulates the DOM/BOM API is Decryption and thinking about Rax applet runtime solution. The APIs it supports are as follows:

In addition to processing rendering data, another important thing is the event system. It implements a complete event dispatch mechanism through the EventTarget base class. Logical layer DOM nodes all inherit from EventTarget and collect their own binding events through the unique nodeId. Each built-in component on the view layer template will be bound to nodeId and listen to all triggerable events. For example, a simple view tag will bind bindtap/bindtouchstart/bindtouchend and other events. When the event is triggered, the target node id is obtained through event.currentTarget.dataset.nodeId, and then the corresponding function bound by the user on the node is triggered.

Engineering Design

The main project process of Rax mini program runtime follows the design of Rax Web. The JS Bundle packaged by Webpack on the web side can be reused in the mini program runtime. We inject the window and document variables simulated by Decryption and thinking about Rax applet runtime solution into the bundle through the plug-in, generate a fixed mini program project skeleton, and load the JS Bundle in app.js. The overall project structure is shown in the figure below:

MPA or SPA ?

The above architecture is the result of gradual evolution. Initially, we used webpack's multi-entry mode to package the runtime applet code, that is, each page would be packaged independently as an entry. This makes the applet behave more like an MPA. The problem this brings is that the code that is commonly dependent between pages is not executed in the same memory, which does not match the performance of the native applet. This difference led to our final decision to change the project packaging model. The current version of the Rax runtime applet is more in line with the form of SPA, and all business codes are packaged into a JS file.

We have modified the link of the rax-app package of the Rax project entrance when the mini program is running. During initialization, it will return the render function of each page according to the route. The render function creates the root node (document.createElement), mounts the corresponding Rax component to it, and appends the root node to the body node (document.body. appendChild). During the onLoad life cycle of each page of the mini program, an independent document will be created and set as a global variable, and then its corresponding render function will be called to render each page independently.

性能調(diào)優(yōu)

從上面的小程序運行時原理來看，其性能相比原生是存在一定差距的，這主要由以下幾個方面造成：第一：邏輯層運行完整的 Rax + 通過模擬 DOM/BOM API 處理 VDOM 并生成 setData 數(shù)據(jù)，需要消耗更多的計算時間；第二，相比原生小程序需要傳遞更多 setData 數(shù)據(jù)，如果容器層數(shù)據(jù)序列化能力較弱，會大大增加數(shù)據(jù)傳輸耗時；第三，視圖層通過自定義組件遞歸動態(tài)生成視圖，而我們知道遞歸動作本身就是一個性能損耗點。此外，由于無法預(yù)先知曉用戶需要綁定的屬性和事件，自定義組件模板中只能將所有屬性和事件預(yù)先綁好，這導(dǎo)致小程序運行過程中會觸發(fā)很多無用的事件，進一步加重負(fù)擔(dān)。經(jīng)過我們的 benchmark 計算，在支付寶小程序平臺上，運行時小程序框架（包括 Rax/Taro/Remax 等）與原生小程序存在約 40% 的性能差距。

Rax 小程序運行時發(fā)布后，經(jīng)測試其性能相比其他運行時框架存在著較為明顯的差距，于是我們啟動了性能調(diào)優(yōu)的專項計劃。通過以下方面的重構(gòu)，成功將 Rax 小程序運行時小程序的性能拉升至業(yè)界領(lǐng)先水平，與 Taro/Remax 基本處于同一水平線。

• 更新數(shù)據(jù)精確化。在舊版本中，setData 的數(shù)據(jù)是全量更新的，雖然有 dom 子樹分割批量更新的設(shè)計，但是數(shù)據(jù)傳輸仍然存在大量冗余。重構(gòu)版本中，Rax 增加了節(jié)點渲染判斷，未掛載節(jié)點無須觸發(fā)更新；將所有更新收攏至頂層 root 節(jié)點統(tǒng)一批量處理， 并且通過精確計算數(shù)據(jù)更新的 path，實現(xiàn)局部更新。比如某次更新節(jié)點的 class 屬性時，setData 的數(shù)據(jù)可能是：

  {???"root.children.[0].children.[1].class":?"active"}復(fù)制代碼

• 內(nèi)置小程序組件無需維護其屬性列表，而是根據(jù)用戶傳參直接賦值。舊版本中，我們維護了所有內(nèi)置組件的屬性，在獲取屬性值的時候均需要調(diào)用 domNode.getAttribute，具有一定性能開銷。重構(gòu)版本 Rax 直接根據(jù)用戶傳參給屬性賦值，并將默認(rèn)值設(shè)置的操作移至視圖層 WXS/SJS 中處理。

• 更新 Decryption and thinking about Rax applet runtime solution 中的數(shù)據(jù)結(jié)構(gòu)。經(jīng)過梳理，Rax 移除了冗余的 tree 數(shù)據(jù)，重寫了 getaElementById 等 API；重構(gòu)了 attribute、classList 等類；使用了更符合場景需要的 Map/Set 等數(shù)據(jù)結(jié)構(gòu)，提升了整體的數(shù)據(jù)處理性能。

• 渲染模板優(yōu)化。在支付寶小程序中，Rax 使用 template 進行遞歸調(diào)用；在微信中，Rax 使用 template 調(diào)用 element 再調(diào)用 template 的形式以避免微信端遞歸調(diào)用 template 的層數(shù)限制。在模板中，我們盡量使用 template is 語法進行判斷，減少 a:if/wx:if 條件判斷，提升模板遞歸時的性能。

混合使用

無論是出于舊有業(yè)務(wù)的遷移，或者是出于性能考慮，Rax 小程序運行時中都存在著混合使用的需求。目前，Rax 已經(jīng)打通與小程序內(nèi)置組件、小程序自定義組件、小程序頁面、小程序插件混合使用的能力。這其中，使用小程序自定義組件是最為復(fù)雜的。

與小程序自定義組件混用

在 Rax 中使用小程序自定義組件，其引入路徑需要與 usingComponents 保持一致（例如 import CustomComp from '../components/CustomComp/index'）。 在編譯階段，Rax 工程使用 Babel 插件進行代碼掃描，檢測到 JSX 中使用的某個組件是小程序自定義組件（根據(jù)其引入路徑是否存在同名 axml 文件）時，會將其使用到的屬性和事件進行緩存，然后通過 webpack 插件動態(tài)生成至遞歸模板中。在運行時中的創(chuàng)建節(jié)點階段，通過查詢緩存判斷節(jié)點是否為自定義組件。若是自定義組件，則其渲染數(shù)據(jù)中會插入緩存中的屬性，并且綁定事件至該自定義組件實例。

與編譯時組件混用（雙引擎混合）

通過 Rax 小程序編譯時方案產(chǎn)出的組件，從使用形態(tài)上來說，可以直接視為小程序自定義組件。而 Rax 工程加強了運行時與編譯時的聯(lián)系，當(dāng)在 Rax 小程序運行時中使用編譯時組件 npm 包時，用戶無需引入組件的具體路徑，只需像使用普通組件時一樣引入，Rax 工程將自動根據(jù)該組件 package.json 中是否存在 miniappConfig 字段來判斷其是否為一個 Rax 多端組件，然后直接使用其編譯時的組件實現(xiàn)。

Future Optimization Direction

Rax is the only small program development solution in the industry that supports both compile-time and run-time engines. Its ability to mix dual engines can perfectly achieve a balance between performance and development efficiency. In the future, Rax will implement a more flexible dual-engine mixed use method, such as supporting the designation of a component to be compiled with the compile-time engine in a single project, providing higher flexibility for the business.

Summary

The above is the principle analysis of the Rax applet runtime solution. The run-time solution solves the syntax limitations inherent in the compile-time solution, but there are also obvious performance constraints. It can be said that at the current node of 2020, there is still no so-called silver bullet for mini program development. Perhaps the fusion of the Rax mini program dual engines will be an optimal solution within a relatively wide range. No one can tell how far mini programs that go against the standards can go. Developers will still have to face various problems for quite some time in the future. From the perspective of a small program development framework, I only hope that all developers can choose the most suitable framework for themselves and complete the development of small programs quickly and efficiently.

Related free learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of Decryption and thinking about Rax applet runtime solution. For more information, please follow other related articles on the PHP Chinese website!