How DX’s New IDE Transforms Mobile Template Development at Alibaba

DX (DinamicX) is a native dynamic solution widely used within Taobao and the Alibaba group, prized for its performance and stability. Although mentioned in external articles, DX has never been fully introduced, leaving its name mysterious. This series, "DX R&D Mode," lifts that veil and examines DX’s breakthroughs in performance over the past two years.

Background

As DX applications and teams grow in complexity and scope, maintaining DX’s core competitiveness and supporting team‑level collaborative development become increasingly critical. The previous DX development relied on a template platform built on the open‑source Monaco editor (the engine behind VS Code). While it met early business needs, its editing experience, debugging, and performance guarantees increasingly fell short of developer expectations.

Full Development‑Lifecycle Support

From a DX business perspective, a one‑stop development environment is needed to cover creation, development, compilation, debugging, and publishing throughout the entire R&D cycle.

Technical Solution Selection & Design

We require an IDE rather than a simple editor. VS Code offers a rich API for extensions and a vast plugin ecosystem, making it an ideal base. To customize further, we adopt the OpenSumi framework—an Alibaba‑Ant Financial open‑source IDE framework that is 100% compatible with VS Code APIs while extending many APIs and providing rich UI customization.

OpenSumi Custom Extensions

The diagram below illustrates OpenSumi’s support for custom views.

Design Overview

The IDE is organized into several layers:

IDE Container (CLI) – Built on OpenSumi, compatible with VS Code extensions, forming the ide‑framework. Customizations for login state, front‑end workbench, etc., are packaged into the final O2 product.

Underlying Capabilities – Node.js‑based CLI supports template creation, compilation, publishing, and provides generic debugging and static file services (utbd‑devtools) with plugin interaction via DaemonInterface.

Basic Services (Template Development) – Public services unrelated to template development, such as debugging protocols, data storage, singleton management, Git service, and data‑tracking.

DSL Analysis – Parses XML (main.xml), JSON (event_chain.json, mock.json), and expression DSL (a TypeScript‑like subset) using ANTLR4‑generated lexer/parser to build an AST. Combined with VS Code LSP APIs, this enables code completion, hover docs, diagnostics, go‑to definition, formatting, folding, and highlighting.

Feature Development & R&D Pattern Assembly

The R&D pattern consists of a workflow divided into stages (preparation, creation, editing, debugging, testing, release), each containing multiple features (e.g., the creation stage includes project and template creation). Features are assembled into a DevelopPattern.

IDE Functions & Usage

Creation Stage

Set GitLab token (once) for automatic project creation.

Click the create‑project entry.

Select the DX R&D mode.

Configure parameters and create the project.

Template Creation & Cloning

Create a new template by clicking the entry and configuring parameters.

Clone an existing template by right‑clicking its cola.build and selecting "Clone Template".

Edit Stage

Import Template – Search by keyword or import by app + biz, automatically adding all related templates.

Dependency Management – Visual editing of the dependencies field in cola.build, supporting batch version changes.

Code Assistance – Completion, hover, diagnostics, go‑to definition, formatting, folding, and highlighting for XML, JSON, and expressions.

Event‑Chain Visualization – Graphical view of atomic ability calls and transitions, supporting explicit and implicit (expression) links.

Debug Stage

Preview – Scan QR code to connect debugging service; changes compile and push to device in real time, or generate a QR code for offline preview.

View Inspection – Highlight mismatched nodes or attributes; clicking a view record opens the corresponding main.xml and highlights the device view.

Expression Replay – Replay the execution sequence of an expression, inspecting context for each node.

Event‑Chain Replay – Replay the execution order of an event chain, showing input/output and context.

Device Management – Deep integration with iOS simulators on macOS for testing without physical devices.

Release Stage

Select template, branch, and fill release description.

Configure options such as version conflict check, pre‑commit, skip Git check, and pre‑release.

Publish and receive a popup summarizing version numbers and CDN URLs.

Template History & Batch Embedding

View template URL, download ZIP, preview, release info, source code, diff, rollback, and share diff links.

Batch embed dual‑platform artifacts and generate presetTemplateInfos.json for Android.

IDE Evolution Thoughts

Direct Benefits – Project‑level support, GitLab integration, batch template management, full code‑intelligence experience, improved preview, comprehensive debugging toolbox, and simulator integration.

Potential Gains – Extendable R&D patterns, metrics for development efficiency, and tighter integration with CoE teams.

Usage Costs – Installation of O2 and DX IDE plugins, migration of existing templates via keyword or app + biz import.

Technical Iteration

Complete existing design: Android SDK view inspection, performance Linter, runtime metrics, benchmark, and compatibility with device services.

Explore remote IDE deployment, web‑based access, and shared workspaces.

Investigate end‑to‑end cloud‑native development, combining DX DSL with declarative UI frameworks (Jetpack Compose, SwiftUI, Flutter, ArkUI).

<ImageView
  width="match_content"
  height="14"
  scaleType="fitXY"
  imageUrl="@{data.picUrl}"
  visibility="@{data.picUrl?'visible':'gone'}"
/>