Inside ReX Dev: Scalable Frontend Architecture and LowCode at Alibaba Hema

Background

Since joining Alibaba in 2015, the author has been exploring front‑end engineering, first leading the JUST system in B2B and later working on Hema's front‑end engineering and basic experience, culminating in the ReX Dev platform.

Hema Backend Technical Status

Hema's workbench is the core of its B‑side system, serving dozens of vertical business lines such as supply, stores, products, and logistics.

Backend Engineering Characteristics

Large page count : 6000+ pages, 3000+ active, demanding high development efficiency.

Page dispersion and patternization : many vertical lines lead to dispersed pages, enabling LowCode/NoCode opportunities.

Multiple application types : micro‑apps, multi‑page apps, monoliths, requiring extensible development processes.

These demands call for a high‑productivity, scalable development platform.

Product Positioning and Evolution Strategy

ReX Dev is positioned as a high‑productivity front‑end development platform for Hema, focusing solely on front‑end applications and emphasizing efficiency.

Challenges include growing technical debt and low developer satisfaction on repetitive, patternized pages.

Technical Layered Architecture

ReX Dev adopts a three‑layer architecture: a robust bottom layer, a flexible middle layer, and an efficient top layer.

Robust Bottom Layer

The core provides a stable metadata model and a flexible pipeline scheduler.

Metadata Architecture Design

Applications are abstracted into domain / product / app layers, with app depending only on domain to keep product changes flexible.

Pipeline Engine Design

The engine supports asynchronous task scheduling, customizable workflows, full‑link error capture, retries, and real‑time logs.

Pipeline State Machine

Each pipeline is a directed graph where nodes act like a finite state machine with asynchronous sub‑states.

async function runStageAction(pipeline, stage, payload) {
  // read context
  const context = await pipeline.readContext();

  // run action
  const result = await stage.runCurrentAction(context, payload);

  // write context
  await pipeline.saveContext(result.context);

  // schedule next action
  stage.scheduleNext(result.payload);
}

Context and Pipeline

Context shares persistent data across nodes, while pipelines use a pipe model to pass output of one node as input to the next.

Exception Auto Recovery

Node execution errors are handled by a stageError callback; scheduler failures are recovered via a DTS‑based periodic check.

Real‑time Logs

async function execute(stage, action, context, payload) {
  const logger = createRealtimeLogger();
  const executor = loadExecutor(logger);

  await logger.start();
  const result = await executor.execute(stage, context, payload);
  await logger.end();
  return result;
}

SPI Service Extension

ReX Dev defines service interfaces (SPI) that third‑party services implement, allowing non‑intrusive replacement of logic.

Service provider interface (SPI) is an API intended to be implemented or extended by a third party. It can be used to enable framework extension and replaceable components.

WebUI Extension

WebUI provides extension slots; concrete modules (FPC) fill those slots, similar to the earlier JUST WebUI.

Process Card Extension

Common cards such as CodeReview, Lint, security checks are abstracted into a unified model with standard events (e.g., gitcommit, build) and an SDK for triggering.

LowCode/ProCode Interconversion

Hema adopts a JSX‑AST LowCode approach, enabling 100% reversible conversion between ProCode and LowCode.

// @lowcode: 1.0 # enable strict mode
import React from 'react';
import styled from 'styled-components';
import { If, ForEach, observer } from '@aliffe/hippo-app';
import { Layout, SearchForm, Table } from '@alife/hippo';
import Model from './model';

const { Page, Content, Header, Section } = Layout;
const { Item } = SearchForm;

const StyleContainer = styled.div`
  height: 100%;
`;

function View({ $page, $model }) {
  return (
    <StyleContainer>
      <Page page={$page}>
        <Header>
          <If value={!$model.loading}>
            <HeaderDetail model={$model.detail} />
          </If>
        </Header>
        <Content>
          <Section>
            <SearchForm model={$model.section1.form} onSearch={$model.search}>
              <Item name="p1" title="条件1" component="input" />
              <Item name="p2" title="条件2" component="input" />
              <Item name="p3" title="条件3" component="input" />
            </SearchForm>
          </Section>
          <Section>
            <ForEach items={$model.data.list} keyName="key">
              {($item, i) => (
                <div className="list-item">
                  <div className="header">
                    <div className="title">{$item.title}</div>
                    <div className="extra">
                      <Button onClick={(v) => $model.show(v, $item)}>加载</Button>
                    </div>
                  </div>
                </div>
              )}
            </ForEach>
            <Pagination current={$model.page.pageNo} onChange={$model.changePage} />
          </Section>
        </Content>
      </Page>
    </StyleContainer>
  );
}

export default observer(Model)(View);

Application Constraints

Strong constraints on application structure to keep LowCode manageable.

Only specific high‑frequency scenarios are supported.

Strict mode enforces coding style, ensuring ProCode can still be transformed to LowCode.

Unified Node/Web Build Scheme

Both LowCode and ProCode share a webpack‑based build pipeline, with Nodebowl Runtime enabling webpack execution in the browser.

LowCode/ProCode Fusion Summary

Choose the solution that fits the scenario; JSX‑AST LowCode suits progressive development.

Define clear boundaries: use LowCode for high‑frequency, simple cases; ProCode for complex needs.

Provide templates and scaffolds to avoid building from scratch.

Reflection and Conclusion

Building a unified front‑end engineering platform requires layered design, community‑driven solutions, and a balance between product convergence and architectural flexibility. Continuous investment in robust foundations yields long‑term efficiency gains for front‑end teams.