Dynamic UI Solution “Mozi” in JD.com: Architecture, Features, and Implementation

Background: JD.com’s “UI dynamic” project aims to enable UI updates without full releases, addressing component bloat and rapid business needs.

Solution: The internal “Mozi” engine uses XML templates and Flexbox layout to provide dynamic updates, lightweight bundles, high performance, and cross‑platform support for Android and iOS.

Advantages: dynamic UI updates via template changes, lightweight XML (<100KB), performance optimizations (caching, flat view hierarchy, Yoga layout), and cross‑platform reuse.

Limitations: not for complex logic, fine‑grained animations, or component inter‑dependency.

Comparison: evaluated React Native, Flutter, and other vendor solutions; chose native XML + Flexbox for low learning cost and high performance.

Version evolution: 1.0 (basic integration), 2.0 (dynamic layout, event handling, conditional templates), 3.0 (relative layout, auto‑download, VirtualView replacement).

Architecture: MoziTemplateManager, DownloadManager, CacheManager, Parse, MoziLayout, YogaKit, and atomic components.

SDK: Mozi SDK extracts core engine for other JD apps, providing dynamic UI capability.

Integration: CMS delivers template mapping; front‑end decides dynamic vs native rendering.

Tools: template management platform, real‑time preview app, code snippets for XML layout, data binding expressions, event exposure handling.

Future: improve template authoring efficiency, auto‑convert Sketch designs, expand component library.

Example XML layout snippet:

<VHLayout orientation="V" layoutWidth="wrap_content" layoutHeight="wrap_content" borderRadius="12" padding="12" background="#ffffff" gravity="h_center">
<NText text="${floorTitle.floorName}" textSize="16" visibility="@{${floorTitle.floorName} ? visible : gone }" textColor="#333333" textStyle="bold" paddingBottom="14" layoutWidth="wrap_content" layoutHeight="wrap_content" />
<Grid layoutWidth="match_parent" layoutHeight="wrap_content" orientation="H" colCount="3" layoutMarginLeft="-15" layoutMarginRight="-15" itemHorizontalMargin="0" itemVerticalMargin="16" dataTag="${data}"/>
</VHLayout>