Design and Architecture of a High‑Scalability Online H5 Page Builder (Maliang Platform)

The article introduces the design of a highly extensible online web‑page creation platform, describing its background, final effect, and core design solutions.

Background : Since March 2018, the rapid growth of the Manbang Group's "Yunmanman" platform led to frequent activity iterations. Copy‑and‑paste of old activity projects caused bottlenecks, consuming 50% of front‑end resources and forcing the operations team to seek third‑party tools that lacked deep integration and real‑time data sync.

To address these issues, the team needed a platform that allows operations to quickly create activities while giving developers the ability to extend functionality. The platform should provide rich components, template pages, animation effects, comprehensive data analysis, flexible permission management, and a script‑based extension mechanism.

The solution is the Maliang Platform , an online H5 editor that enables users without programming skills to build beautiful pages via drag‑and‑drop and minimal configuration, while offering developers full scripting and component integration capabilities.

Core Design

1. Overall Architecture – a standard data schema is defined; an editor edits this data, and a parser renders the page based on the data.

2. Data Structure – each page consists of many node objects that can nest child nodes. A typical node JSON example:

{
  "id": "truck/button1l",
  "type": "truck/button",
  "label": "按钮1l",
  "version": "0.1.4",
  "visible": true,
  "style": {"position": "absolute", "width": "100px", "height": "40px"},
  "animate": [],
  "props": {"text": "输入文字", "type": "danger", "click": []},
  "path": "https://ymm-maliang.oss-cn-hangzhou.aliyuncs.com/truck/button/0.1.4/index.js",
  "script": "",
  "events": []
}

Each node contains fields such as id , type , label , version , style , props , script , and child . The full page structure is a recursive tree of these nodes.

Component Design

Components are the core of the system. They are built by mixing a base component with one or more custom scripts (mixins). The rendering flow uses a Vue component tag with :is="nodeInfo.id" and recursively renders child nodes:

<div class="node" v-show="visible" :style="nodeInfo.style">
  <component :is="nodeInfo.id" v-bind="nodeInfo.props" :ref="nodeInfo.id" :style="componentStyle"></component>
  <node v-if="nodeInfo.child" :info="item" v-for="item in nodeInfo.child" :key="item.id"></node>
</div>

Each component can load its own script via the path field, then mix in any scripts listed in nodeInfo.script , finally registering the resulting Vue component globally.

Component Property Editing

The editor extracts the props definition from each Vue component and generates appropriate UI controls based on the property type (e.g., boolean switch, image picker, enum dropdown). An example of a component’s props with an editer field is shown below:

{
  props: {
    foo: {type: String},
    fooImage: {type: String, editer: {type: 'image'}},
    fooDate: {editer: {type: 'date'}},
    fooCheckbox: {
      type: Array,
      default: () => [],
      editer: {label: '显示精度', type: 'checkbox', defaultList: ['day','hour','min','sec']}
    },
    fooCheckboxBool: {type: Boolean, editer: {type: 'checkbox'}},
    fooEnum: {
      default: 'value1',
      type: String,
      editer: {label: '我是字段名', desc: '我是帮助文本', type: 'enum', defaultList: {value1: '条件1', value2: '条件2', value3: '条件3'}}
    },
    ifFoo1: {type: [Number], default: 0, editer: {work: function(){return this.fooEnum == 'value1'}, label: '条件属性1', type: 'number'}},
    ifFoo2: {type: [Date, String], default: null, editer: {work: function(){return this.fooEnum == 'value2'}, label: '条件属性2', type: 'date'}}
  }
}

The editer object defines how the property is displayed in the editor (label, description, control type, default options, conditional visibility, etc.).

Extended Editing Capabilities

When a component’s built‑in property editors are insufficient, developers can provide a custom editor script that is loaded and mixed into the editor’s property panel, allowing complex UI logic such as fetching options from an API.

Component Animation

Simple entrance/exit animations are supported via the animate.css library, enabling marketing activities to have engaging visual effects.

Composite Components and Templates

Composite components are saved collections of nodes that can be reused as a single component. Templates work similarly, allowing operators to select a pre‑built page, modify a few elements, and publish within minutes.

Conclusion

The Maliang platform now supports 5‑10 new activity pages daily for the Manbang Group, with 95% of activities created via templates. Continuous accumulation of component and page templates further accelerates marketing activity production and enhances flexibility.

Author : Wang Kunming, Front‑End Lead of Yunmanman, Manbang Group.