How Alibaba’s Frontend Team Scaled UI Reuse Across Industries with DomKey and Rax

Background

As industry business expands, demands increase but each sector operates independently, leading to low component reuse and high compatibility costs for multi‑platform (web/mini‑program) development.

Industry UI Standardization

To address duplicated design and development, the team normalizes UI specifications across selected industry channels, extracting high‑frequency modules that cover over 70% of functionality and abstracting them into reusable components.

However, strict UI standardization alone cannot double efficiency because different industries require personalized skins and dynamic theming.

DomKey Theming Mechanism

The team designed a DomKey mechanism that allows flexible configuration of styles, events, attributes, and content, enabling dynamic theme adjustments without CSS‑inline conflicts and reducing the burden of numerous component props.

Component‑Theme Separation Tool

By separating components from themes and building a visual theme generator (Weave_Net Component Configuration Center) on top of iceluna, developers can create personalized themes and publish them as npm packages.

Cross‑Platform Solution

The cross‑end solution is built on Rax, compiling Rax syntax into native code at build time. The team piloted this on over eight mini‑programs, documenting lessons learned in related articles.

UI Intelligence

Beyond UI, the team explored data‑driven component generation with the "Industry Cube" tool, decoupling data sources from material templates, and later introduced "QianJiBian" to match UI expressions to user attributes, aiming to boost click‑through rates.

Weave_Net Platform

To support reusable cross‑platform materials across Alibaba’s ecosystem, the Weave_Net platform was launched, serving industry, lightweight stores, and marketing developers.