Evolution and Architecture of the Daily Must‑Grab Mini‑Program Order System

In the digital era, e‑commerce platforms expand beyond the Taobao app. The “Daily Must‑Grab” mini‑program provides a Taobao‑like shopping experience on non‑Taobao apps such as Alipay and Kuai Qu.

Background

The mini‑program offers core e‑commerce capabilities (marketing, search, transaction, fulfillment, customer service) built on the Taobao app’s capability base.

Order Flow

Orders rely on the Taobao transaction foundation, establishing a dedicated mini‑program order pipeline.

Product Architecture

The product mirrors Taobao’s core functions while adding special scenarios such as member purchase, Huabei purchase, and merchant points purchase.

1.0 – DX Solution

DX (DynamicX) uses XML‑like UI definitions that are compiled into a JSON component tree. The mini‑program fetches this tree at runtime and renders it by mapping DX styles, data, and events to native components.

Example DX component:

height="46np"
  width="match_parent"
text="测试"
  placeholder="这是一个文本"
  onAppear="@appearExpose{@data{subSection.home.subSection.searchBox}}" />

Corresponding mini‑program implementation:

Component({
  methods: {
    triggerChange(e) {
      this.dinamicXEventHandler({
        type: 'onChange',
        value: deepGet(e, 'detail.value')
      });
    },
    onChange(propValue) { this.events.onChange = propValue; },
    text(propValue) { this.setData({ value: propValue }); },
    placeholder(propValue) { this.setData({ placeholder: propValue }); },
    textColor(propValue) {
      this.setStyles({ color: Dinamic.colorParser(propValue) });
    }
  }
})

DX’s runtime parsing introduces extra glue code and performance overhead, prompting a reconsideration.

2.0 – Rax Solution

Rax was adopted for its cross‑mini‑program capability and familiar React‑like syntax. Compared with DX, Rax offers a unified IDE experience and an application‑level architecture.

Feature

DX Mini‑program

Rax Mini‑program

Cross‑platform support

No

Yes

DSL familiarity

DX‑specific

React‑like

IDE integration

No

Yes

Solution type

View‑layer (runtime rendering)

App‑layer (compiled to mini‑program)

Compile vs runtime

Runtime

Runtime (official recommendation)

Rax improves development speed but suffers from large bundle size (~600 KB vs 200 KB native) and limited support for newer Alipay mini‑program features, as Rax is no longer actively maintained.

3.0 – Native Mini‑program Solution

Given the constraints, the team migrated to a pure native solution built on the “Ao Chuang” protocol, which standardizes rendering, async updates, and submission across front‑ and back‑end.

Architecture layers:

Ao Chuang schema construction layer – defines page layout and model.

Backend service layer – assembles business data according to the schema.

Mini‑program page layer – renders the schema via four modules: rendering logic, service module, business‑logic module, and view module.

The rendering SDK provides a Context API for protocol operations, state management, and logging.

Key challenges addressed:

Performance: package size reduced by 66 % and launch time improved by 38 % on iPhone 14.

Async race conditions in member‑purchase scenarios, solved by sequencing the points‑query after the main async response.

Extensibility: ability‑packs register custom components and business logic, allowing plug‑in functionality without breaking the protocol.

Future work includes managing execution order of multiple ability‑packs and supporting rapid plug‑in of new platform‑specific features.