Lego: A Component-Based Front-End Page Assembly Platform at Meituan

Lego is a rapid page‑building platform developed by Meituan‑Dianping, inspired by the LEGO toy concept, allowing developers to assemble pages by dragging and dropping pre‑built components.

It addresses challenges such as manpower shortage, repetitive development, and low communication efficiency in the fast‑growing food‑delivery business.

The platform consists of three main parts: the Assembly Factory for end users, the Development View for developers, and exposed APIs for backend services.

In the Assembly Factory, users can manipulate a component tree, preview pages, configure component properties, and perform page operations through an intuitive UI.

Developers can create independent components following a standard interface. Each component implements eight exported fields (name, pyname, desc, leaf, uilib, model, script, render) as shown below:

/** * Component basic description ... */ 'use strict'; exports.name = 'Sample'; exports.pyname = '中文名称'; exports.desc = ''; exports.leaf = []; exports.uilib = 'kui'; exports.model = { }; exports.script = function (mvid, evtMgr, modelData) { modelData = JSON.parse(decodeURI(modelData)); }; exports.render = function (node) { var _modelData = node._modelData; var _children = node._children; var content = ''; _children.map(function (child) { content += child._innerHtml; }); return ``; };

Components communicate via an event manager (evtMgr). Example:

// Trigger event evtMgr.trigger('tata', {a: 1}); // Bind event evtMgr.bind('tata', (params) => { console.log(params); });

Data can be provided as synchronous mock data or fetched asynchronously via AJAX. Components can access model data defined in the component's model field.

The platform provides Java and Node.js SDKs to retrieve rendered pages or templates. Example Java method signatures:

public static final LegoStatus getPageWithoutData(HttpServletResponse servletResponse, String pageId, PageIdType pageIdType); public static final LegoStatus getPage(HttpServletResponse servletResponse, String pageId, PageIdType pageIdType, ModelMap model);

Node.js usage example:

'use strict'; var lego = require('lego'); lego.renderById(vid, data, rootId, callback); lego.renderByUrl(vurl, data, rootId, callback);

The rendering engine parses the assembled page description, integrates resources (data sources, UI libraries, modules), and generates final HTML or FreeMarker templates, as illustrated by the following view structure:

{ 1_0: { _children: [101_1], _mvid: '1_0', _parent: '#', _mid: '1', _version: '1.0.0', _mname: 'Page' }, 101_1: { _children: [5_2], _mvid: '101_1', _parent: '1_0', _mid: '101', _version: '1.0.0', _mname: 'Body' }, 5_2: { _xxx: '' } }

Lego runs on a Node.js Express backend, providing both a visual editor for page assembly and an API for service integration.

Since its inception, Lego has accumulated over 130 components, covering multiple Meituan projects and more than 100 online pages, significantly reducing page development time.

The platform fosters an ecosystem with the Kangaroo UI component library, promoting consistent visual standards and enabling low‑code development across teams.

Advantages include standardized interaction patterns, rapid UI construction, and a low learning curve for non‑frontend team members.

Meituan plans to open source Lego in the future.