MorJS: Converting Mini‑Program Code to Web Applications – Architecture and Implementation

Ele.me operates three main product forms: Web (React/Rax), native apps (Flutter, Weex, etc.), and mini‑programs (Mor framework). These three are developed, maintained, and deployed separately, leading to significant version gaps, especially because app and mini‑program development receives far more resources than Web.

The version divergence causes user complaints such as missing features, inconsistent entry points, poor experience, and stability issues, which affect brand perception and order conversion.

To address this, the team explored existing cross‑platform mini‑program frameworks (Taro, uni‑app, Rax, Remax, Chameleon, Mpvue) but found they still rely on React/Vue DSLs. The goal became to keep the mini‑program DSL (Alipay/WeChat) as the source and directly transform it into a Web product.

The solution is a self‑developed tool that converts Alipay mini‑program code to a React application. The approach consists of two layers:

Compilation layer: Parses and transforms each file type (AXML → JSX, ACSS → CSS, JS/SJS → React logic) using tools like xml2js, postcss, and custom plugins. It handles template conversion, style unit conversion (rpx → rem), tag renaming, style isolation, and merges configuration into React components.

Runtime layer: Provides three packages – runtime (React base class aligning mini‑program lifecycles), components (Web Components built with lit‑element to emulate mini‑program UI components), and api (implementation of Alipay my.* APIs using DOM/BOM). This layer supplies lifecycle mapping, event handling, data binding, and API shims.

After compilation, a complete React codebase is generated, and the runtime packages enable the resulting Web app to behave like the original mini‑program.

The solution was first used as an internal tool, reducing development and maintenance effort by over 30%. It was later integrated into the Mor framework and open‑sourced, empowering many teams within Ele.me.

MorJS thus bridges the gap between mini‑program and Web development, allowing developers to focus on product features while the tool handles cross‑platform differences.