How Alipay’s Cube Engine Revolutionizes Dynamic Native Pages and Mini‑Programs

This article reviews the evolution, technical choices, architecture, and future roadmap of Alipay’s Cube rendering engine, which enables dynamic native pages and lightweight mini‑programs through a JavaScript‑and‑CSS‑based front‑end solution.

Alipay Experience Technology
Alipay Experience Technology
Alipay Experience Technology
How Alipay’s Cube Engine Revolutionizes Dynamic Native Pages and Mini‑Programs

Background

Alipay’s client has progressed through three stages of dynamic technology: a native+web hybrid model, an entity component model mapping HTML/CSS to native components, and finally a hybrid model combining entity components with partial rasterization, of which Cube is the product.

Technology Selection & Evolution

Cube emerged around 2016‑2017 to meet high‑frequency native page updates. The team prioritized independent development and business‑focused, restrained technology, choosing JavaScript as the logic language, a subset of CSS for UI description, and a mixed rendering mode of custom-drawn elements (text/img/div/scroller) plus native components.

JavaScript runs on QuickJS (instead of V8 for lower memory and load overhead), with an optional WebAssembly engine (wamr) for mixed JavaScript/AssemblyScript development. The team rejected adopting RN or Flutter codebases to retain control and reduce productization costs.

Current Status

Cube now powers two main product forms: Cube cards and Cube mini‑programs. Cube cards add region‑level dynamic capabilities to native pages, with simple expression‑based cards and more complex JavaScript‑enabled cards; they have served over 100 billion page views across various Alipay tabs.

Cube mini‑programs target IoT and TV screen scenarios, offering advantages in package size, startup speed, smooth scrolling, and memory usage, though they currently lack full CSS support and mature tooling.

Technical Architecture

Cube consists of two major modules: CubeKit, which interfaces with the JavaScript engine and abstracts platform differences, and CubeCore, a C++ rendering core.

Cube mini‑programs support the tinyApp‑dsl subset, using JSC/ V8 on mobile and QuickJS on IoT; Cube cards use a lightweight Vue‑based card‑dsl. Simple cards are rendered by parsing an AST, while complex cards allow custom JavaScript logic driven by QuickJS.

Both mobile and IoT share a common container code, with ongoing vertical integration to improve performance. On TV devices, Cube mini‑programs run at ~5.5 MB package size, 32 MB memory, and 3‑4 s cold start.

The team built an automated testing framework (KITE) inspired by browser WPT, enabling daily automated inspections of engine capabilities and supporting continuous upgrades without regressions.

Tooling is emphasized as a critical factor for developer adoption, covering debuggers, preview containers, logging, and low‑code platforms.

Review & Future Plans

After five years of challenges, Cube aims to expand into IoT operating systems and further TV screen deployments, while maintaining a business‑centric, technology‑restrained approach.

Explore running Cube cards on 32 MB/400 MHz RTOS devices.

Promote Cube mini‑programs on large‑screen TV platforms and investigate commercial models.

frontendDynamic UIRendering Enginemini-program
Alipay Experience Technology
Written by

Alipay Experience Technology

Exploring ultimate user experience and best engineering practices

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.