Design and Implementation of a Frontend Configuration Engine for Component‑Based Page Development

To cope with increasingly complex business requirements, configuration‑driven efficiency has become essential for frontend developers. By abstracting business patterns and applying component‑based thinking, development speed can be dramatically improved.

Both React and Vue organize pages as component trees; a configuration engine lets component providers declare accepted properties while page builders supply concrete values. The rendering engine parses these configurations and dynamically renders the page.

The engine processes component attributes, data requests, hierarchy, and cross‑component interactions. Component providers supply a configuration file that declares:

Acceptable properties (name, label, type, default value, etc.)

Child components that can be nested

Events the component can trigger or handle

Page builders then set property values, define hierarchical relationships, and create reference links between triggering and handling components.

Attribute Definition – Attributes are described as objects in an array. Example:

{
  "static": [
    {"name": "title", "label": "卡片名称", "type": "text"},
    {"name": "value", "label": "主数据", "type": "number"},
    {"name": "tips", "label": "页脚数据", "type": "array", "primary": "title", "fields": [
      {"name": "title", "label": "名称", "type": "text"},
      {"name": "value", "label": "数值", "type": "number"},
      {"name": "color", "label": "颜色", "type": "color"}
    ]}
  ]
}

Special attribute types include numeric values with units, generic values (string/number/boolean) with various sources, select/multi‑select options, color pickers, and dynamic data items that support adding, deleting, and reordering entries.

Data Request – The engine can provide data synchronously (initial empty array replaced after request) or asynchronously (a Promise‑based method). Dynamic parameters are also described as objects:

{
  "dynamic": [
    {"name": "data", "label": "数据", "type": "arrayObject", "fields": [
      {"name": "title", "label": "标题"},
      {"name": "value", "label": "数值"},
      {"name": "color", "label": "颜色", "type": "color"}
    ]}
  ]
}

Page builders map API response fields to component fields, and the engine injects the correctly formatted data into the component.

Hierarchy – Components can declare containers (fixed number of children) or container groups (variable number). Example container definition:

{
  "children": [
    {"name": "column1"},
    {"name": "column2"}
  ]
}

React usage:

import React from 'react';
import { Row, Col } from 'antd';
export default class Column2 extends React.Component {
  render() {
    return (
{this.props.column1}
{this.props.column2}
);
  }
}

Container groups allow flexible layouts; the configuration includes options such as width ratios.

Cross‑Component Interaction – Components can trigger events (e.g., button clicks) and handle events (e.g., data refresh). Providers declare operable events in an operation array, and the engine supplies a bindOperation method. Example:

{
  "operation": [
    {"name": "startLoading", "label": "开始加载"},
    {"name": "stopLoading", "label": "结束加载"}
  ]
}

Component lifecycle:

componentDidMount() {
  this.props.bindOperation('startLoading', this.startLoading);
  this.props.bindOperation('stopLoading', this.stopLoading);
}

startLoading = () => { console.log('startLoading'); /* ... */ };
stopLoading = () => { console.log('stopLoading'); /* ... */ };

In summary, the configuration engine enables rapid, zero‑code page assembly through a visual UI (Orion), decouples the UI from the rendering logic, and lays the groundwork for extending to other frameworks such as native or Flutter.

Future articles will share additional experiences on business‑logic configuration, third‑party component integration, and related design challenges.