Inside Rax’s Runtime Engine: Architecture, Rendering & Performance for Mini‑Programs

Review of Compile‑time Scheme

Rax’s compile‑time approach, similar to Taro v2.x, statically converts JSX into mini‑program template languages (WXML/AXML) and adds a lightweight runtime JS layer to bridge differences between mini‑program and React lifecycles, allowing developers to write familiar React DSL code.

Foundation of the Runtime Scheme

The runtime scheme, launched in March 2020, removes static compilation, eliminating syntax restrictions and enabling rendering directly at runtime. Data is passed from the logic layer to the view layer via the setData method, and the view layer triggers logic through events.

Mini‑programs separate logic and view layers; the logic layer uses setData to update the view, while the view layer communicates back via events. This closed architecture enhances security but prevents direct execution of web code.

Dynamic DOM creation is achieved through custom component self‑reference, allowing recursive templates to build arbitrary DOM trees based on data.

<view wx:if="{{r.tagName === 'view'}}" id="{{r.nodeId}}">
  <block wx:for="{{r.children}}" wx:key="nodeId">
    <element data="{{r: item}}" />
  </block>
</view>
<text wx:elif="{{r.tagName === 'text'}}">{{r.content}}</text>

When the logic layer sends data such as:

{
  "nodeId": "1",
  "tagName": "view",
  "children": [
    {"nodeId": "2", "tagName": "text", "content": "我是?"},
    {"nodeId": "3", "tagName": "text", "content": "rax"}
  ]
}

The resulting view renders as:

<view>
  <text>我是?</text>
  <text>rax</text>
</view>

This mechanism enables dynamic rendering based on setData payloads, forming the core of the runtime solution.

Basic Principles

The runtime builds on kbone, Alibaba’s solution for web‑mini‑program co‑existence. It simulates DOM/BOM APIs in the logic layer, maintains a virtual DOM tree, and converts it into setData payloads that the pre‑defined templates render. Core DOM operations (createElement, appendChild, etc.) map to corresponding data‑structure manipulations.

Rax’s driver design could have provided a dedicated mini‑program driver, but the team chose to simulate BOM/DOM directly, reusing the web driver‑dom implementation and preserving a web‑like development experience.

Event System

Rax uses the miniapp‑render library to mock DOM/BOM APIs. Each logical node inherits from EventTarget, receiving a unique nodeId. View‑layer components bind events (e.g., bindtap, bindtouchstart) using this nodeId. When an event fires, the system retrieves event.currentTarget.dataset.nodeId to locate the target node and invoke the bound handler.

Engineering Design

The runtime reuses the Webpack bundle generated for Rax Web. A plugin injects simulated window and document objects into the bundle, then wraps it in a fixed mini‑program skeleton. The app loads the bundle in app.js. Initially, multiple entry points produced an MPA‑like structure, but the current version consolidates everything into a single JS file, behaving as an SPA.

During page onLoad, a dedicated document instance is created, and the page’s render function mounts the root component via document.createElement and document.body.appendChild.

Performance Tuning

Runtime performance lags behind native mini‑programs due to full‑stack Rax execution, larger setData payloads, and recursive component rendering. Benchmarking on Alipay mini‑programs shows a ~40% performance gap versus native.

Optimizations include:

Precise setData updates: only changed nodes are sent, and updates are batched at the root with path‑based keys (e.g., {"root.children.[0].children.[1].class": "active"}).

Direct property assignment for built‑in components, removing the need for attribute lookups.

Refactored data structures in miniapp‑render (using Map/Set, simplifying tree handling).

Template optimizations: using template is syntax and reducing conditional checks to improve recursion performance on both Alipay and WeChat.

Mixed Usage

Rax supports mixing built‑in components, custom components, pages, and plugins. For custom components, the import path must match the usingComponents declaration. Babel scans JSX to detect custom components, caches their props/events, and generates recursive templates. At runtime, cached data determines rendering and event binding.

When using compile‑time components within the runtime, Rax checks the component’s package.json for a miniappConfig field to decide whether to load the compiled version automatically.

Future Optimization Directions

Rax aims to provide more flexible dual‑engine mixing, allowing per‑component selection of compile‑time or runtime rendering within a single project, further balancing performance and developer productivity.

Conclusion

Rax’s runtime scheme overcomes the syntax limitations of compile‑time approaches but introduces performance challenges. By continuously refining rendering, event handling, and engineering practices, Rax strives to offer a balanced, high‑performance solution for mini‑program development.