How Alibaba’s Tianma Build System Redefines Front‑End Module Development

In the Internet technology field, "building" is a broad concept that started with personal WordPress sites, evolved through article‑type CMS systems, and was dramatically simplified by frameworks like React and Vue, which introduced virtual DOM and data binding.

In 2008, Taobao launched the first Template Management System (TMS), whose design influenced the next decade of building architecture.

Key Design Decisions

Separate front‑end operations from operational workflows.

Data‑driven template creation based on schemas.

Abstract page rendering.

As business strategies shifted toward wireless and personalized experiences, the building system adapted, creating layered services that allow each BU to build domain‑specific pages on top of a unified service.

Tianma integrated over ten BU’s building support, delivering tens of thousands of modules, millions of pages, and serving more than 30,000 Alibaba operators and hundreds of thousands of merchants.

Terminology

Module – the smallest unit a non‑technical user can assemble into a page.

Page building – the process of combining modules into a page.

Data injection – frequent data updates that are separated from page layout.

Terminal – the target runtime environment (PC, mobile, TV, mini‑program, SSR, etc.).

Design Principles

Flat structure – a one‑dimensional module list that is easy for operators to manage.

Cross‑terminal – the same module can be rendered on multiple devices.

Standard‑data‑oriented development – modules describe the data they need using JSON‑Schema‑like definitions.

The flat structure replaces complex grid layouts with a simple vertical list, while still allowing developers to render hierarchical UI when needed.

Cross‑Terminal Strategy

Instead of relying on responsive design, Tianma treats each terminal as a separate target, providing dedicated navigation modules for desktop and mobile, and allowing developers to write two sets of logic when necessary.

Modules are built with Rax, a unified DSL that can output Web, Weex, and mini‑program bundles from a single source.

Standard Data Development

Modules declare the shape of their input data (type, properties, etc.) in a schema.json file. This enables front‑end developers to work with abstract data models, while back‑end teams maintain domain‑level data standards. The process often involves two rounds of standardization: domain model → view model.

{
  "type": "object",
  "properties": {
    "$attr": { "type": "object", "properties": { "hidden": { "type": "boolean" } } },
    "$theme": { "type": "object", "properties": { "themeColor": { "type": "string" } } },
    "items": { "type": "array", "items": { "type": "object", "properties": { "itemId": { "type": "string" } } } }
  }
}

Writing a Module

A typical Rax module defines the required data format, provides mock data, and implements a render function that returns JSX based on the data.

import { createElement } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

export default function Mod(props) {
  const defaultTheme = { themeColor: '#fff' };
  const defaultAttr = { hidden: false };
  const { items, $theme = defaultTheme, $attr = defaultAttr } = props.data;
  return (
    <View className="mod" style={{ backgroundColor: $theme.themeColor }}>
      {hidden !== 'true' ? <Text>Welcome to Tianma Module!</Text> : null}
      <View className="keys">
        {items.map(element => (
          <Text key={element.key}>{element.key}</Text>
        ))}
      </View>
    </View>
  );
}

Module Development Workflow

Developing a module is similar to publishing an npm package: developers use scaffolding tools, local debugging, preview, schema editing, and CI pipelines for code scanning and resource storage.

Dependency De‑Duplication (seed mechanism)

Each module is packaged separately to allow on‑the‑fly version upgrades without rebuilding all pages. To avoid loading duplicate dependencies, Tianma externalizes common libraries and describes them in a seed.json file, which the loader uses to resolve a minimal set of assets.

{
  "modules": {
    "@ali/pmod-ark-test/index": {
      "requires": ["@ali/rax-pkg-rax/index", "@ali/rax-pkg-rax-view/index", "@ali/rax-pkg-rax-text/index"]
    }
  },
  "packages": {
    "@ali/rax-pkg-rax": { "path": "//g.alicdn.com/rax-pkg/rax/1.0.15/" },
    "@ali/rax-pkg-rax-view": { "path": "//g.alicdn.com/rax-pkg/rax-view/1.0.1/" },
    "@ali/rax-pkg-rax-text": { "path": "//g.alicdn.com/rax-pkg/rax-text/1.0.2/" }
  }
}

The seed system also defines version coexistence rules, allowing major versions to coexist while minor versions are automatically upgraded when compatible.

Rendering Service

Tianma provides a Node.js‑based online rendering engine that consumes the built artifacts, resolves dependencies, and generates HTML, Weex bundles, or SSR output. It caches module files from OSS and the computed dependency graph to keep latency low, and is deployed globally (including Asia‑Europe‑America) with OSS sync optimizations.

Multi‑Terminal Caching

Each terminal has its own cache copy, enabling fast delivery of terminal‑specific pages while sharing the same underlying modules.

Future Outlook

Long‑term goals include merging the seed mechanism with mainstream tools like webpack Module Federation, improving offline builds, and exploring a fully dynamic approach where modules are served directly from CDN without pre‑bundling, while addressing challenges such as browser compilation cost, network latency, and package management complexity.