1 introduction

Lego is a platform for Meituan-Dianping to quickly build background system pages. The name comes from the well-known Danish toy brand that everyone is familiar with. Their toys are formed into final works by combining easily disassembled and assembled parts. After long-term development, lego brand gradually has the meaning of “happy, imagination, creative future”.

With the rapid development of takeout business, a large number of business development needs are coming one after another. Problems such as manpower shortage, repetitive development and inefficient communication are becoming more and more obvious. So, we have such a thought: can be based on the structure of existing a lot of business system fixed, demand for emergency, interaction style requirement is not high, to build a platform, it has been forming components like lego parts, use drag-and-drop way to assemble the final page, at the same time, can make various business fast access.

We put this idea into practice at meituan’s hackathon. In the competition of more than 40 teams, won the second place. This gives us the confidence to carry on, and also clear direction of follow-up efforts. After a period of iteration, Lego has formed a relatively complete development and production process:

  • Independent components are developed based on standards provided by the platform.
  • Components are arranged in different ways to form the final product interface.

2 User Usage

Applications on the Lego platform can be divided into three main parts: the assembly factory for users, the development view for developers, and the exposed interface for back-end servitization.

2.1 Assembly Plant

2.1.1 View Layout

Page assembly is shown in Figure 1, which mainly consists of five parts:

  • Component tree A component tree is the skeleton (area shown in ①) part of a page, assembled from built-in components. Lego provides a wealth of action options for the component tree. In addition to add, copy and paste, preview, delete and other functions, you can also drag components in the component tree position (③ area), real-time display effect in the preview area.
  • The preview block (shown in (4)) occupies the right half of the page. In the component tree, each component can be previewed individually. A preview of a component that shows the combined effects of this component and its children. Preview the root component to see the full page. You can also preview the full page through the Page Preview button.
  • Each component has configurable properties (the Model field in the module example code mentioned in section 3.2.1). Open the panel in area ⑤ to configure the selected component on the left. For example, the color, size, and so on of the configuration button component are determined by the component developer’s reservation for that component.
  • The ⑥ section of the top page operations contains operations on the current view. A view can be thought of as a separate page, with open, publish, rename, and so on.
  • The left navigation

    ⑦ The region section contains three optional tags.
    • The first is the assembly plant selected in the image below.
    • The second is the component development factory.
    • The third is the real-time monitoring of the whole system’s health, QPS and other operational data.

(figure 1)

2.1.2 View Scripts

The script on a finished page is divided into three pieces by source.

  • Figure 2 shows the script editing area.
  • The lego platform uses take-out’s own kangaroo UI by default in the UI library used for the current page (described below).
  • The other part comes from the implementation of each component’s own programming interface (that is, the Script field in the module sample code in Section 3.2.1).

(figure 2)

2.1.3 Synchronizing Data

The lego system provides the concept of a data source. Used to simulate and verify data in template pages. Sometimes, the back end needs Lego to output FreeMarker or EJS templates instead of HTML pages. To ensure the normal development and preview of the page at Le High school, we need the Mock part to synchronize the data (which can be interpreted as writing to the ModelView in the background).

Mock data can be implemented by writing jSON-formatted data to the data source. In addition, when the Lego interface is invoked in the back end, the data source validates the incoming data.

(figure 3)

2.2 Development View

Lego is a platform. Developers can develop their own modules according to their own preferences, ideas and ideas.

(figure 4)

  • The component editing area provides the editing function for components. Information about the developer, modification time, and creation time of the currently edited component will be displayed in section ④.
  • Component classification management occurs when there are a large number of components in the platform. We need to manage components by category (area shown in ③).
  • Component version Management Each component has its own version number management (as shown in section 2). After the developer clicks “Component Save”, a temporary version of 0. Username will be added to the version list to save the current modification information.

2.3 System Access

Lego currently provides two SDK access methods: Java and Node.js.

2.3.1 Java

Introduce JAR packages into the project. You can get a page or template from the Lego system by calling the SDK interface.

There are two types of capture: rendered HTML code and template code (FreeMarker templates are currently supported).

/ * * * * @ param countless according to page id or vurl pageId page depends on pageIdType incoming value * @ param pageIdType, enumerated types, LegoService. PageIdType. Id, LegoService. PageIdType. NAME the use of the former was introduced into the page id, which is introduced into the page vurl use * @ return enumerated types, OK (200, "success"), and FAILED (500, "fail"); * */ public static final LegoStatus getPageWithoutData(HttpServletResponse servletResponse, String pageId, PageIdType PageIdType) /** * public static final LegoStatus getPage(HttpServletResponse servletResponse, String pageId, PageIdType pageIdType, ModelMap model)Copy the code

2.3.2 Node. Js

After installing the Lego dependent modules, you can invoke the following example:

'use strict'; var lego = require('lego'); @param rootId = @param rootId = @param rootId; * @param callback(err, body) is used as a callback. Err is null and body is the HTML content of the page. Err indicates an error message. RenderById (vurl, data, rootId, callback) /** */ lego.renderbyurl (vurl, data, rootId, callback)Copy the code

Three principles

3.1 concept

In AMD, CMD, CommonJS and other modular standards began to popular, modular way of thinking, to the community of front-end developers caused a more profound impact.

Front-end development has become more conscious of organizing and classifying the otherwise chaotic JavaScript code in a standard pattern. Based on this, the Web App built not only improves the maintainability of the system, but also facilitates communication with other developers, thus forming a huge development chain. Leveraging a set of modules from other developers allowed us to focus on business logic while reducing code redundancy, development costs, and potential risk.

Based on the general idea of modular development. We’re generalizing, summarizing, and refining a seemingly chaotic bunch of DOM structures into individual components. Several components work together to present a complete page. The lego system is based on the following equation:

The node description, data and functional logic here are the module parts to be presented in the following sections.

A more intuitive statement, a basic structure shown in the figure below, can form a simple page. The division of component granularity has more flexibility and can be customized by the component designer.

3.2 components

Components are the most fundamental elements that make up any view and are the cornerstone of the entire platform. Whether the coupling degree, communication, scalability and ease of use between components are strong enough determines the quality of the whole system to a large extent.

3.2.1 form

Lego’s components are abstracts of the vast style/interaction library behind them (kangaroo UI by default, but other front-end libraries as well), relying heavily on descriptions of the component’s HTML structure and interaction calls. Each component is responsible for assembling its own HTML structure and using the interactions stored in the component library. Therefore, the recommended component development method does not include descriptions of CSS, but does allow you to add CSS to each component by hacking.

Each individual component provides eight interfaces that need to be implemented:

/ * * * the description of the basic rules of display and function component, is exposed outside the eight interface (name, pyname, desc, leaf, uilib, model, script, render) * / 'use strict; /** * Component name, which identifies the reference name of the component in the system. Name = 'Sample'; / exports. Name = 'Sample'; / exports. /** * Component alias, can only be Chinese characters or letters * [Recommend Chinese name, each component pyName is unique, for PM such as HMTL and components are not familiar with English name] */ exports. Pyname = 'Chinese name '; / / exports. Desc = ''; /** * the number of leaf nodes that can be added to this component * 1. If child nodes can be included, add the component id to the array, e.g., exports.leaf = [12,23,34] * 2. Set leaf to null if it does not contain any child nodes, i.e. : exports.leaf = null * 3. Set leaf to an empty array if it can contain any child nodes, i.e. : exports.leaf = [] */ exports.leaf = []; /** * Library of current components that need to be adapted */ exports. Uilib = 'kui'; /** * This interface is used to describe the configuration properties of the component, and its children can read the configuration information of the parent component in the programming/rendering interface. ** Type: data type, currently included in the data type: * text: text input field type * textEx: {* name: Select * selectEx: {* name: selectEx: {* name: selectEx: {* name: selectEx: {* name: selectEx: {* name: Type: 'select', * options:{* value1: 'this is value1 ', * value2:' this is value2 ', *}, * def: 'defValue', * desc: 'Property description' *} * textarea: multi-line input box type (configure the same as text) * radio: radio select box type (configure the same as select) * checkbox: Check type (same configuration as select, final value value1,value2 comma separated) */ exports.model = {} /** * component script. * @param mvId The mvId used by the component. The component uniquely identifies * @param evtMgr global event center of the page. Bind (EVt, handler) unbind(EVt, handler) and trigger(EVt, data, context). Pass encode string by default, first need decodeURI, Parse (decodeURI(modelData)); / / exports.script = function (mvid, evtMgr, modelData) {modelData = json.parse (modelData)); } / * * * the component in the user interface display * @ param {Object} node node includes {_children: [], _parent: "', _innerHtml:" ', _modelData: {}, _mid: "', */ exports. Render = function (node) {var _modelData = node._modeldata; var _children = node._children; var content = ''; _children.map(function (child) { content += child._innerHtml; }); return ``; }Copy the code

3.2.2 function

Lego components, as elements of an interface system, need to take the following five aspects into consideration at the beginning of design. Through these parts, gradually formed a relatively complete modular scheme:

Component communication

Data transfer between business components is a common scenario.

We pass three parameters mvid, evtMgr, and modalData to the Script interface implemented by each component. EvtMgr is the event center in the Lego system. By binding or triggering corresponding events, the communication between modules is realized and the modules are well decoupled. Sample code:

// Evtmgr. trigger('tata', {a: 1}); Evtmgr. bind('tata', (params) => {// TODO here.console. log(params) // {a: 1}})Copy the code

Delivery of data to components

Some business components will have their own data. Data can be divided into system data and configuration data by source. System data can be divided into synchronous data and asynchronous data:

  • The configuration data comes from people who use lego configuration and is configured in the reserved interface of the development module.
  • Asynchronous data in system data can be pulled from the back end via AJAX.
  • Synchronized data, assembly can be configured in the data source, convenient preview effect. It can be called directly from the Render interface of the module.
exports.render = function (node) { var _modelData = node._modelData; var _children = node._children; var content = ''; _children.map(function (child) { content += child._innerHtml; }); return `${data_from_datasource}`; // Data source data field read}Copy the code

Exposure of component programming interfaces

The eight programming interfaces shown in section 3.2.1 Form are open to module developers.

Version control of components

In order to modify and publish components without impacting online pages, and to meet the needs of collaborative development, we implemented simple version control functions.

Developer versions are reserved for each component. Once developed, you need to publish the component separately. When assembling in the view, you can select the version you want and roll back individual modules online in time if there is a problem with the new version.

Component rendering

Music high school compares the core function. Is a parsing engine that implements a page. Enter the data structure described by the page formed in the factory, and gradually add external resources (data sources, interface repositories, modules) to combine to generate the final HTML or template.

Most takeout systems use freemarker.jar as the page rendering engine. Therefore, Le High School also includes a freemarker.jar template engine. The overall working process is shown in the figure below:

The data structure from the page information produced by the view assembly factory is rendered by the parsing engine calling other resources (data sources, frames, module descriptions). The resulting HTML or template is returned to the backend service for transfer to the end user.

3.3 process

Lego uses node. js Express framework to build, as a way of front-end service.

The service also provides an interface to be accessed by internal users (page assemblers). The overall working process is as follows:

3.4 View Structure

The assembly plant was described above. We know that after the page is built up, the system finally forms a flat page data structure for the description of the page.

In this data structure, in addition to the description of each node, _children, _parent and so on are used to describe the position and hierarchy of the node in the tree structure of the current view. The specific structure is as follows:

{ 1_0: { _children: [101_1], // children in current page _mvid: '1_0', // unique id in current page _parent: '#', // parent in current page _mid: '1', // id _version: '1.0.0' // version _mname: 'page ', // name _xxx: '' // other properties }, 101_1: { _children: [5_2], _mvid: '101_1', _parent: '1_0, _mid: '101', _version: '1.0.0 _mname:' Body ', _xxx: '}, 5 _2: {_xxx: '}}Copy the code

As the page is created and published, the storage structure of the page is persisted to fields in the Lego database for subsequent calls to modify.

4 conclusion

4.1 the status quo

At the time of writing, Lego had 55 framework components and 77 business components for a total of 132. Covers 6 projects in the Takeaway business division and contains 108 accessible online pages (views). The number is still increasing rapidly.

For example, a typical scenario, the list query page and edit form page commonly used in business systems, before the development of the page takes half a day, but Lego can assemble a page in half an hour. The improvement of development efficiency is more obvious.

4.2 the ecological

In the practice of front-end development of takeout, Lego system has become the axis of a large number of business system development. In the process of extracting the components in kangaroo UI resource library and forming the final user visible page, it not only promotes the gradual improvement of the overall visual and interactive specifications of takeout, but also makes it implemented in the front-end technology — Kangaroo UI resource library.

Visual specifications, Kangaroo UI, and Lego form a complete and recurring development ecosystem.

4.3 advantage

  • Platformization regulates interaction, page, and component styles. Ideal for business systems with fixed interaction styles.
  • Simple and efficient interface construction, saving a lot of development time and energy.
  • Using visual editing mode, what you see is what you get. Greatly reduce the front-end development of learning costs and thresholds. Members of other roles in the team can also easily learn.

At present, there are many front-end componentized frameworks in the market, most of which have high threshold. Lego provides a cheaper and simpler way to assemble a large number of repeated business systems with relatively single interaction styles, and realizes its own module management mechanism.

As an attempt at a new development mode, Lego is constantly improving. Using the Lego platform, there will be a lot of interesting innovations and breakthroughs in front end automation, performance optimization and so on. We will continue to share with you.

Lego is also actively planning open source, we will do our best, hope to meet you soon. Finally, attached is a hard advertisement. Meituan takeout is looking for senior front-end engineer/front-end technology expert. Please send your resume to: xukai#http://meituan.com.

Author’s brief introduction

The writers are from meituan-Dianping food delivery business Department.

Xu Kai, head of Web front end Group of takeout Business Division. In 2013, I joined Meituan Takeout as the first front-end engineer. I witnessed the rapid growth of Meituan takeout from more than 10 orders per day to more than 9 million single poles. I was responsible for the establishment of the front-end team, echelon construction and personnel training of Meituan takeout in the early stage. Established the overall front-end infrastructure for takeout, and is currently responsible for front-end projects related to B and C and operation.

Bing Bing, senior front-end R&D engineer, head of front-end business Growth Group of takeaway Business Division. After graduating from Beijing Science And Technology University in 2010, he worked for MTK and IBM and founded Micro Secret Technology as the co-founder. In 2016, I joined Meituan-Dianping, and as the technical director, I led the launch of several activities and business voucher red envelope projects.

Dong Liang, Senior front-end R&D engineer of Meituan Takeout. I graduated from Dalian Institute of Technology in 2012. I once worked for Domi Music and Renren, engaged in game development and Web front-end development successively. I joined Meituan-Dianping in 2015.





Don’t want to miss tech blog updates? Want to comment on articles and interact with authors? First access to technical salon information?

Please follow our official wechat account “Meituan-Dianping Technical Team”.