Inside Ant Financial’s Cube Card: Architecture, Performance, and Future Roadmap

Cube Card Overview

Cube Card is an internally developed cross‑platform dynamic card solution at Ant Financial, designed to deliver region‑level dynamic content and simple business logic within native pages, improving both development and operation efficiency.

Key Characteristics

Cross‑platform Consistency

One codebase

Aligned visual effects

Dynamic

UI structure & style dynamism

Business logic dynamism

High Performance

Near‑native speed

Optimized memory usage

Performance Details

Cube Card aims for native‑like performance. It removes complex CSS features and limits JavaScript capabilities, using QuickJS as the script engine with additional optimizations such as offline atom compilation and asynchronous GC. A WAMR co‑processor enables mixed JavaScript and AssemblyScript development for hotspot functions.

Memory usage is kept low by fine‑grained capability grading, allowing developers to configure runtime memory consumption. The architecture includes a JSEngine, CardEngine, RenderEngine, and Platform, most of which are implemented in C++.

Production & Workflow

Developers use a dedicated toolchain to compile, log, and preview cards. Vue serves as the DSL for card templates, supporting JavaScript and CSS editing. After local development, cards are uploaded via a management backend, enabling version control and dynamic updates without app releases.

Core System Architecture

The system consists of:

JSEngine : Executes card JavaScript and monitors data changes, built on QuickJS with a lightweight reactive framework (JSFM).

CardEngine : Parses and binds data, renders logic, constructs DOM commands, manages JSAPI, and handles native event communication.

RenderEngine : Performs layout calculation, style parsing, layer composition, self‑drawing components, and handles gestures and animations.

Platform : Provides atomic view wrappers, Canvas API, third‑party component protocols, and animation APIs.

Thread Model

Cube Card uses a business thread for data initialization and an engine thread shared across all lifecycle stages, including Bridge, Render, Paint, and UI main threads. Bridge handles JavaScript execution; Render computes layout and builds render trees; Paint performs rasterization, either on the main thread or in a thread pool for asynchronous rendering; UI main thread manages gestures and UI updates.

Data Model

Three primary trees represent the data flow:

NodeTree : Original DOM‑like node tree.

RenderTree : Transformed tree used during the rendering phase, allowing flexible adjustments.

LayerTree : Hierarchical layering enabling concurrent rendering of independent layers.

PaintTree : Temporary copy of RenderTree for rasterization, optimized to skip fully covered nodes.

High‑Performance List Rendering

For list scenarios, Cube Card supports asynchronous rendering and multi‑threaded concurrency, ensuring smooth scrolling even on mid‑range devices without noticeable white‑screen artifacts.

Native Technology Optimizations

Cube Card constrains CSS capabilities while striving to cover common use cases. It introduces a Layer container concept (e.g., CALayer on iOS) to separate content and logic layers, improving shadow rendering and clipping. Gesture handling is refactored to overcome platform limitations, especially for third‑party components. Rasterization supports both command‑based and bitmap modes, with ongoing work to replace platform Canvas APIs with Skia for better performance. Same‑layer rendering isolates third‑party components into independent layers, allowing efficient updates and reducing memory overhead.

Business Status and Future Plans

Cube Card currently powers over 20 business scenarios such as wallet home, securities, card pack, and travel, generating more than 100 billion daily page views. Future focus includes expanding within the wallet ecosystem, improving developer tooling, reducing package size, and lowering memory consumption. A commercial extension is planned for release as part of MPAAS by year‑end, and a new IoT‑oriented stack will adapt Cube Card concepts for RTOS devices, offering lightweight UI with routing capabilities.

Preview

Stay tuned for the next article in the Cube technology series for further insights.