頁面可視化搭建工具業(yè)界的輪子
無論大公司還是小公司，我們開發(fā)前端工程時候，項(xiàng)目工程又很多類似的功能或者頁面，開發(fā)經(jīng)常是加班加點(diǎn)搬磚去做一些無成長反復(fù)操作的工作，看鍵盤上 Ctrl 鍵已經(jīng)被磨掉了漆，C 和 V 也馬上磨白了，那對于開發(fā)如何把這些重復(fù)的工作用機(jī)器去解決？在前端資源緊缺的情況下，是否可直接有工具直接就可以搭建出我想要的前端頁面？于是業(yè)界的頁面可視化搭建工具就出現(xiàn)了，本文會介紹目前最流行的頁面可視化搭建工具，也會提供一些業(yè)界開源的可視化搭建項(xiàng)目供大家參考（Copy）。
1 頁面可視化搭建 簡介
編程開發(fā)頁面：動態(tài)邏輯頁面分解為 HTML Tree, Data 和 Logic. 前端開發(fā)工程師開發(fā)前端頁面的過程, 本質(zhì)上是用編程工具(IDE)對頁面的 HTML Tree, Data 和 Logic 進(jìn)行增刪和修改.
頁面可視化搭建：是用可視化交互的方式對頁面的 HTML Tree, Data 和 Logic 進(jìn)行增刪和修改, 從而實(shí)現(xiàn)頁面的生成. 頁面可視化搭建工具是實(shí)現(xiàn)頁面可視化編輯的軟件工具
目的：任何工具的存在都是更高效地解決問題. 頁面可視化搭建工具, 用于解決頁面生成的效率問題.
可能前端工程師會覺得最有效率的頁面生成方式是打代碼, 但有搭建頁面需求的不只是前端工程師. 而可視化頁面搭建工具, 恰恰是面向"就缺一個前端工程師"的人員, 用于提升他們生成頁面的效率.
差異點(diǎn)編程開發(fā)頁面可視化搭建頁面
技能要求
需要編程基礎(chǔ)
可以沒有編程基礎(chǔ)
操作方式
在代碼編輯器中編寫代碼
在可視化搭建工具中拖拉/填表/編寫代碼
2 業(yè)界調(diào)研（20+）項(xiàng)目簡介能解決什么
百度amis（開源）
前端低代碼框架，通過 JSON 配置就能生成各種后臺頁面，極大減少開發(fā)成本，甚至可以不需要了解前端
不需要懂前端就能做出專業(yè)且復(fù)雜的后臺界面，不受前端技術(shù)更新的影響，可以完全使用可視化頁面編輯器來制作頁面
提升用戶體驗(yàn)：頁面采用靜態(tài)化方案，渲染及訪問速度更快；提高穩(wěn)定性：采用 Nginx 直接轉(zhuǎn)發(fā)的方案，頁面路由可用性保障及響應(yīng)性能更具優(yōu)勢，同時支持更健壯的容災(zāi)方案，支持快速發(fā)版、回滾。；快速響應(yīng)業(yè)務(wù)需求：通過組件化復(fù)用，能夠快速響應(yīng)業(yè)務(wù)需求、提高研發(fā)人效；更好的業(yè)務(wù)賦能：使得產(chǎn)品、運(yùn)營等同學(xué)也能參與頁面的搭建，提升業(yè)務(wù)迭代效率和數(shù)據(jù)可用性。；更好的系統(tǒng)化能力：基于搭建系統(tǒng)，便于橫向和性能檢測系統(tǒng)、穩(wěn)定性保障系統(tǒng)、運(yùn)維部署系統(tǒng)、線上監(jiān)控系統(tǒng)進(jìn)行打通，形成系統(tǒng)級合力、復(fù)利。
淘寶-（未開源）
由設(shè)計(jì)稿一鍵智能生成代碼、ps、圖片、原型圖通過算法UI智能識別表達(dá)式轉(zhuǎn)成DSL，再解析DSL為前端頁面
還原設(shè)計(jì)稿；、ps、圖片、原型圖直接生成代碼；精準(zhǔn)還原；所見所得生；成代碼可維護(hù)強(qiáng)；機(jī)器智能識別理解；DSL / 可自定義
阿里-、Paas
配置生成搭建描述協(xié)議 - 標(biāo)準(zhǔn)規(guī)范 - 再生成頁面及邏輯、低代碼編輯器 - 開發(fā)生態(tài)
改變生產(chǎn)關(guān)系，提升生產(chǎn)力（賦能）- 中后臺通用搭建產(chǎn)品--所有人；降低研發(fā)成本（提效）- 低代碼開發(fā)平臺--開發(fā)人員（工程創(chuàng)建、開發(fā)、調(diào)試、發(fā)布全鏈路）；孵化領(lǐng)域產(chǎn)品（搭建生態(tài)）- PaaS平臺--開發(fā)人員（基礎(chǔ)設(shè)施，基于標(biāo)準(zhǔn)搭建協(xié)議生產(chǎn)搭建物料，為各業(yè)務(wù)場景提供搭建服務(wù)的運(yùn)行和開發(fā)環(huán)境）
阿里-云鳳蝶（未開源）/ （類似開源）
像做PPT一樣去做web前；頁面 Data 編輯
支持頁面 Data 編輯, 面向運(yùn)營、產(chǎn)品人員, 編輯自由度為無嵌套的組件.；目前制作運(yùn)營、活動頁面功能上最好的工具.；提供頁面搭建的模板, 并支持自定義模板.；配置表單基于 生成, 配置表單操作功能完善.
阿里-飛冰（未開源）/vue-（類似開源）
Tree 編輯；針對中后臺開發(fā)人員；針對組件化的頁面, 主要實(shí)現(xiàn) Tree 的可視化編輯. 其核心功能在于頁面布局設(shè)計(jì): 在 UI 組件列表中選擇合適的組件, 通過拖拉的方式將組件嵌入到頁面中, 生成帶布局和樣式的頁面
支持 Tree 編輯, 面向中后臺開發(fā)人員, 編輯自由度為無嵌套的組件；使用"物料-區(qū)塊", 非前端開發(fā)人員可以快速搭建出可用、符合規(guī)范的頁面.；頁面以源碼方式輸出.；前端服務(wù)化的一種方式.
淘寶-天馬（未開源）
跨端頁面搭建
跨終端搭建頁面；面向標(biāo)準(zhǔn)數(shù)據(jù)研發(fā).json；對模塊的props入?yún)⒚枋觯粩?shù)據(jù)標(biāo)準(zhǔn)化；數(shù)據(jù)驅(qū)動展示；編寫模塊代碼（解耦、模塊既代碼）；打包每個模塊單獨(dú)打包；從頁面視角seed動態(tài)加載；跨終端的緩存方案（phone tm tb緩存副本、對應(yīng)訪問、代碼標(biāo)識）；服務(wù)端渲染SSR
淘寶-方舟
設(shè)計(jì)實(shí)現(xiàn)toC營銷搭建
終端秒開；采用前端優(yōu)化手段實(shí)現(xiàn)終端秒開
阿里媽媽-淘積木（未開源）
從基礎(chǔ)組件搭建完整的營銷頁面的方案設(shè)計(jì)
阿里@維奇
文檔即代碼;文檔轉(zhuǎn)換成部分代碼
阿里alist /（開源）
表單方案作為搜索區(qū)域的不二之選時，通過對這些方案的整合，可以快速實(shí)現(xiàn)標(biāo)準(zhǔn)化的列表場景。;同時AList支持 JSON 協(xié)議渲染，可通過數(shù)據(jù)驅(qū)動快速開發(fā)。
內(nèi)置作為搜索區(qū)域方案，性能及功能強(qiáng)大;支持 Ant / Next 組件體系;支持JSON 數(shù)據(jù)驅(qū)動方案;副作用邏輯獨(dú)立管理，涵蓋各種復(fù)雜聯(lián)動校驗(yàn)邏輯;支持各種復(fù)雜布局方案
京東-MPM（未開源）
采用的數(shù)據(jù)配置方式解析成前端頁面，是本系統(tǒng)的核心， 是??的抽象描述層
搭建物料豐富:MPM 現(xiàn)有 30+ 個組件、500+ 個模板，業(yè)務(wù)能?覆蓋商品、導(dǎo)購、營銷等多個場景。配置功能強(qiáng)?:三端渲染是 MPM 的強(qiáng)?能?，除此之外，MPM 還?持??配置 BI 排序、?動化埋點(diǎn)、?動化測試、??測速等。系統(tǒng)能?全?:MPM 為??保駕護(hù)航，不但配備了流暢的拖拽編輯器、實(shí)時預(yù)覽和??健康診斷能?，還對系統(tǒng)和??做了全??的監(jiān)控和容災(zāi)降級?案。
美團(tuán)魔方（未開源）
從基礎(chǔ)組件搭建完整的營銷頁面的方案設(shè)計(jì)
美團(tuán)樂高（未開源）
從基礎(chǔ)組件搭建完整的營銷頁面的方案設(shè)計(jì)
(模仿樂高開源）
Drag vue to build your page， vue code.
開源項(xiàng)目, 模仿美團(tuán)點(diǎn)評的樂高.完整的可視化頁面搭建框架, 面向中后臺開發(fā)人員.頁面布局結(jié)果看起來比較亂, 自定義組件寫法比較詭異; 沒有融合業(yè)務(wù)邏輯, 不支持在框架中寫頁面的代碼邏輯.
UI表單設(shè)計(jì)及代碼生成器（開源）
UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。
Vue-（開源）
從基礎(chǔ)組件搭建完整的營銷頁面的方案設(shè)計(jì) 基于UI組件的Vue可視化布局、生成.vue代碼的工具。//form-
支持 Tree 編輯, 面向中后臺開發(fā)人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁面設(shè)計(jì), 所以偏向頁面元素的樣式控制.技術(shù)文章對可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì).
gaea-（開源）
開源項(xiàng)目.支持 Tree 編輯, 面向中后臺開發(fā)人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁面設(shè)計(jì), 所以偏向頁面元素的樣式控制.技術(shù)文章對可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì).
（開源）
運(yùn)營/產(chǎn)品活動頁面
（開源）
根據(jù)接口生成頁面，減少重復(fù)性工作
/not--in
Brick （開源）
拖拽區(qū)塊內(nèi)可直接編輯,生成前端頁面并預(yù)覽
百度H5（未開源）
/docs/intro營銷活動頁面搭建
其他（開源）
1.- 2.site- 3. 4. 5.Maha 6.有贊微頁面 7.X-Page--Vue
3 業(yè)界調(diào)研要點(diǎn)總結(jié)
基于對以上頁面可視化搭建工具調(diào)研，業(yè)界有很多看法，拿出兩個比較有代表性的文章供大家參考：
以上調(diào)研了那么多業(yè)界比較牛的前端可視化的框架工程，大致思路是類似的，百家爭鳴，盡管阿里的飛冰云鳳蝶很完善了但還是存在以下兩點(diǎn)問題：
這兩個問題存在就會導(dǎo)致我們生產(chǎn)設(shè)計(jì)出來的東西需要low code，如果是low code開發(fā)人員不愿意用，因?yàn)樯傻拇a不易維護(hù)且臃腫；如果給非開發(fā)人員用，他們又不會寫代碼，一點(diǎn)代碼都不想寫，所以他們也不愿意用；
而我們站在巨人的肩膀上，能否把上面兩個問題解決呢？目前我沒有什么好的辦法，但是我們可以先去把他們實(shí)現(xiàn)思路研究明白web在線編輯器 可貼圖，才有可能去處上面的最難以解決的問題。
3.1 業(yè)界的工具總結(jié)要點(diǎn)相通之處不同之處可借鑒之處應(yīng)該避免問題開源代碼可借鑒
1、DSL方式解析拖拽或者配置好的偽代碼生成所需前端頁面web在線編輯器 可貼圖，大部分使用的是JSON 形式；2、從配置要生成頁面整個處理步驟類似
1、處理方法不同；2、定義的DSL字段不同；3、優(yōu)化程度不同；4、針對的業(yè)務(wù)場景不同
1、從配置到生成DSL方式的偽代碼再到如何解析最后生成前端頁面的整體架構(gòu)設(shè)計(jì)及思想可借鑒；2、如何定時DSL字段的模式，如何處理轉(zhuǎn)移編譯打包上線及優(yōu)化
1、定位準(zhǔn)用戶群；2、后期維護(hù)問題
1、百度amis（開源可借鑒 react）2、vue-（類似飛冰開源 vue） 3、 （類似飛冰開源 react）4、美團(tuán)樂高（可參考 vue）5、美團(tuán)魔方（可參考react 6、(模仿樂高開源) 7、Brick （開源可借鑒 react） 8、gen（開源）9、gaea-（開源） 10、阿里alist/（開源）11、魯班H5(開源)
3.2 DSL方式
JSON Schem數(shù)據(jù)結(jié)構(gòu)特點(diǎn)：
demo1：
{
"type": "object",
"properties": {
"$attr": {
"type": "object",
"properties": {
"hidden": {
"type": "boolean"
}
}
},
"$theme": {
"type": "object",
"properties": {
"themeColor": {
"type": "string"
}
}
},
"items": {
"type": "array",
"items": {
"type": "object",
"properties": {
“
itemId”: {
"type": "string"
}
}
}
}
}
}:
{
"type": "page",
"body": {
"title": "",
"type": "form",
"autoFocus": false,
"api": "https://houtai.baidu.com/api/mock2/saveForm?waitSeconds=1",
"mode": "horizontal",
"controls": [{
"type": "fieldSet",
"title": "基本配置",
"controls": [{
"name": "a",
"type": "text",
"label": "文本1"
}, {
"name": "a",
"type": "text",
"label": "文本2"
}]
}, {
"type": "fieldSet",
"title": "其他配置",
"collapsable": true,
"collapsed": true,
"controls": [{
"name": "c",
"type": "text",
"label": "文本3"
}, {
"name": "d",
"type": "text",
"label": "文本4"
}]
}],
"submitText": null,
"actions": []
}
}