大家好，我是前端點(diǎn)線面，畢業(yè)于華中科技大學(xué)，非科班出身的一枚新時(shí)代農(nóng)民工，現(xiàn)在是百度前端研發(fā)工程師，著有《前端百題斬》、數(shù)十篇學(xué)習(xí)思維導(dǎo)圖（go、React、Redux、Vue、Vuex、操作系統(tǒng)、Linux、設(shè)計(jì)模式、js、webpack、nginx）以及大量前端進(jìn)階文章，大量同學(xué)已通過號(hào)主的系列內(nèi)容獲取心儀的offer，關(guān)注他獲取海量資料、交流工作心得并進(jìn)臥虎藏龍交流群。

無論大公司還是小公司，我們開發(fā)前端工程時(shí)候，項(xiàng)目工程又很多類似的功能或者頁面，開發(fā)經(jīng)常是加班加點(diǎn)搬磚去做一些無成長(zhǎng)反復(fù)操作的工作，看鍵盤上 Ctrl 鍵已經(jīng)被磨掉了漆，C 和 V 也馬上磨白了，那對(duì)于開發(fā)如何把這些重復(fù)的工作用機(jī)器去解決？在前端資源緊缺的情況下，是否可直接有工具直接就可以搭建出我想要的前端頁面？于是業(yè)界的頁面可視化搭建工具就出現(xiàn)了，本文會(huì)介紹目前最流行的頁面可視化搭建工具，也會(huì)提供一些業(yè)界開源的可視化搭建項(xiàng)目供大家參考（Copy）。

1 頁面可視化搭建 簡(jiǎn)介

編程開發(fā)頁面：動(dòng)態(tài)邏輯頁面分解為 HTML Tree, Data 和 Dynamic Logic. 前端開發(fā)工程師開發(fā)前端頁面的過程, 本質(zhì)上是用編程工具(IDE)對(duì)頁面的 HTML Tree, Data 和 Dynamic Logic 進(jìn)行增刪和修改.

頁面可視化搭建：是用可視化交互的方式對(duì)頁面的 HTML Tree, Data 和 Dynamic Logic 進(jìn)行增刪和修改, 從而實(shí)現(xiàn)頁面的生成. 頁面可視化搭建工具是實(shí)現(xiàn)頁面可視化編輯的軟件工具

目的：任何工具的存在都是更高效地解決問題. 頁面可視化搭建工具, 用于解決頁面生成的效率問題. 可能前端工程師會(huì)覺得最有效率的頁面生成方式是打代碼, 但有搭建頁面需求的不只是前端工程師. 而可視化頁面搭建工具, 恰恰是面向"就缺一個(gè)前端工程師"的人員, 用于提升他們生成頁面的效率.

差異點(diǎn)編程開發(fā)頁面可視化搭建頁面

技能要求	需要編程基礎(chǔ)	可以沒有編程基礎(chǔ)
操作方式	在代碼編輯器中編寫代碼	在可視化搭建工具中拖拉/填表/編寫代碼

2 業(yè)界調(diào)研（20+）

項(xiàng)目名稱項(xiàng)目簡(jiǎn)介能解決什么

百度amis（開源）	前端低代碼框架，通過 JSON 配置就能生成各種后臺(tái)頁面，極大減少開發(fā)成本，甚至可以不需要了解前端	不需要懂前端就能做出專業(yè)且復(fù)雜的后臺(tái)界面，不受前端技術(shù)更新的影響，可以完全使用可視化頁面編輯器來制作頁面
政采云-魯班（未開源）	魯班是一個(gè)基于業(yè)務(wù)組件快速生成頁面的搭建系統(tǒng)（站點(diǎn)、頁面、組件、數(shù)據(jù)、權(quán)限） ，JSON Schema將業(yè)務(wù)轉(zhuǎn)成數(shù)據(jù)→將數(shù)據(jù)轉(zhuǎn)為定義→將定義規(guī)范成結(jié)構(gòu)	提升用戶體驗(yàn)：頁面采用靜態(tài)化方案，渲染及訪問速度更快；提高穩(wěn)定性：采用 Nginx 直接轉(zhuǎn)發(fā)的方案，頁面路由可用性保障及響應(yīng)性能更具優(yōu)勢(shì)，同時(shí)支持更健壯的容災(zāi)方案，支持快速發(fā)版、回滾。；快速響應(yīng)業(yè)務(wù)需求：通過組件化復(fù)用，能夠快速響應(yīng)業(yè)務(wù)需求、提高研發(fā)人效；更好的業(yè)務(wù)賦能：使得產(chǎn)品、運(yùn)營(yíng)等同學(xué)也能參與頁面的搭建，提升業(yè)務(wù)迭代效率和數(shù)據(jù)可用性。；更好的系統(tǒng)化能力：基于搭建系統(tǒng)，便于橫向和性能檢測(cè)系統(tǒng)、穩(wěn)定性保障系統(tǒng)、運(yùn)維部署系統(tǒng)、線上監(jiān)控系統(tǒng)進(jìn)行打通，形成系統(tǒng)級(jí)合力、復(fù)利。
淘寶-imgcook（未開源）	由設(shè)計(jì)稿一鍵智能生成代碼Skecher、ps、圖片、原型圖通過算法UI智能識(shí)別表達(dá)式轉(zhuǎn)成DSL，再解析DSL為前端頁面	還原設(shè)計(jì)稿；Skecher、ps、圖片、原型圖直接生成代碼；精準(zhǔn)還原；所見所得生；成代碼可維護(hù)強(qiáng)；機(jī)器智能識(shí)別理解；DSL / Plugin可自定義
阿里-iceluna、Paas ?	配置生成搭建描述協(xié)議 - 標(biāo)準(zhǔn)規(guī)范 - Schema再生成頁面及邏輯、低代碼編輯器 - 開發(fā)生態(tài)	改變生產(chǎn)關(guān)系，提升生產(chǎn)力（賦能）- 中后臺(tái)通用搭建產(chǎn)品--所有人；降低研發(fā)成本（提效）- 低代碼開發(fā)平臺(tái)--開發(fā)人員（工程創(chuàng)建、開發(fā)、調(diào)試、發(fā)布全鏈路）；孵化領(lǐng)域產(chǎn)品（搭建生態(tài)）- PaaS平臺(tái)--開發(fā)人員（基礎(chǔ)設(shè)施，基于標(biāo)準(zhǔn)搭建協(xié)議生產(chǎn)搭建物料，為各業(yè)務(wù)場(chǎng)景提供搭建服務(wù)的運(yùn)行和開發(fā)環(huán)境）
阿里-云鳳蝶（未開源）/pipeline （類似開源）	像做PPT一樣去做web前；頁面 Data 編輯	支持頁面 Data 編輯, 面向運(yùn)營(yíng)、產(chǎn)品人員, 編輯自由度為無嵌套的組件.；目前制作運(yùn)營(yíng)、活動(dòng)頁面功能上最好的工具.；提供頁面搭建的模板, 并支持自定義模板.；配置表單基于 Schema 生成, 配置表單操作功能完善.
阿里-飛冰（未開源）/vue-layout（類似開源）	Component Tree 編輯；針對(duì)中后臺(tái)開發(fā)人員；針對(duì)組件化的頁面, 主要實(shí)現(xiàn) Component Tree 的可視化編輯. 其核心功能在于頁面布局設(shè)計(jì): 在 UI 組件列表中選擇合適的組件, 通過拖拉的方式將組件嵌入到頁面中, 生成帶布局和樣式的頁面.	支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為無嵌套的組件；使用"物料-區(qū)塊", 非前端開發(fā)人員可以快速搭建出可用、符合規(guī)范的頁面.；頁面以源碼方式輸出.；前端服務(wù)化的一種方式.
淘寶-天馬（未開源）	跨端頁面搭建	跨終端搭建頁面；面向標(biāo)準(zhǔn)數(shù)據(jù)研發(fā)schema.json；對(duì)模塊的props入?yún)⒚枋?#xff1b;數(shù)據(jù)標(biāo)準(zhǔn)化；數(shù)據(jù)驅(qū)動(dòng)展示；編寫模塊代碼（解耦、模塊既代碼）；打包每個(gè)模塊單獨(dú)打包；從頁面視角seed動(dòng)態(tài)加載；跨終端的緩存方案（phone tm tb緩存副本、對(duì)應(yīng)訪問、代碼標(biāo)識(shí)）；服務(wù)端渲染SSR
淘寶-方舟	設(shè)計(jì)實(shí)現(xiàn)toC營(yíng)銷搭建	終端秒開；采用前端優(yōu)化手段實(shí)現(xiàn)終端秒開
阿里媽媽-淘積木（未開源）	從基礎(chǔ)組件搭建完整的營(yíng)銷頁面的方案設(shè)計(jì)
阿里@維奇	文檔即代碼;文檔轉(zhuǎn)換成部分代碼
阿里alist /Formily（開源）	Formily 表單方案作為搜索區(qū)域的不二之選時(shí)，通過對(duì)這些方案的整合，可以快速實(shí)現(xiàn)標(biāo)準(zhǔn)化的列表場(chǎng)景。;同時(shí)AList支持 JSON Schema 協(xié)議渲染，可通過數(shù)據(jù)驅(qū)動(dòng)快速開發(fā)。	內(nèi)置Formily作為搜索區(qū)域方案，性能及功能強(qiáng)大;支持 Ant Design/Fusion Next 組件體系;支持JSON Schema 數(shù)據(jù)驅(qū)動(dòng)方案;副作用邏輯獨(dú)立管理，涵蓋各種復(fù)雜聯(lián)動(dòng)校驗(yàn)邏輯;支持各種復(fù)雜布局方案
京東-MPM（未開源）	采用ComData的數(shù)據(jù)配置方式解析成前端頁面，是本系統(tǒng)的核心，7PageData 是??的抽象描述層	搭建物料豐富:MPM 現(xiàn)有 30+ 個(gè)組件、500+ 個(gè)模板，業(yè)務(wù)能?覆蓋商品、導(dǎo)購、營(yíng)銷等多個(gè)場(chǎng)景。配置功能強(qiáng)?:三端渲染是 MPM 的強(qiáng)?能?，除此之外，MPM 還?持??配置 BI 排序、?動(dòng)化埋點(diǎn)、?動(dòng)化測(cè)試、??測(cè)速等。系統(tǒng)能?全?:MPM 為??保駕護(hù)航，不但配備了流暢的拖拽編輯器、實(shí)時(shí)預(yù)覽和??健康診斷能?，還對(duì)系統(tǒng)和??做了全??的監(jiān)控和容災(zāi)降級(jí)?案。
美團(tuán)魔方（未開源）	從基礎(chǔ)組件搭建完整的營(yíng)銷頁面的方案設(shè)計(jì)
美團(tuán)樂高（未開源）	從基礎(chǔ)組件搭建完整的營(yíng)銷頁面的方案設(shè)計(jì)
esview(模仿樂高開源）	Drag vue dynamic components to build your page，generate vue code.	esview開源項(xiàng)目, 模仿美團(tuán)點(diǎn)評(píng)的樂高.完整的可視化頁面搭建框架, 面向中后臺(tái)開發(fā)人員.頁面布局結(jié)果看起來比較亂, 自定義組件寫法比較詭異; 沒有融合業(yè)務(wù)邏輯, 不支持在框架中寫頁面的代碼邏輯.
Element UI表單設(shè)計(jì)及代碼生成器（開源）	Element UI表單設(shè)計(jì)及代碼生成器，可將生成的代碼直接運(yùn)行在基于Element的vue項(xiàng)目中；也可導(dǎo)出JSON表單，使用配套的解析器將JSON解析成真實(shí)的表單。
Vue-Layout（開源）	從基礎(chǔ)組件搭建完整的營(yíng)銷頁面的方案設(shè)計(jì) 基于UI組件的Vue可視化布局、生成.vue代碼的工具。https://github.com/JakHuang/form-generator	支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁面設(shè)計(jì), 所以偏向頁面元素的樣式控制.技術(shù)文章對(duì)可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì).
gaea-editor（開源）	開源項(xiàng)目.支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.頁面的拖拉生成, 實(shí)現(xiàn)得很完整.用于頁面設(shè)計(jì), 所以偏向頁面元素的樣式控制.技術(shù)文章對(duì)可視化搭建工具數(shù)據(jù)流有深刻理解: 可視化在線編輯器架構(gòu)設(shè)計(jì).
pipeline（開源）	運(yùn)營(yíng)/產(chǎn)品活動(dòng)頁面
gengen（開源）	根據(jù)接口生成頁面，減少重復(fù)性工作
H5.cn	https://www.ih5.cn/not-logged-in
Brick Design（開源）	拖拽區(qū)塊內(nèi)可直接編輯,生成前端頁面并預(yù)覽
百度H5（未開源）	https://h5.bce.baidu.com/docs/intro營(yíng)銷活動(dòng)頁面搭建
其他（開源）	1.website-builder 2.site-builder 3.VvvebJs 4.grapesjs 5.Maha 6.有贊微頁面 7.X-Page-Editor-Vue

3 業(yè)界調(diào)研要點(diǎn)總結(jié)

基于對(duì)以上頁面可視化搭建工具調(diào)研，業(yè)界有很多看法，拿出兩個(gè)比較有代表性的文章供大家參考：

• 基于現(xiàn)代的前端框架，為什么沒有成熟的支持控件拖拽布局，并可以自動(dòng)生成前端代碼的設(shè)計(jì)器出現(xiàn)？

• 前端服務(wù)化——頁面搭建工具的死與生

以上調(diào)研了那么多業(yè)界比較牛的前端可視化的框架工程，大致思路是類似的，百家爭(zhēng)鳴，盡管阿里的飛冰云鳳蝶很完善了但還是存在以下兩點(diǎn)問題：

• 無法自動(dòng)生成交互邏輯

• 只能在受限、具體的業(yè)務(wù)場(chǎng)景下發(fā)揮作用

這兩個(gè)問題存在就會(huì)導(dǎo)致我們生產(chǎn)設(shè)計(jì)出來的東西需要low code，如果是low code開發(fā)人員不愿意用，因?yàn)樯傻拇a不易維護(hù)且臃腫；如果給非開發(fā)人員用，他們又不會(huì)寫代碼，一點(diǎn)代碼都不想寫，所以他們也不愿意用；

而我們站在巨人的肩膀上，能否把上面兩個(gè)問題解決呢？目前我沒有什么好的辦法，但是我們可以先去把他們實(shí)現(xiàn)思路研究明白，才有可能去處上面的最難以解決的問題。

3.1 業(yè)界的工具總結(jié)要點(diǎn)

相通之處不同之處可借鑒之處應(yīng)該避免問題開源代碼可借鑒

1、DSL方式解析拖拽或者配置好的偽代碼生成所需前端頁面，大部分使用的是JSON Schema形式；2、從配置要生成頁面整個(gè)處理步驟類似	1、處理方法不同；2、定義的DSL字段不同； 3、優(yōu)化程度不同；4、針對(duì)的業(yè)務(wù)場(chǎng)景不同	1、從配置到生成DSL方式的偽代碼再到如何解析最后生成前端頁面的整體架構(gòu)設(shè)計(jì)及思想可借鑒； 2、如何定時(shí)DSL字段schema的模式，如何處理轉(zhuǎn)移編譯打包上線及優(yōu)化	1、定位準(zhǔn)用戶群；2、后期維護(hù)問題	1、百度amis（開源可借鑒 react） 2、vue-layout（類似飛冰開源 vue） 3、pipeline （類似飛冰開源 react） 4、美團(tuán)樂高（可參考 vue） 5、美團(tuán)魔方（可參考react 6、esview(模仿樂高開源) 7、Brick Design（開源可借鑒 react） 8、gen（開源）9、gaea-editor（開源） 10、阿里alist/Formily（開源） 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"}}}}} } 復(fù)制代碼

demo2：

{"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":?[]} } 復(fù)制代碼

---

4. 說明

關(guān)于前端可視化搭建，我另外一篇文章【2020年前端技術(shù)浪潮與應(yīng)用-01.前端可視化?】也有相關(guān)介紹

說明：業(yè)界調(diào)研中每個(gè)項(xiàng)目點(diǎn)擊標(biāo)題都可查看項(xiàng)目詳情，markDown文檔插入圖片太麻煩了，于是小圓臉兒同學(xué)放棄了圖片介紹，有需要了解的同學(xué)我后面再來補(bǔ)（copy過來）各個(gè)我知道的設(shè)計(jì)架構(gòu)及詳設(shè)的圖，哈哈哈。

·················?執(zhí)鳶者簡(jiǎn)介?·················

大家好，我是執(zhí)鳶者，畢業(yè)于華中科技大學(xué)，新時(shí)代農(nóng)民工，現(xiàn)在是百度前端研發(fā)工程師，著有《前端百題斬》、數(shù)十篇學(xué)習(xí)思維導(dǎo)圖（go、React、Redux、Vue、Vuex、操作系統(tǒng)、Linux、設(shè)計(jì)模式、js、webpack、nginx）以及大量前端進(jìn)階文章，大量同學(xué)已通過號(hào)主的系列內(nèi)容獲取心儀的offer，關(guān)注我獲取海量資料、交流工作心得并進(jìn)臥虎藏龍交流群。

識(shí)別上方二維碼加我微信、拉你進(jìn)交流群

[1]?五萬字前端面試寶典——前端百題斬（上）新鮮出爐

[2]?純CSS實(shí)現(xiàn)beautiful按鈕

[3] 一張思維導(dǎo)圖入門React

[4] 一文搞定Diff算法

[5]?16張圖入門Nginx——（前端夠用，運(yùn)維入門）

[6]?好記性不如爛筆頭——Vue3.0篇

[7]?好記性不如爛筆頭——Vuex篇

[8]?好記性不如爛筆頭——Linux篇

[9]好記性不如爛筆頭——React篇

[10]?好記性不如爛筆頭——Redux篇

總結(jié)

以上是生活随笔為你收集整理的百家争鸣的低代码平台的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。