Choosing the Right Mini‑Program Framework: Native, Progressive, Compile‑time vs Runtime

The Birth of Mini Programs

WeChat launched mini‑programs four years ago, initially offering only a proprietary native syntax. Over time, a rich ecosystem of frameworks such as Rax, Taro and uni‑app emerged to satisfy the strong demand for “one code, multiple platforms”.

Imitators and the “One‑Code‑Many‑Ends” Trend

Other giants – Alipay, Baidu, Taobao, 360 and quick‑apps – followed suit, often copying WeChat’s architecture. Taobao’s mini‑program uniquely supports both AXML and SFC (Vue‑style) syntax, while quick‑apps introduce a slightly altered Vue‑like standard.

Choosing a Mini‑Program Framework

Native Syntax and Progressive Enhancement Frameworks

Contrary to the belief that native syntax is obsolete, it remains a viable choice in 2020. Developers can use componentisation, state‑management libraries, CLI tooling, and even TypeScript while staying within the native mini‑program model.

Progressive enhancement frameworks build on native syntax and add features such as computed properties or direct state mutation (e.g., this.store.data.logs[0] = 'Changed'). The open‑source omix framework from Tencent illustrates this approach:

create.Page(store, {
  // declare dependencies
  use: ['logs'],
  computed: {
    logsLength() {
      return this.logs.length;
    }
  },
  onLoad: function () {
    this.store.data.logs = (wx.getStorageSync('logs') || []).map(log => util.formatTime(new Date(log)));
    setTimeout(() => {
      this.store.data.logs[0] = 'Changed!';
    }, 1000);
  }
});

The view layer uses standard <view> and <text> tags with data binding.

Compile‑time (Conversion) Frameworks

Compile‑time solutions such as Rax or Taro 2.0 transform React‑like JSX into native mini‑program code. Example:

import { createElement, useEffect, useState } from 'rax';
import View from 'rax‑view';
export default function Home() {
  const [name, setName] = useState('world');
  useEffect(() => { console.log('Here is effect.'); }, []);
  return <View>Hello {name}</View>;
}

After compilation the logic layer becomes plain JavaScript that calls _updateData, while the view layer renders the corresponding <view> element.

Low runtime performance overhead

Clear target code – what you write is what you get

Opportunities for runtime and compile‑time optimisations

However, the approach imposes strict syntax limits; developers must adhere to mini‑program conventions such as one component per file.

Runtime Frameworks

Runtime frameworks (Rax runtime, Remax, Taro Next) impose virtually no syntax constraints, allowing full use of familiar React patterns, higher‑order components, and portals. They simulate a virtual DOM, propagate a component tree from the logic layer to the view layer, and map events via nodeId. This flexibility comes at the cost of larger data transfer and higher runtime overhead.

Combining Compile‑time and Runtime Approaches

By leveraging both models, performance‑critical modules can be built with compile‑time tools and then imported as npm packages into a runtime project, achieving a balance between unrestricted syntax and optimal execution.

// Compile‑time countdown component
import { createElement } from 'rax';
import View from 'rax‑view';
function CountDown(props) {
  // ...logic...
  return <View>{day}:{hours}:{minutes}:{seconds}</View>;
}
export default CountDown;

// Runtime usage
import CountDown from 'rax‑taobao‑countdown';
function Home() {
  return <CountDown now={Date.now()} />;
}

Conclusion

When selecting a mini‑program framework in 2020, developers should weigh the trade‑offs between native syntax, progressive enhancement, compile‑time conversion and runtime flexibility. The optimal choice depends on business requirements, performance constraints, and the desired level of ecosystem integration.