How Ant Cube’s ACT Revolutionizes Mobile Card Development

Technical Selection

Cube cards use a JS bridge approach; the DSL follows an HTML+JS+CSS format similar to Vue single‑file components. Because Node‑based CLI tools are lightweight, flexible, cross‑platform, and benefit from a rich ecosystem, the Cube card production tool is built with a Node CLI stack.

IDE vs CLI

While the CLI satisfies basic development and debugging needs, it lacks the interactive shortcuts, menus, and feedback mechanisms of a full IDE. Building a complete desktop IDE would require significant effort. By leveraging VSCode’s extensible plugin system, ACT adds VSCode‑based interactive features, balancing development investment with user experience.

Framework Design

ACT serves as the foundational auxiliary tool for Cube cards, handling compilation, preview, and debugging. It uses a client‑server (CS) communication model, exposing REST APIs and WebSocket connections from a local server to desktop editors, devices, and web debuggers, ensuring synchronized state across nodes.

In a CS setup, ACT can preview and debug cards on multiple devices simultaneously, even across remote collaborators, improving cross‑platform consistency and reducing compatibility testing costs.

Core Functions

ACT compiles DSL templates into runtime‑consumable DOM data, CSS styles, and JS logic. After compilation, it delivers the artifacts to the engine runtime and provides a Playground module for real‑device preview. The built‑in Devtool adds element, style, and JS breakpoint debugging capabilities.

Engineering

Card source consists of three parts: an .act.config.json file for project settings, a manifest.json for compilation and engine configuration, and a main.vue file containing layout, style, and logic.

.act.config.json
main.vue
manifest.json

Compilation

The DSL template includes <template>, <style>, and <script> sections. ACT transforms these into binary metadata using an intermediate CardAST structure, supporting ES import syntax and external style sources.

Preview

After compilation, ACT packages the output, serves it via a local KOA server, and streams it over LAN to client devices. The client’s Playground module simulates download, unpacking, and rendering, allowing developers to verify card behavior on real devices.

ACT also offers an "Alive" mode that watches file changes and provides live preview.

Debugging

ACT supports two debugging aspects: template node debugging via the Chrome DevTools Protocol (CDP) and JS breakpoint debugging. CDP integration enables element and style inspection, editing, overlay highlighting, and logging.

For JS debugging, ACT bridges the card engine’s JS runtime with a NodeVM environment, intercepting commands, routing them through VSCode’s debugger, and then returning results to the native side, thus emulating breakpoint debugging across multiple JS engines.

Feature Evolution

ACT has progressed to version 3.x, addressing three core questions: meeting basic card development needs, writing more reliable templates, and simplifying template authoring.

Runtime Phase

Early ACT 1.x focused on compilation, preview, and debugging to ensure cards run reliably on client devices.

Compilation Phase

ACT 2.x introduced CardLint, extending ESLint to validate template, CSS, JSON, and JS syntax, providing over 200 AST‑based rules to catch errors early and improve template reliability.

17:55:23 ACT INFO Executing LINT check
17:55:23 ACT WARN LINT error [19,17] ... selectorQuery may crash when node missing
... (additional lint warnings and errors) ...
ACT ERROR Compilation failed
ACTLintError: 4 errors, 1 warning

Encoding Phase

ACT 3.x adds a VSCode plugin that integrates CardLint feedback, CardMeta documentation, and code completion, creating the CardCode module to assist developers directly within the editor.

Next Steps

Future work will expand ACT’s capabilities to include runtime performance monitoring, automated inspections, coverage statistics, and broader quality assurance tools to support the ongoing evolution of Alipay’s card ecosystem.