How DX Powers Alibaba’s Native Mobile Apps: Architecture, Tools, and Performance

Origin and Development of DX

DX (DinamicX) is a native dynamic solution originally created to solve consistency and dynamism between business and client sides on the Taobao homepage. It has evolved through multiple upgrades, progressing from a homepage dynamic scheme to a basic link dynamic scheme, then to a group‑wide co‑construction scheme, and finally to the group’s standard native development model.

Taobao’s Technical Choices

Taobao divides its business into three major categories: core domain, guide domain, and open domain. Different scenarios have distinct requirements for performance, stability, and delivery efficiency, so there is no single “silver bullet”; the optimal solution is chosen per target scenario.

Challenges Faced in the Past Two Years

Intensified competition and a shift from a “carrier‑ship” strategy to an app‑matrix strategy, raising delivery volume and efficiency demands.

The rise of live streaming, short video, AR, and 3D technologies, making immersive and rich interactions more prominent on mobile.

Higher shopping efficiency leading to reduced user visit time; Taobao is transitioning from a traffic source to a closed‑loop e‑commerce platform, requiring strong content and community capabilities.

These business backgrounds drive the need for both R&D model upgrades and experience upgrades.

R&D Model Upgrade

Two main problems were identified:

The DX technical system was incomplete before 2019, consisting only of a client‑side SDK and a component platform. Rapid business growth exposed gaps, causing high integration costs and low reuse.

The development model was too single‑track; emerging immersive experiences required richer interaction, which the previous build‑based approach could not support efficiently.

Experience Upgrade

To improve user experience, DX provides:

Out‑of‑the‑box high‑quality standardized components (e.g., calendar, rich text, complex nested containers, page indicators) that reduce adaptation costs for fine‑grained designs such as Dark Mode or large‑font support.

Optimized rendering pipelines for better performance on diverse devices, especially low‑end hardware.

Enhanced performance tools that enable early detection, troubleshooting, and optimization of template performance issues.

Thoughts on ProCode and LowCode

For scenarios demanding high customization and dynamic logic, ProCode uses a powerful DX IDE + Git workflow for multi‑person collaboration, UI and logic debugging, and event‑chain support. For scenarios with weak customization and high reuse, LowCode offers a visual builder that generates views and layouts by dragging components and configuring data sources.

ProCode “Three Pillars”

The three essential components of ProCode are IDE, List Container, and Event Chain.

IDE

The IDE extends the previous web editor (Monaco) with full project management, file system, code context, and debugging capabilities, running locally to provide a complete development lifecycle.

List Container

To decouple layout from data, DX introduces a new List Container that describes layout in XML while keeping data pure. Example usage:

<RecyclerLayout userId="recycler" width="match_parent" height="match_parent" dataSource="@data{itemList}" backgroundColor="@triple{@getEngineStorage{backgroundColor}, @getEngineStorage{backgroundColor}, '#ffffff'}" columnCount="2" columnGap="4" isOpenPullToRefresh="True" refreshPullText="下拉即可刷新..." refreshReleaseText="释放即可刷新..." refreshLoadingText="加载中..." loadMoreFailText="加载失败" loadMoreLoadingText="加载中..." loadMoreNoMoreDataText="到底了" onPullToRefresh="@dxEventHandler{'refreshTest'}" onEndReached="@dxEventHandler{'loadMoreTest'}">
    <Template if="@subdata{span}" sticky="True" colspan="2" name="aa">
        <TextView width="match_parent" height="100" text="@data{text}" textSize="15" backgroundColor="#FFFF55" borderColor="#FF9911" borderWidth="2"/>
    </Template>
    <Template if="@subdata{recyclerInsertItems}" name="recycler_sub_template1" version="2"/>
</RecyclerLayout>

The List Container now supports nested containers, dynamic templates, slots, and more.

Event Chain

Event Chain enables dynamic logic beyond static expressions. Developers define atomic capabilities and expressions in an eventchain.json file, with IDE providing intelligent assistance and visual playback. At compile time, the JSON is turned into binary and executed by an on‑device engine, ensuring performance and consistency.

Thoughts and Practices on Performance Optimization

DX’s rendering pipeline, built on a Platform‑First approach, improves native rendering performance. Major time consumption lies in load and render phases; DX mitigates this by asynchronous pipelines, asynchronous drawing, and resource management.

High‑performance components such as optimized image handling and a self‑drawn rich‑text component reduce memory usage (iOS ‑ 70%, Android ‑ 8%) and improve speed (iOS ‑ 20%, Android ‑ 10%).

Resource control frameworks lower CPU usage for multi‑video scenarios (iOS ‑ 66%, Android ‑ 25%).

Performance tools now provide white‑box visibility into rendering stages, pinpointing whether bottlenecks originate from DX internals or business code, and offer automated analysis and optimization suggestions.

Future Outlook

Standardization: Move DX’s DSL toward industry‑wide standards to lower entry barriers.

Modernization: Transition from imperative UI description to declarative approaches; explore cloud‑based IDE deployment for zero‑install, shared workspaces.

Integration: Achieve end‑to‑end integration of client and server code, enabling seamless serverless development and unified deployment pipelines.

These goals present technical challenges, and the DX team invites interested engineers to collaborate and help shape the future of client development.