簡介

樂高，是美團點評一個快速搭建后臺系統頁面的平臺。名稱來源于大家熟悉的丹麥知名玩具品牌，他們的玩具都是通過組合易拆卸、裝配的零件，形成最終的作品。經過長期的發展，樂高品牌漸漸有了“快樂、想象、創意的未來”的寓意。

隨著外賣業務的高速發展，大量的業務開發需求接踵而來。像人手緊缺、重復開發、溝通效率低下等問題，暴露得愈發明顯。于是，我們有了這么一個想法：能否基于現有大量業務系統的結構固定、需求緊急、交互樣式要求不高等特點，搭建一個平臺，它把已經成型的組件像樂高玩具的零件一樣，使用拖拽的方式組裝成最終的頁面，同時能夠讓各個業務快速的接入。

在美團點評一次黑客馬拉松中，我們將這一想法付諸實踐。在參賽的四十多支團隊中，獲得了第二名。這給了我們堅持下去的信心，也明確了后續努力的方向。經過一段時間的迭代，目前樂高形成了較完善的開發和生產流程：

• 基于平臺提供的標準，開發出獨立的組件。

• 組件經過不同形式的排列組合，形成最終的產品界面。

2 用戶使用

樂高平臺的應用可分為三大部分：面向用戶的組裝工廠、面向開發者的開發視圖以及面向后端服務化的暴露接口。

2.1 組裝工廠

2.1.1 視圖布局

頁面組裝如圖一所示，主要包含五部分：

• 組件樹

  組件樹是頁面的骨架（①所示區域）部分，由內置的各個組件組裝而成。樂高為組件樹提供了豐富的操作（②右鍵彈框）選項。除了添加、拷貝粘貼、預覽、刪除等功能，還可以通過拖動組件在組件樹中的位置（③區域），即時的在預覽區域展示出效果。

• 預覽頁面

  預覽區塊（④所示區域）占據了頁面的右半邊部分。在組件樹中，每個組件都可以單獨預覽。組件的預覽，顯示的是這個組件及其子組件共同作用的效果。預覽根組件，能看到完整的頁面。也可以通過 “頁面預覽” 按鈕進行完整頁面的預覽。

• 右側模塊屬性

  每個組件，都有可配置的屬性（3.2.1節提到的模塊示例代碼中的Model字段），打開⑤區域的面板可以對左側選中的組件進行配置。如，配置按鈕組件的顏色、大小等，都取決于組件開發者對該組件的預留項。

• 頂部頁面操作

  ⑥區域部分，包含對當前視圖的操作。視圖可以理解為一個獨立的頁面，包含了打開、發布、重命名等等功能。

• 左側導航

  ⑦區域部分，包含了三個可選標簽。

• 第一個是下圖所選的組裝工廠。

• 第二個是組件的開發工廠。

• 第三個為整個系統的健康、QPS等等運營數據的實時監控。

（圖一）

2.1.2 視圖腳本

一個最終完成的頁面中的腳本，按照來源分為了三塊。

• 圖二所示的腳本編輯區域。

• 當前頁面所使用的UI庫（下文中會提到）中，樂高平臺默認使用的是外賣自己封裝的袋鼠UI。

• 另外一部分來自每個組件中自己編程接口的實現（即3.2.1節模塊示例代碼中的Script字段）。

（圖二）

2.1.3 同步數據

樂高系統中提供了數據源的概念。用于模擬、校驗模板頁面中的數據。有時，后端需要樂高輸出FreeMarker或者EJS模板，而非HTML頁面。為了保障頁面在樂高中的正常開發和預覽，我們需要Mock一部分同步（可理解為后臺寫入ModelView的）數據。

將JSON格式的數據寫入數據源，即可實現Mock數據。此外，在后端調用樂高接口時，數據源還會校驗傳入數據的合法性。

（圖三）

2.2 開發視圖

樂高是一個平臺。開發者可以在樂高中按照自己的喜好、想法、思路開發自己的模塊。

（圖四）

• 組件的編輯

  ①區域為組件提供了編輯的功能。當前編輯的組件的開發者、修改時間、創建時間等信息，會顯示在④區域部分。

• 組件分類管理

  在平臺中存在了大量的組件的時候。我們需要對組件進行分類管理（③所示區域）。

• 組件版本管理

  每個組件都有自己的版本號管理（②區域所示）。開發者點擊“組件保存”后，會在版本列表中增加0.username的臨時版本，用于保存當前修改的信息。

2.3 系統接入

樂高目前提供了Java和Node.js兩種SDK的接入方式。

2.3.1 Java

在工程中引入JAR包。可通過調用SDK接口，從樂高系統獲取頁面或者模板。

獲取的類型有兩種：渲染完成的HTML代碼和模板代碼（目前支持FreeMarker模板）。

/**

2.3.2 Node.js

安裝完樂高依賴的模塊后，可參照下述示例調用：

'use strict';var lego = require('lego');/**

3 原理

3.1 理念

在AMD、CMD、CommonJS等模塊化標準開始流行后，模塊化的思維方式，給社區的前端開發者們造成了比較深刻的影響。

前端開發有了比較強烈的意識，對原本混沌的JavaScript代碼按照標準模式進行組織和分類。據此來構建出的Web App，不僅提高了系統的可維護性，并且便于和其他開發者進行溝通，從而形成一個巨大的開發鏈條。借助其他開發者提供的一批模塊，使我們能夠專注于業務邏輯，同時降低代碼冗余、開發成本和潛在風險。

基于模塊化開發的大體思路。我們在對一堆看似雜亂無章的DOM結構進行歸納、總結、提煉，使之成為一個個獨立的組件。數個組件的協同工作，呈現出一個完整的頁面。樂高系統設計理念，正是源于如下所示的一個等式：

這里的 節點描述、數據、功能邏輯 就是下文中要提出的模塊部分。

更為直觀的表述，如下圖所示的一個基本結構，可以組成一個簡單的頁面。組件粒度的劃分，有比較充裕的靈活性，可以由組件設計者自己定制。

3.2 組件

組件是組成任何一個視圖的最基礎元素，是整個平臺的基石。組件之間的耦合度、通信、可擴展性、易用性是否足夠強大，很大一部分程度上決定了整個系統的質量。

3.2.1 形態

樂高的組件是對其背后龐大的樣式/交互資源庫的抽取（默認為袋鼠UI系列，也可以是其他的前端資源庫），倚重于對組件HTML結構，交互調用的描述。每個組件負責拼裝自己的HTML結構，和使用組件庫中預存的交互。因此，推薦的組件的開發方式中，不包含對CSS的描述，但是也允許通過Hack的方式增加每個組件的CSS。

每個獨立組件提供了8個需要實現的接口：

/**

3.2.2 功能

樂高的組件作為一個界面系統的元素部分，在設計之初需要考慮到以下的五個方面。通過這幾部分，逐漸的形成了一套比較完善的模塊化方案：

組件的通信

業務組件之間的數據傳遞，是一個比較常見的的場景。

我們給每個組件實現的編程（Script）接口中傳遞了三個參數mvid、evtMgr、modalData。其中，evtMgr就是樂高系統中的事件中心。通過綁定或者觸發相應的事件，在實現模塊間通信的同時，較好的解耦了模塊。示例代碼：

// 事件的觸發

數據給組件的交付

部分業務組件會有自己的數據。數據從來源劃分，可以分為系統數據、配置數據。系統數據又可以被劃分為同步數據和異步數據：

• 配置數據來自使用樂高配置的人員，在開發模塊的預留接口中配置信息。

• 系統數據中的異步數據可以通過AJAX的方式從后端拉取。

• 同步的數據，裝配時可以配置在數據源中，方便預覽效果。使用時可以直接在模塊的Render接口中調用。

exports.render = function (node) { var _modelData = node._modelData; var _children = node._children; var content = '';

組件編程接口的暴露

在“3.2.1 形態”章節中所示的8個編程接口，對模塊的開發者開放。

組件的版本控制

為了在修改、發布組件時，不對線上頁面造成影響，也為了滿足多人協同開發的需求，我們實現了簡單的版本控制功能。

每個組件預留了開發者版本。開發完畢后，需要單獨的發布該組件。在視圖中進行組裝時，可以選擇所需要的版本，如果新版本有問題，能夠及時做到單獨模塊的線上回滾。

組件的渲染

樂高中比較核心的功能。是實現了一個頁面的解析引擎。輸入為在工廠中形成的頁面描述的數據結構，逐步添加外部資源（數據源、界面資源庫、模塊）進行組合，進而生成最終的HTML或者模板。

外賣的系統，大多使用freemarker.jar作為頁面渲染引擎。因此，樂高中也包含了一個freemarker.jar的模板引擎。整體工作流程如下圖所示：

來自于視圖組裝工廠產出的頁面信息的數據結構，經過解析引擎調用了其他資源（數據源、框架、模塊描述）渲染后。形成了最終的HTML或者模板，返回給后臺的服務中轉給最終的用戶。

3.3 流程

樂高使用了Node.js Express框架搭建，作為前端服務化的方式存在。

同時這個服務也提供了內部用戶（頁面組裝者）訪問的界面。整體工作流程如下所示：

3.4 視圖結構

上文介紹了組裝工廠。我們知道在頁面組建完畢之后，系統中最終形成的是一個扁平的頁面數據結構，用于對頁面的描述。

這個數據結構中，除了對每個節點的描述之外，使用了_children、_parent等來描述該節點在當前視圖的樹狀結構中所處的位置和層級。具體的結構如下所示：

{

隨著頁面的創建和發布，頁面的存儲結構，會被持久化到樂高數據庫的字段中，以便后續的調用修改。

4 結語

4.1 現狀

至截稿前，樂高擁有了55個框架組件和77個業務組件，共132個。覆蓋了外賣事業部的6個項目，包含了108個可訪問的線上頁面（視圖）。數目還在不斷的迅速增加中。

舉個例子，一個比較典型的場景，業務系統中常用的列表查詢頁面和編輯表單頁面，之前開發頁面需要半天時間，而樂高半小時內即可組裝一個頁面。開發效率上的提升效果比較明顯。

4.2 生態

在外賣的前端開發實踐中，樂高系統已經成為大量業務系統開發的軸心一環。在對袋鼠UI資源庫中的組件進行提取，形成最終的用戶可見頁面過程中，不僅推動了外賣整體視覺和交互規范的逐漸完善，也使其在前端技術中得到落實——袋鼠UI資源庫。

視覺規范、袋鼠UI和樂高形成了一個完整和不斷循環的開發生態。

4.3 優勢

• 平臺化的規范了交互方式、頁面及組件樣式。非常適合交互樣式比較固定的業務系統。

• 簡易高效的界面搭建，節省了大量的開發時間和精力。

• 使用了可視化的編輯模式，所見即所得。極大的降低了前端開發的學習成本和門檻。團隊中其他角色的成員，也能夠輕松簡易的上手。

當前市面上存在著比較多的前端組件化框架，大多門檻較高。樂高提供更低廉、簡潔的使用方式組裝大量重復存在而交互樣式較為單一的業務系統，實現了自己的模塊管理機制。

作為一種新開發模式的嘗試，樂高在不斷地完善。使用樂高平臺，在前端自動化埋點、性能優化等等方向，會有很多有趣的創新和突破。我們將會持續給大家分享。

樂高也在積極的籌劃開源，我們會盡最大的努力，希望早日能夠與大家見面。最后，附上一條硬廣，美團外賣長期誠聘高級前端工程師/前端技術專家，歡迎發送簡歷至：xukai#meituan.com。

作者簡介

本文作者均來自美團點評外賣事業部。

徐楷，外賣事業部Web前端組負責人。2013年作為第一名前端工程師加入美團外賣。見證了美團外賣從每天10多單到900多萬單極速成長的過程。負責了早期美團外賣前端團隊的組建、梯隊的建設和人員的培養。搭建了外賣整體前端基礎設施，目前負責to B、to C以及運營相關的前端項目。

冰冰，資深前端研發工程師，外賣事業部前端業務增長組負責人。2010年北理碩士畢業后，曾就職MTK、IBM，后作為聯合創始人創建微秘科技。2016年加入美團點評，作為技術負責人主導了多個活動及商家券紅包等項目的上線。

東亮，美團外賣高級前端研發工程師。2012年大連理工畢業，曾就職多米音樂，人人網，先后從事游戲開發及Web前端開發，2015年加入美團點評，目前致力于外賣面向用戶以及運營等方向的前端研發工作。

不想錯過技術博客更新？想給文章評論、和作者互動？第一時間獲取技術沙龍信息？

請關注我們的官方微信公眾號“美團點評技術團隊”。