DX Native Dynamic Development Mode Overview

DX (DinamicX) is a native dynamic solution widely used within Taobao and the Alibaba group, emphasizing performance and stability. This article series introduces the DX research and development model, revealing its origins, evolution, and current capabilities.

The DX system originated from the need for consistent and dynamic homepage experiences, evolving through multiple stages: homepage dynamic solution → basic link dynamic solution → group co-built dynamic solution → group mobile team standard native development model. As more business scenarios and developers adopt DX, its technology stack expanded from a client-side SDK to a comprehensive native development framework.

Key challenges in the past two years include intense competition driving a shift from a carrier‑ship strategy to an app‑matrix strategy, the rise of immersive experiences (live streaming, short video, AR/3D) demanding richer native capabilities, and the decreasing role of Taobao as a mere ordering tool, prompting a focus on content and community.

To address these challenges, DX upgraded its development model and user experience:

Provide out‑of‑the‑box high‑quality components (calendar, rich text, complex containers, page indicators) to reduce adaptation costs.

Continuously optimize the rendering pipeline for better baseline browsing and interaction performance.

Offer advanced performance tools for early detection, troubleshooting, and optimization of template issues.

DX adopts a layered development approach:

ProCode : For scenarios requiring strong customization and dynamic logic, developers use a professional IDE + Git workflow, enabling UI and logic debugging (event chain).

LowCode : For scenarios with weak customization and high reuse, developers use a visual builder to drag‑and‑drop views, configure data sources and rules, and benefit from an evolving component library.

The three pillars of ProCode are:

IDE

The new IDE (based on Katian, compatible with VSCode APIs) offers full project management, debugging, and extension capabilities beyond the previous web editor, dramatically improving multi‑person collaboration efficiency.

List Container

A powerful list container separates layout description (XML) from data, supporting nested containers, dynamic templates, slots, and reducing payload size. Example usage:

<RecyclerLayout
userId="recycler"
width="match_parent"
height="match_parent"
dataSource="@data{itemList}"
columnCount="2"
onPullToRefresh="@dxEventHandler{'refreshTest'}"
onEndReached="@dxEventHandler{'loadMoreTest'}"
>
<Template ... />
</RecyclerLayout>

The container is already deployed in many critical Taobao services, supporting complex nesting, interaction frameworks, and dynamic templates.

Event Chain

Event chains enable dynamic logic without redeployment. Developers define atomic actions and expressions in eventchain.json , with IDE support for intelligent completion, visualization, and debugging. At compile time, the JSON is transformed into binary and executed by an on‑device engine, ensuring performance and consistency.

Performance optimization focuses on three areas: asynchronous pipelines to reduce load time, high‑performance components (custom image and rich‑text rendering), and compute‑resource management for video/live‑stream scenarios, achieving significant CPU and memory savings.

Future directions for DX include standardization (aligning with industry DSLs), modernization (adopting declarative UI), and integration (cloud‑native development environments for seamless front‑back collaboration).

The DX team, responsible for the native development ecosystem across 70+ apps and billions of daily page views, invites interested developers to collaborate.