DX Development Mode: Architecture, Design, and IDE Features for Mobile Native Development

DX (DinamicX) is a native dynamic solution widely used within Alibaba’s ecosystem, especially Taobao, to improve performance and stability of mobile applications.

The article introduces the DX research and development model, covering its background, goals, and the need for a one‑stop development environment that supports the entire lifecycle from creation, development, compilation, debugging, to release.

DX adopts an IDE built on the OpenSumi framework, which is compatible with the VSCode ecosystem while extending its APIs. This IDE provides full‑cycle support, including project management, code history, debugging, and integration with tools such as Swift, Kotlin, and Faas.

Key design components include:

IDE container (CLI) for creating projects, templates, and managing builds.

Base services for debugging protocols, data persistence, Git integration, and analytics.

Template development services for handling basic components and dependencies.

The IDE offers extensive code intelligence for DX DSL files (XML layouts, event_chain.json, mock.json, and expressions). Features include code completion, hover documentation, diagnostics, go‑to definition, formatting, folding, and syntax highlighting.

Advanced tooling includes:

View inspection that links UI elements to source code.

Expression playback for tracing expression evaluation.

Event‑chain playback for visualizing atomic ability execution.

Debugging is facilitated through QR‑code scanning to connect devices, real‑time preview of templates, and command‑palette shortcuts for switching preview templates.

Publishing workflows allow developers to select templates, branches, and configure options such as version conflict checks, pre‑submission, and pre‑release. The system generates release tags, CDN URLs, and provides history queries with diff and rollback capabilities.

Future directions aim to expand DX to more scenarios and teams, improve Android view inspection, add performance monitoring, enhance compatibility with device services, and explore integration with declarative UI frameworks (Jetpack Compose, SwiftUI, Flutter, ArkUI).

Overall, the DX IDE transforms the traditional template platform into an engineering‑focused environment, delivering better collaboration, version control, batch operations, and comprehensive debugging tools for mobile developers.

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