How ABF’s Low‑Code Building Center Boosts Mid‑Backend UI Development

Background

To accelerate the development of mid‑backend applications, the ABF platform provides an all‑in‑one environment for creating, authorizing, developing, and deploying apps. A core component of this platform is the Building Center , a low‑code solution that enables visual page construction, material reuse, and hybrid code integration.

Why Low‑Code Can Improve Efficiency

Low‑code does not replace hand‑written code; instead, it speeds up routine UI work by generating forms and pages from data models, allowing non‑developers (product, operations) to assemble pages while front‑end engineers focus on building reusable components. Real‑world practice at Youku’s content management platform showed that hundreds of pages could be generated automatically, with most pages assembled by product staff.

Technical Solution Overview

The Building Center offers four main capabilities:

Drag‑and‑drop component composition with configurable properties.

On‑the‑fly material insertion from a material library without pre‑declaring dependencies.

Bidirectional material creation—pages can generate new materials and vice‑versa.

Hybrid “code‑embedded building” that merges Pro‑Code and Low‑Code advantages for complex scenarios.

Material Model

Materials are the building blocks, analogous to components. Two types exist:

Source‑code material : authored with code.

Built material : created via the low‑code builder.

The goal is a unified usage experience; consumers should not need to know whether a material originates from code or builder.

Build Artifacts

Source‑code materials are compiled to UMD bundles with externalized common dependencies (react, react‑dom, antd, moment) to keep bundle size small. Future work aims for native ESM output. A unified build scaffold and the DEF platform handle cloud builds and CDN publishing. Built materials are published as a JSON schema conforming to the “Alibaba Mid‑Backend Building Protocol”.

Material Description Protocol

Each material includes a description protocol that defines property names, types, and UI behavior in the editor. For source‑code components, the scaffold auto‑generates this protocol from TypeScript typings, which can be manually extended.

Ant Design Base Materials

Using Ant Design React components as a foundation, a complete low‑code component library covering all Ant Design components has been built and adopted across multiple business units.

Editor Core

The editor, built on Alibaba’s low‑code engine, handles material dragging, asynchronous loading of JS/CSS, progress indication, error isolation, and source‑map debugging. It saves page definitions as JSON material schemas, which can be versioned and published.

Renderer

The renderer consumes the saved material schema, dynamically resolves CDN URLs for required JS/CSS, and loads them. It supports two usage patterns:

Direct component usage via LowcodeRenderer with id, version, and props.

Lazy‑loaded React component via create and React.lazy.

Dynamic loading includes resource deduplication, CDN combo requests, and multi‑level caching.

Environment Isolation

To avoid style and global variable conflicts with legacy projects (e.g., Ant Design v3), the renderer renders into a Shadow DOM and employs a JavaScript sandbox.

Use Cases

1. Youku Content Standardization Platform – Developed source‑code table materials with embedded data‑request logic, then used low‑code composition to configure columns and layout, enabling product staff to adjust tables without developer involvement.

2. Youku Data Analysis Platform – Provided a library of chart materials; product teams could drag and configure charts, while front‑end engineers focused on building the underlying chart components.

Future Directions

The solution is already deployed in many internal mid‑backend projects, dramatically reducing front‑end workload. Planned enhancements include data‑source configuration, responsive data binding, and model‑driven development. The underlying low‑code engine and protocols are expected to be open‑sourced later this year.