RAX Explained: The Lightweight React‑Like Framework Powering Taobao’s Double‑Promotion

RAX

RAX is a cross‑container JavaScript framework built on a React‑like approach, supporting Browser, WEEX, and Node.js. It is lightweight (gzip size ~8 KB) and offers superior server‑side rendering performance (≈1553 ops/s), making it the core framework for Taobao’s double‑promotion native pages.

Components and Modules

Provided Capabilities

On top of the core framework, RAX supplies a basic API that simulates browser behavior, simple tag Components, and the UI component library RAXUI. Developers use Components to build basic UI elements, which together form the reusable RAXUI components. The rax-page module handles page rendering, while rax-page and PI orchestrate data requests, caching, and rendering order.

RAXUI Components

RAXUI is the upper‑layer component ecosystem, offering commonly used UI pieces such as sliders, icons, tab headers, and video players. By combining components like rax-picture, rax-slider, rax-tabheader, and rax-gotop, developers can construct typical long‑list pages with elevator navigation.

Impact on Developers

Developing a Taobao double‑promotion module differs from previous years: besides using React‑style syntax, developers must follow a set of conventions for module and page rendering (PI). Modules are classified as app‑level (outside the scrolling container) or page‑level (inside the scrolling container). Page‑level modules must adhere to rules such as moduleRenderMode for type, getModuleRowHeight for height, and prop‑based utility methods.

class Module extends Component {
  // Module row height
  static getModuleRowHeight = (attrs) => {
    return 100;
  };
  // Infinite repeat mode
  static moduleRenderMode = 'repeat';

  static contextTypes = {
    page: PropTypes.object
  };

  componentWillMount() {
    let page = this.context.page;
    if (page && this.props.isFirstRepeatModule) {
      let moduleName = this.props.moduleName;
      // Simulate async data request
      setTimeout(() => {
        // Reset module data
        this.props.setDataSource(['Async Data 1', 'Async Data 2']);
      }, 3000);
    }
  }

  render() {
    return (<View>data : {this.props.data}</View>);
  }
}

General Rendering Logic for Double‑Promotion Pages

The page core rendering relies on rax-page, which smooths style differences across containers, handles page‑level event communication, implements the scrolling container (Block), renders modules, optimizes performance, and provides common analytics and utilities.

Two concepts are introduced:

Page : the outer container that normalizes styles and manages page‑level events.

Block : a full‑screen scrolling container that hosts all page‑level modules and is the primary target for rendering optimizations.

WEEX rendering uses native list and cell tags, recycling off‑screen cells to limit DOM size. It prioritizes first‑screen rendering, then lazily renders non‑visible modules, enabling smooth scrolling and fast first‑screen display.

In contrast, H5 rendering adopts a placeholder container strategy: non‑first‑screen modules initially render only a container matching the real height. When the container appears in the viewport, it is replaced by the actual module, reducing node count and improving elevator navigation performance.

Long List Rendering in Double‑Promotion

Repeat‑type modules contain many identical rows and can load infinitely. Challenges include cell performance on WEEX and handling bottom‑reach events for multiple infinite lists.

The solution leverages WEEX’s appear event on elements inside the Block. When a placeholder cell becomes visible, it is replaced with a real module that fetches its data and notifies the Block, which then renders the actual repeat data.

Conclusion

RAX successfully met Taobao’s double‑promotion demands, delivering excellent native performance, stability, and scalability. The experience gained will be propagated to other business scenarios, and RAX will continue to evolve and expand its usage.