Front-End Material Center: Concepts, Goals, and Production Process

Concept

In a broad sense, "material" refers to all items related to product manufacturing. In front‑end development, a material (or front‑end material) is an element required to compose a page and make it function correctly, such as a button or a group of buttons. These elements are collectively called front‑end materials.

Front‑end materials are not just visual components; they embed specific UI presentations, predefined behaviors, and business‑related attributes. Because of these business‑centric features, development resembles assembling building blocks, allowing many tasks to be completed with little or no code. This enables both professional front‑end engineers and non‑technical staff to participate in "front‑end development".

Background

In recent years, the group's core component libraries have stabilized on Fusion and AntD. Although the underlying dependencies are unified, rapid business growth has generated a large number of business‑specific components, blocks, and templates. These assets could be extracted and shared horizontally, but they are currently scattered, hindering reuse.

Business demands are moving online quickly, and front‑end requirements are growing fast. Even with high‑intensity front‑end effort, resource shortages frequently occur.

Goal

Flow : Aggregate all page elements for unified management, facilitating material circulation and usage.

Universality : Materials have a weak link to business logic, allowing different business lines to adopt them via simple configuration.

Convenience : Business personnel can engage in front‑end development at varying levels:

Front‑end developers (CODING, LOWCODE): Use material frameworks, composition capabilities, and advanced front‑end features.

Back‑end developers (LOWCODE): Use material frameworks and composition with basic front‑end abilities.

Business operators (NOCODE): Assemble materials to deliver business capabilities.

Technical Solution

Overview Diagram

The Material Center provides three core capabilities:

Composition Transformation : Ability to combine basic elements into materials.

Rule Constraints : A material agreement defines production rules, aligning with the group’s material protocol for seamless sharing.

Information Storage : Centralized storage of material metadata.

Material Production Process

Materials are classified by development method into two types: source‑code materials and visual‑builder materials. Regardless of type, they share a common lifecycle from creation to usage.

The production process consists of three stages:

Create Material : Register the front‑end material in the Material Center.

Produce Material : Develop the material either via source code or visual building.

Publish Material : Release the material in the Material Center for business users.

1. Create Material

Register the material in the Material Center, filling out basic information. After registration, the system redirects to the material detail page, where development proceeds according to the chosen production mode (source‑code or visual).

2. Produce Material

Based on the selected production mode:

Source‑code Development : Access the component’s Git repository from the detail page, use the scaffold to develop, write the required meta.json schema, and after local testing, submit code for review, CI build, and finally deploy the UMD bundle to CDN.

Visual Builder : Enter the builder from the detail page, assemble existing materials, preview, and save. The saved artifact is then uploaded similarly to source‑code materials.

3. Publish Material

Publishing is independent of the production method. Developers use the material’s iteration list to release it. Once published, the material becomes available in the builder for consumption.

4. Material Types

Materials are divided into two categories:

Base Materials (e.g., AntD components such as tables, forms, buttons, dialogs) – highly reusable across projects.

Business Materials – tailored to specific scenarios like workflow standardization, fine‑grained operation platforms, tagging platforms, etc.

A “premium material” concept further grades materials based on usage and generalization, encouraging reuse of base materials and minimizing custom development.

Postscript

The team’s development model is shifting from pure component/page development to customized material development. Front‑end engineers focus on material creation, while operations, BD, and back‑end staff can also contribute via low‑code or no‑code approaches. The Material Center serves as a management platform, providing the building blocks for LowCode/NoCode and supporting the transition from traditional development.