How Alibaba’s Tianma Platform Transforms Front‑End Page Building and Multi‑Terminal Rendering

Overview of the Building System

In the Internet technology field, "building" is a broad concept that started with personal WordPress sites, progressed through article‑type CMS systems, and later adopted UI frameworks like React and Vue, which introduced virtual DOM and data binding to simplify complex page construction.

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

Key Design Principles

Separate front‑end operations from operational workflows.

Avoid data pitfalls caused by templates.

Abstract page rendering.

These principles guided the creation of a unified building service (Tianma) that supports thousands of business units, millions of modules, and hundreds of thousands of pages.

Core Concepts and 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: a higher‑frequency data layer separate from page structure.

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

Building Process

The process consists of three steps that can be performed by operations without developer involvement:

Set page metadata (title, keywords, description).

Assemble the page by adding, removing, or repositioning modules.

Inject data for one or more modules.

Design of Core Materials

Flat Structure

Tianma simplifies the original grid‑based layout to a one‑dimensional, block‑style module list, making it more operation‑friendly and easier to map modules across terminals.

Cross‑Terminal Support

Modules are built once for the web and can be automatically rendered on desktop, Weex, mini‑programs, etc., using a unified DSL (Rax) that supports multi‑terminal output.

Standardized Data Development

Modules declare their required data schema (JSON Schema) and theme attributes, separating rendering logic from business data. Data standardization occurs in two stages: domain model standardization (backend) and view‑model standardization (frontend).

Module Development Guide

Define the required data format.

Prepare mock data.

Write a function that receives the mock data and returns the rendered result.

A typical Rax module example:

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: themeColor }}>
      {hidden !== 'true' ? <Text>欢迎使用天马模块！</Text> : null}
      <View className="keys">
        {items.map(element => (
          <Text>{element.key}</Text>
        ))}
      </View>
    </View>
  );
}

Dependency Management and Seed Mechanism

Each module is packaged separately to allow independent version upgrades without rebuilding all pages. To avoid duplicate loading, Tianma externalizes dependencies and describes them in a seed.json file, which the rendering service uses to compute a combo URI for efficient loading.

Example seed configuration (simplified):

{
  "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/" },
    "@ali/pmod-module-test": { "path": "//g.alicdn.com/pmod/module-test/0.0.9/" }
  }
}

The seed system also defines version coexistence rules (major versions can coexist, minor/patch versions are forward compatible) to keep bundle size under control.

Rendering Service and Multi‑Terminal Caching

Tianma provides a Node.js online rendering engine that consumes the building artifacts and produces HTML, Weex bundles, etc. The service caches module files from OSS and the computed dependency graph to achieve low latency. Separate caches are maintained per terminal to avoid re‑rendering on each request.

High‑performance measures include CDN‑backed combo loading, distributed rendering nodes (including overseas regions), and aggressive caching of both assets and dependency calculations.

Future Directions

Long‑term goals include merging the seed mechanism with community solutions like Webpack Module Federation, reducing the learning curve, and exploring fully dynamic client‑side compilation where modules are served directly from CDN without a build step.

Challenges for full client‑side compilation involve browser performance, network latency for remote file fetching, and package management complexity.

Conclusion

Tianma demonstrates a comprehensive front‑end building platform that balances modularity, cross‑terminal compatibility, data standardization, and performance. Its architecture offers valuable insights for large‑scale UI engineering and paves the way for future innovations in dynamic, data‑driven page construction.