頁(yè)面可視化搭建工具前生今世

原文地址: https://github.com/CntChen/cntchen.github.io/issues/15

背景

引子

頁(yè)面可視化搭建, 是一個(gè)歷久彌新的話題. 更廣義上講, 頁(yè)面是 GUI 的一部分, GUI 的拖拉生成在各種開發(fā)工具上很常見, 如 Android Studio, Xcode, Visual Studio 等. 前端頁(yè)面早在十幾年前就能用 Dreamweaver, Frontpage 等工具可視化搭建出來.

Dreamweaver 操作頁(yè)面示例:

dreamweaver_demo

但是現(xiàn)在已經(jīng)很少人使用 Dreamweaver 了, 其主要原因是頁(yè)面承載的內(nèi)容已經(jīng)和頁(yè)面源碼分離, 由后端接口返回再渲染到頁(yè)面, 靜態(tài)頁(yè)面網(wǎng)站無法承載大量的動(dòng)態(tài)內(nèi)容.

Dreamweaver 死了, 但是頁(yè)面可視化搭建工具依然廣泛需要和使用, 所以這個(gè)話題依然值得探討.

文章內(nèi)容

頁(yè)面構(gòu)成和頁(yè)面組件化.
頁(yè)面可視化搭建工具的必要性.
頁(yè)面可視化搭建工具的區(qū)分維度.
業(yè)界的實(shí)踐實(shí)例.

頁(yè)面

頁(yè)面是 HTML / DOM

頁(yè)面可視化搭建的操作對(duì)象是頁(yè)面. 頁(yè)面是一份 HTML 文檔, 不管是靜態(tài)頁(yè)面還是動(dòng)態(tài)渲染出來的頁(yè)面, 在頁(yè)面上看到的內(nèi)容, 都是 HTML 文檔的一部分.

對(duì) HTML 文檔的實(shí)例化和操作, 通過文檔對(duì)象模型(DOM)來實(shí)現(xiàn), 也可以說頁(yè)面是一個(gè) DOM. 本文沒有嚴(yán)格區(qū)分 HTML 和 DOM 這兩個(gè)概念, 以下行文都用 HTML 這個(gè)概念.

HTML 使用一種樹形結(jié)構(gòu)來表示頁(yè)面, 樹的每個(gè)節(jié)點(diǎn)為一個(gè)頁(yè)面元素或文本節(jié)點(diǎn), 一個(gè)頁(yè)面元素可以包含多個(gè)頁(yè)面元素節(jié)點(diǎn)或文本節(jié)點(diǎn). 頁(yè)面元素通常稱為標(biāo)簽, 頁(yè)面元素類型由 HTML 規(guī)范定義.

HTML 結(jié)構(gòu)示例:

pic_htmltree

https://www.w3schools.com/js/js_htmldom.asp

頁(yè)面是 `HTML Tree` + `Data`

從前端開發(fā)的角度, 可以認(rèn)為頁(yè)面是由 HTML Tree 和 Data 組成, HTML Tree 是頁(yè)面元素的樹形結(jié)構(gòu), Data 是頁(yè)面元素的屬性或文本節(jié)點(diǎn). 下圖中藍(lán)色框所示的節(jié)點(diǎn)可以認(rèn)為是數(shù)據(jù).

pic_htmltree_data

為什么從前端開發(fā)角度會(huì)說頁(yè)面是 HTML Tree + Data? 舉一個(gè)常見場(chǎng)景來說明: 在開發(fā)新頁(yè)面時(shí), 我們是可以復(fù)制已有頁(yè)面(好吧, 我就是這樣的前端工程師), 然后只修改頁(yè)面 HTML, 或者只修改數(shù)據(jù), 或同時(shí)修改 HTML 和數(shù)據(jù), 從而完成新頁(yè)面的開發(fā).

靜態(tài)頁(yè)面和動(dòng)態(tài)邏輯頁(yè)面

上一節(jié)說頁(yè)面的由 HTML Tree 和 Data 組成, 討論的是靜態(tài)頁(yè)面.

what_is_static_page

瀏覽器請(qǐng)求靜態(tài)頁(yè)面, 網(wǎng)絡(luò)返回的 HTML 源碼就是頁(yè)面渲染完成后的 HTML. 靜態(tài)頁(yè)面的源碼和頁(yè)面渲染結(jié)果一致:

static_page_render_result

當(dāng)下, 前端頁(yè)面更多的是有動(dòng)態(tài)邏輯的頁(yè)面, 在頁(yè)面中引入和使用動(dòng)態(tài)腳本(Javascript)對(duì)頁(yè)面進(jìn)行修改和控制.

what_is_dynamic_page

瀏覽器請(qǐng)求動(dòng)態(tài)邏輯頁(yè)面, 網(wǎng)絡(luò)返回的 HTML 源碼與頁(yè)面渲染完成后的 HTML 有差異. 動(dòng)態(tài)邏輯頁(yè)面的源碼和渲染結(jié)果有差異:

dynamic_logic_page_render_result

頁(yè)面組件化

頁(yè)面渲染后是一棵 HTML 元素構(gòu)成的樹, 頁(yè)面的可編輯粒度為 HTML 規(guī)范定義的 HTML 元素.
使用 Web Components 組合 HTML 元素, 實(shí)現(xiàn)了功能封裝和可復(fù)用的頁(yè)面組件. 在流行的前端框架中, 都提供了組件化的功能, 從前端框架的視角看, 頁(yè)面是由組件樹組成. 這些組件內(nèi)部維護(hù)自身的 HTML 元素結(jié)構(gòu)抠刺、樣式和功能邏輯, 并通過組件的 props 獲取外部傳入的數(shù)據(jù), 實(shí)現(xiàn)了功能封裝和復(fù)用.

Vue 組件樹示例:

vue_components

https://vuejs.org/v2/guide/#Composing-with-Components

并沒有討論 CSS

在以上的章節(jié)中, 我們并沒有討論決定頁(yè)面樣式的 CSS. 因?yàn)榻柚?Javascript 的動(dòng)態(tài)邏輯, CSS 可以歸入到 Data 的范圍: 通過對(duì)頁(yè)面元素 style attribute 的修改, 或?qū)?CSS 屬性動(dòng)態(tài)添加到 <style> 標(biāo)簽中, 可以實(shí)現(xiàn)對(duì)頁(yè)面元素樣式的修改.

頁(yè)面可視化搭建

有了對(duì)頁(yè)面組成的認(rèn)知基礎(chǔ)恰聘，可以對(duì)頁(yè)面可視化搭建有更多的討論: 頁(yè)面可視化搭建是什么? 為什么需要?

是什么

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

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

用頁(yè)面可視化搭建工具來搭建頁(yè)面與前端工程師在頁(yè)面上搬磚, 都是搭建頁(yè)面, 區(qū)別在于實(shí)現(xiàn)頁(yè)面搭建的方式. 做個(gè)簡(jiǎn)單對(duì)比:


差異點(diǎn)	編程開發(fā)頁(yè)面	可視化搭建頁(yè)面
技能要求	需要編程基礎(chǔ)	可以沒有編程基礎(chǔ)
操作方式	在代碼編輯器中編寫代碼	在可視化搭建工具中拖拉/填表/編寫代碼

為什么需要

任何工具的存在都是更高效地解決問題. 頁(yè)面可視化搭建工具, 用于解決頁(yè)面生成的效率問題.
可能前端工程師會(huì)覺得最有效率的頁(yè)面生成方式是打代碼, 但有搭建頁(yè)面需求的不只是前端工程師. 而可視化頁(yè)面搭建工具, 恰恰是面向"就缺一個(gè)前端工程師"的人員, 用于提升他們生成頁(yè)面的效率.
我們可以從一些使用場(chǎng)景來窺探頁(yè)面可視化搭建工具的應(yīng)用場(chǎng)合.

頁(yè)面小白做 H5

頁(yè)面小白不需要任何頁(yè)面相關(guān)的知識(shí), 不需要了解 HTML/JS/CSS 這些概念, 只要像使用 Word 一樣在 H5 制作工具上操作, 就可以做出一個(gè)挺漂亮的頁(yè)面. H5 制作工具很多, 其中百度H5 做很好不錯(cuò).

如: 小陳女票要生日了, 小陳為女票做了一個(gè)有創(chuàng)意的生日祝福頁(yè)面:

baidu_h5

營(yíng)銷活動(dòng)頁(yè)面搭建

大多數(shù)互聯(lián)網(wǎng)公司需要做許多的活動(dòng)頁(yè)面來承載運(yùn)營(yíng)業(yè)務(wù). 運(yùn)營(yíng)活動(dòng)頁(yè)面的特點(diǎn)是: 頁(yè)面功能大同小異汞扎、需求急、時(shí)間緊旋炒、下線快杨拐、研發(fā)性很比低. 前端工程師無法持續(xù)開發(fā)無窮無盡的活動(dòng)頁(yè)面, 需要采用活動(dòng)頁(yè)面可視化搭建工具, 由運(yùn)營(yíng)人員/產(chǎn)品人員直接生成活動(dòng)頁(yè)面. 研發(fā)人員的工作轉(zhuǎn)變?yōu)樘峁M足活動(dòng)頁(yè)面業(yè)務(wù)需要的活動(dòng)模板.

如: 抽獎(jiǎng)活動(dòng)頁(yè)面的可視化搭建:

activity_demo

中后臺(tái)系統(tǒng)開發(fā)

在公司內(nèi)部, 需要做許多的中后臺(tái)支持系統(tǒng), 這些系統(tǒng)的管理端一般用 web 頁(yè)面承載. 那么問題來了, 中后臺(tái)系統(tǒng)的前端工程, 怎么保障可用性厘唾、可維護(hù)性和頁(yè)面呈現(xiàn)一致性? 這些系統(tǒng)與后臺(tái)邏輯強(qiáng)關(guān)聯(lián), 一般由后臺(tái)開發(fā)人員開發(fā); 后臺(tái)開發(fā)人員寫代碼邏輯是沒有問題的, 但是其前端開發(fā)能力相對(duì)較弱. 所以需要增強(qiáng)他們開發(fā)前端頁(yè)面的能力, 前端開發(fā)能力由前端服務(wù)化提供.

前端服務(wù)化的第一種方式是提供一套組件庫(kù), 如餓了么的 Element.
組件庫(kù)一般由前端開發(fā)人員封裝成模板工程, 模板工程提供公共樣式和函數(shù)庫(kù), 并對(duì)編寫的代碼做校驗(yàn)和約束, 一定程度上降低了前端開發(fā)難度, 統(tǒng)一后臺(tái)人員代碼風(fēng)格. 此時(shí)后臺(tái)開發(fā)人員的開發(fā)方式為: 在代碼中用組件拼湊頁(yè)面, 然后寫代碼邏輯.

前端服務(wù)化的第二種方式, 是提供頁(yè)面可視化組裝系統(tǒng), 這個(gè)系統(tǒng)輸出組裝后的前端工程源碼. 這樣的系統(tǒng)比提供組件庫(kù)和模板工程的方式走得更遠(yuǎn): 通過可視化生成模板工程, 后臺(tái)開發(fā)人員不需要在代碼中拼湊前端頁(yè)面, 不需要關(guān)注前端組件, 只需要編寫代碼邏輯.
這種方式可以參考阿里的 ice.

阿里 ice 示例:

iceworks_demo

前端服務(wù)化的終極方式, 是直接提供一個(gè)開發(fā)的 IDE, 將動(dòng)態(tài)邏輯的書寫也在 IDE 中完成.
如美團(tuán)外賣前端可視化界面組裝平臺(tái) —— 樂高, 前端服務(wù)化——頁(yè)面搭建工具的死與生.

美團(tuán)樂高示例:

lego_demo

前端服務(wù)化

更加廣泛來說, 為頁(yè)面小白/運(yùn)營(yíng)人員/產(chǎn)品人員提供的頁(yè)面可視化生成工具, 也是賦予以上人員前端開發(fā)的能力. 所以頁(yè)面可視化搭建, 本質(zhì)上是前端服務(wù)化的一部分. 前端服務(wù)化總結(jié), 可以看百度的前端即服務(wù)-通向零成本開發(fā)之路.

頁(yè)面可視化搭建工具區(qū)分維度

有了前文對(duì)頁(yè)面的基礎(chǔ)認(rèn)知, 終于進(jìn)入了本文的正題 -- 頁(yè)面可視化搭建工具.
前面已經(jīng)零星討論過頁(yè)面可視化搭建工具的定義, 再總結(jié)一下: 頁(yè)面可視化搭建, 是指用可視化交互的方式(對(duì)比編寫代碼的方式), 實(shí)現(xiàn)頁(yè)面的修改或生成; 頁(yè)面可視化搭建工具, 增強(qiáng)了使用者的前端開發(fā)能力, 提升了使用者修改或生成頁(yè)面的效率.

思考一個(gè)更具體的問題: 當(dāng)我們討論頁(yè)面可視化搭建工具時(shí), 怎么進(jìn)行描述和討論? 換個(gè)角度提問題: 可以從什么維度對(duì)頁(yè)面可視化搭建工具進(jìn)行描述和區(qū)分?

頁(yè)面可視化搭建工具的區(qū)分維度包括:

系統(tǒng)功能
面向客群
編輯自由度

下文會(huì)對(duì)頁(yè)面可視化搭建工具的區(qū)分維度做介紹, 并會(huì)對(duì)每個(gè)區(qū)分維度提供示例(這些示例不會(huì)展開討論, 且在不同維度下會(huì)多次使用同個(gè)示例).

系統(tǒng)功能

頁(yè)面可視化搭建工具的系統(tǒng)功能是指該工具在解決特定頁(yè)面可視化搭建問題上提供的核心能力.
頁(yè)面是由HTML Tree, Data 和 Dynamic Logic 三部分組成, 一個(gè)頁(yè)面可視化搭建工具提供的能力是編輯頁(yè)面組成部分之一或多部分. 對(duì)基于組件的頁(yè)面, 其可編輯單元為組件, 此時(shí)采用 Component Tree 概念取代 HTML Tree.

system_function_category

`HTML Tree` 編輯

這類頁(yè)面搭建工具專注于可視化地編輯頁(yè)面 HTML Tree 部分, 一般可以對(duì)頁(yè)面做自由度較高的編輯.
其關(guān)鍵功能在于高自由度: 幾乎可以編輯頁(yè)面可見的所有元素, 能自由修改頁(yè)面結(jié)構(gòu)唬格、頁(yè)面元素樣式和頁(yè)面數(shù)據(jù), 采用類似 Word, Photoshop 的可視化編輯方式.
這類工具一般只適用于生成邏輯比較簡(jiǎn)單的頁(yè)面, 其中原因后續(xù)會(huì)講.
常說的 H5 制作工具就是指這類工具.

如: 百度H5、iH5

`Component Tree` 編輯

這類頁(yè)面搭建工具針對(duì)組件化的頁(yè)面, 主要實(shí)現(xiàn) Component Tree 的可視化編輯. 其核心功能在于頁(yè)面布局設(shè)計(jì): 在 UI 組件列表中選擇合適的組件, 通過拖拉的方式將組件嵌入到頁(yè)面中, 生成帶布局和樣式的頁(yè)面.

如: ice 阿里飛冰仓坞、vue-layout

vue-layout 示例:

vue_layout_demo

https://jaweii.github.io/Vue-Layout/dist/#/

頁(yè)面 `Data` 編輯

這類頁(yè)面搭建工具專注于可視化地編輯頁(yè)面的 Data 部分, 如圖片URL背零、按鈕文本、按鈕跳轉(zhuǎn)鏈接等.
這類搭建工具主要針對(duì) HTML Tree 比較固定无埃、能承載復(fù)雜業(yè)務(wù)邏輯的頁(yè)面. HTML Tree 固定的常見方式是頁(yè)面組件化, 只需修改頁(yè)面組件的 Data 就能快速地生成頁(yè)面.
其核心功能在于快速搭建承載業(yè)務(wù)邏輯的頁(yè)面.
通常營(yíng)銷活動(dòng)頁(yè)面就采用這種方式來可視化搭建.

如: 阿里云鳳蝶徙瓶、開源的 pipeline

阿里云鳳蝶示例:

yunfengdie_demo

`Dynamic Logic` 編輯

這類頁(yè)面搭建工具支持在界面上輸入邏輯代碼, 實(shí)現(xiàn)頁(yè)面 Dynamic Logic 編輯, 如后臺(tái)接口請(qǐng)求邏輯, 業(yè)務(wù)判斷邏輯等.
這些邏輯代碼需要有合適的插入點(diǎn), 一般在事件鉤子中提供插入點(diǎn), 如頁(yè)面 onload、網(wǎng)絡(luò)請(qǐng)求狀態(tài)變更嫉称、按鈕事件侦镇、數(shù)據(jù)變更等.
做到可以支持編輯 Dynamic Logic 是超牛逼的事情, 這類工具對(duì)頁(yè)面的理解最深入, 對(duì)開發(fā)者的技術(shù)能力、前端架構(gòu)能力和開發(fā)能力都要求很高.

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

系統(tǒng)功能組合

還有其他系統(tǒng)功能的組合, 可以綜合上面的典型類別來做討論.

面向客群

頁(yè)面可視化搭建工具的面向客群是指工具的使用客群. 不同的使用客群, 其對(duì)頁(yè)面技術(shù)的認(rèn)知程度澎埠、搭建頁(yè)面的訴求有所不同, 所以可以從工具的面向客群來區(qū)分不同工具.

custom_category

前端小白

前端小白是不具有前端知識(shí)的人群, 他們對(duì)頁(yè)面可視化搭建工具的訴求是交互性越高越好. 最適合他們的工具是像 Word, Powerpoint, Photoshop 等具有豐富交互功能, 且所見即所得的頁(yè)面搭建工具.
同時(shí)他們也不關(guān)心頁(yè)面最后用什么方式托管到互聯(lián)網(wǎng)上, 頁(yè)面編輯完成后要幫他們?cè)诠W(wǎng)上托管頁(yè)面, 并提供頁(yè)面鏈接, 方便前端小白將頁(yè)面發(fā)給自己的女朋友.

如頁(yè)面界的 Photoshop:

ih5_demo

https://www.ih5.cn

運(yùn)營(yíng)/產(chǎn)品

運(yùn)營(yíng)虽缕、產(chǎn)品人員沒有開發(fā)人員頁(yè)面開發(fā)、邏輯編程的能力, 他們的訴求是可以快速搭建活動(dòng)、產(chǎn)品頁(yè)面. 活動(dòng)氮趋、產(chǎn)品頁(yè)面是承載著業(yè)務(wù)邏輯的: 如包含領(lǐng)取優(yōu)惠券功能伍派、背景音樂播放功能、產(chǎn)品購(gòu)買功能等. 運(yùn)營(yíng)剩胁、產(chǎn)品對(duì)頁(yè)面可視化搭建的另一個(gè)訴求是“快速”: 一天好幾個(gè)活動(dòng), 怎么快怎么來.
面向運(yùn)營(yíng)诉植、產(chǎn)品的可視化搭建工具, 需要將頁(yè)面的邏輯功能封裝在頁(yè)面區(qū)塊內(nèi), 支持通過點(diǎn)擊來選擇區(qū)塊, 然后在表單中編輯區(qū)塊所需數(shù)據(jù), 只對(duì)頁(yè)面進(jìn)行少量編輯就完成業(yè)務(wù)頁(yè)面搭建.
如領(lǐng)取優(yōu)惠券的頁(yè)面, 運(yùn)營(yíng)、產(chǎn)品只要在表單中填入優(yōu)惠券的 ID, 然后就快速生成領(lǐng)取該優(yōu)惠券的頁(yè)面, 不需要關(guān)心優(yōu)惠券在頁(yè)面上如何展示和被領(lǐng)取的具體邏輯.

如, 開源項(xiàng)目 pipeline:

demo

中后臺(tái)開發(fā)人員

中后臺(tái)開發(fā)人員具有邏輯編程能力, 但其前端開發(fā)能力比較弱. 中后臺(tái)開發(fā)人員的訴求是, 在開發(fā)中后臺(tái)系統(tǒng)的 Web 管理端時(shí), 不需要進(jìn)行重度的前端頁(yè)面結(jié)構(gòu)和樣式開發(fā), 可以專注在邏輯和數(shù)據(jù)處理上.
這要求頁(yè)面可視化搭建工具提供頁(yè)面搭建的區(qū)塊, 對(duì)區(qū)塊進(jìn)行可視化組合來輸出一個(gè)基本的前端頁(yè)面; 并在頁(yè)面搭建工具上提供業(yè)務(wù)邏輯編寫的輸入點(diǎn), 或?qū)⒒厩岸隧?yè)面源碼導(dǎo)出到 IDE 中供中后臺(tái)開發(fā)人員進(jìn)行業(yè)務(wù)邏輯的開發(fā).

如: ice 阿里飛冰

前端工程師

要啥頁(yè)面可視化搭建工具, 抓起鍵盤就開始干.

just_do_it

編輯自由度

頁(yè)面可視化搭建工具的編輯自由度, 是指頁(yè)面可編輯單元的粒度. 前端頁(yè)面的可編輯單元為 HTML 元素; 從前端頁(yè)面組件化的角度, 頁(yè)面可編輯單元為組件.
不同的編輯自由度的選擇, 是可視化搭建工具在不同業(yè)務(wù)場(chǎng)景下編輯自由度與編輯效率的平衡.

degree_of_freedom_category

編輯自由度為 HTML 元素(左)與自由度為組件(右)的示例:

edit_free_degree

編輯自由度為 HTML 元素

編輯自由度為 HTML 元素的頁(yè)面搭建工具有以下特點(diǎn): 可編輯的元素豐富昵观、頁(yè)面結(jié)構(gòu)靈活晾腔、可視化編輯效率較低、業(yè)務(wù)邏輯封裝度較低.
這類工具的可編輯單元為 HTML 元素, 可以編輯元素的文本啊犬、樣式和行為, 可編輯的元素較豐富; 并且可以組合各種 HTML 元素到頁(yè)面中, 生成的頁(yè)面結(jié)構(gòu)靈活; 從生成頁(yè)面的角度, 編輯出一個(gè)頁(yè)面需要從基本的 HTML 元素開始搭建, 可視化編輯的工作量較大; 一個(gè)業(yè)務(wù)功能的實(shí)現(xiàn), 通常需要渲染多個(gè) HTML 元素, 而這類工具可以自由增刪業(yè)務(wù)所需的 HTML 元素, 這導(dǎo)致無法固定地承載業(yè)務(wù)功能, 所以這類編輯工具生成的頁(yè)面, 業(yè)務(wù)邏輯封裝程度較低.

如: iH5灼擂、vvveb

vvveb 示例:

vvveb_demo

http://www.vvveb.com/vvvebjs/editor.html

編輯自由度為前端框架組件

編輯自由度為前端框架組件的頁(yè)面搭建工具有以下特點(diǎn): 可編輯的元素依賴搭建工具提供的組件, 可視化編輯效率較高、業(yè)務(wù)邏輯封裝度較高.
這類工具的最小可編輯單元為前端框架的組件, 這些組件需要開發(fā)并導(dǎo)入到頁(yè)面可視化搭建工具中; 組件的渲染結(jié)果包含了多個(gè) HTML 元素, 所以從生成頁(yè)面的角度, 編輯出一個(gè)頁(yè)面只需要組合組件, 可以較快速完成頁(yè)面的生成; 組件本身承載了特定的業(yè)務(wù)功能, 所以這類編輯器生成的頁(yè)面, 業(yè)務(wù)邏輯封裝程度較高.

如: Vue-Layout

vue-layout 示例:

vue_layout_demo

不嵌套的前端框架組件

移動(dòng)端的頁(yè)面, 常用的布局策略是: 寬度鋪滿, 高度滾動(dòng). 如果前端框架組件都設(shè)置為鋪滿寬度, 頁(yè)面展示時(shí)組件只需在瀏覽器垂直方向上順序排列, 則組件組合時(shí)候不需要嵌套, 所有組件互為兄弟節(jié)點(diǎn). 這種鋪滿寬度的組件, 非常適合搭建移動(dòng)端頁(yè)面的場(chǎng)景: 在承載頁(yè)面邏輯的同時(shí), 使得頁(yè)面的編輯更加簡(jiǎn)單, 使用者只需要處理組件的順序, 不需要處理組件的嵌套. 組件的嵌套需要重點(diǎn)解決組件數(shù)據(jù)流和組件布局適配.

如: 阿里云鳳蝶觉至、pipeline

pipeline 示例:

pipeline_demo

https://page-pipepline.github.io/pipeline-editor/dist/index.html#/pipeline

理想的頁(yè)面可視化搭建框架

頁(yè)面可視化搭建工具, 需要對(duì)頁(yè)面做一些定義和約定, 在可視化搭建時(shí)遵循工具定義和約定來編輯頁(yè)面. 更全面討論頁(yè)面可視化搭建工具時(shí), 不只是關(guān)注工具本身的功能, 還需要關(guān)注工具的依賴和約束, 如頁(yè)面可視化搭建工具的組件化方式剔应、模板組織方式、編輯功能實(shí)現(xiàn)方式等. 從工具開發(fā)的角度說, 頁(yè)面可視化搭建工具是需要架構(gòu)設(shè)計(jì)的, 不同工具的區(qū)分, 其實(shí)是不同的頁(yè)面可視化搭建框架間的差異.

在互聯(lián)網(wǎng)公司中, 廣泛運(yùn)用頁(yè)面可視化搭建工具來支持運(yùn)營(yíng)活動(dòng)頁(yè)面的生成, 本章我們只探討運(yùn)營(yíng)頁(yè)面搭建工具的理想框架.

頁(yè)面可視化搭建框架的核心是實(shí)現(xiàn)頁(yè)面的可視化編輯. 運(yùn)營(yíng)頁(yè)面搭建工具聲明配置數(shù)據(jù)并提供配置表單, 通過對(duì)配置表單的數(shù)據(jù)填充, 實(shí)現(xiàn)基于模板的頁(yè)面生成. 如圖所示:

visual_edit

可視化編輯

配置數(shù)據(jù)

對(duì)頁(yè)面的可編輯部分, 需要準(zhǔn)確描述可編輯部分所需的配置數(shù)據(jù); 配置數(shù)據(jù)是異構(gòu)的, 不同頁(yè)面语御、不同區(qū)塊的配置數(shù)據(jù)各不相同. 所以需要對(duì)不同頁(yè)面峻贮、不同區(qū)塊定義各自配置數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)和字段類型.
最理想的配置數(shù)據(jù)格式為 JSON, 因?yàn)槠涓袷届`活, 前端友好; 最理想的配置數(shù)據(jù)描述是 JSON Schema, 因?yàn)槠渲С直韱蝿?dòng)態(tài)生成和數(shù)據(jù)校驗(yàn).

編輯表單生成

采用 JSON Schema, 容易生成配置表單, 只要按照 JSON Schema 對(duì) JSON 數(shù)據(jù)的描述, 可以動(dòng)態(tài)渲染出配置表單. 并且可以采用 JSON Schema 對(duì)編輯后的數(shù)據(jù)做格式校驗(yàn), 避免編輯錯(cuò)誤.

如配置表單自動(dòng)生成工具 json-editor:

json_editor_demo

組件化

組件是對(duì) HTML 元素、元素布局和樣式应闯、業(yè)務(wù)邏輯的封裝, 通過組件化的方式, 將頁(yè)面的搭建轉(zhuǎn)化為對(duì)組件的組合, 大大減低了運(yùn)營(yíng)頁(yè)面生成的編輯工作量, 實(shí)現(xiàn)承載業(yè)務(wù)邏輯的運(yùn)營(yíng)頁(yè)面的快速搭建.

如 pipeline 的頁(yè)面組件化:

component_demo

模板

模板是帶有默認(rèn)數(shù)據(jù)的頁(yè)面; 對(duì)于組件化的頁(yè)面, 模板是從組件庫(kù)中選取部分組件, 并帶有各個(gè)組件的默認(rèn)數(shù)據(jù).
采用模板生成頁(yè)面, 只需對(duì)模板進(jìn)行少量編輯即可實(shí)現(xiàn)頁(yè)面快速生成.

與編輯系統(tǒng)解偶

編輯系統(tǒng)和組件解偶纤控，組件只需要遵循編輯系統(tǒng)的組織約定, 其具體開發(fā)過程和承載的邏輯與編輯系統(tǒng)無關(guān), 支持自由拓展頁(yè)面組件.
編輯系統(tǒng)與模板采用的前端框架解偶, 在遵循編輯系統(tǒng)約定下, 可以選擇不同的前端框架.

理想的運(yùn)營(yíng)頁(yè)面可視化搭建框架

采用 JSON Schema 聲明配置數(shù)據(jù), 配置表單自動(dòng)生成.
采用組件化和頁(yè)面模板實(shí)現(xiàn)頁(yè)面生成效率的提升.
編輯系統(tǒng)與組件、前端框架碉纺、模板解耦.
在遵循編輯系統(tǒng)約定下, 前端框架可以自由選擇, 組件可以自由拓展.

頁(yè)面可視化搭建工具舉例

列舉一些頁(yè)面可視化搭工具, 并附帶少量點(diǎn)評(píng).

阿里云鳳蝶

移動(dòng)建站平臺(tái)

支持頁(yè)面 Data 編輯, 面向運(yùn)營(yíng)/產(chǎn)品人員, 編輯自由度為無嵌套的組件.
目前制作運(yùn)營(yíng)船万、活動(dòng)頁(yè)面功能上最好的工具.
提供頁(yè)面搭建的模板, 并支持自定義模板.
配置表單基于 Schema 生成, 配置表單操作功能完善.

ice 阿里飛冰

飛冰 - 讓前端開發(fā)簡(jiǎn)單而友好

支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為無嵌套的組件.
使用"物料-區(qū)塊", 非前端開發(fā)人員可以快速搭建出可用、符合規(guī)范的頁(yè)面.
頁(yè)面以源碼方式輸出.
前端服務(wù)化的一種方式.

百度H5

創(chuàng)意惜辑，絕不雷同

支持 HTML Tree 編輯, 面向前端小白, 編輯自由度為 HTML 元素.
做 H5 的好工具, 功能上很強(qiáng)大, 對(duì)動(dòng)畫的編輯功能做到細(xì)致.

美團(tuán)外賣前端可視化界面組裝平臺(tái) —— 樂高

支持 Dynamic Logic 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.
前端服務(wù)化的一種方式.
在美團(tuán)內(nèi)部支持了許多業(yè)務(wù)頁(yè)面, 沒有公網(wǎng)服務(wù), 了解該系統(tǒng)只能通過其介紹文章.

esview

Drag vue dynamic components to build your page唬涧，generate vue code.

開源項(xiàng)目, 模仿美團(tuán)點(diǎn)評(píng)的樂高.

完整的可視化頁(yè)面搭建框架, 面向中后臺(tái)開發(fā)人員.
頁(yè)面布局結(jié)果看起來比較亂, 自定義組件寫法比較詭異; 沒有融合業(yè)務(wù)邏輯, 不支持在框架中寫頁(yè)面的代碼邏輯.

gaea-editor

Design websites in your browser

開源項(xiàng)目.

支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.
頁(yè)面的拖拉生成, 實(shí)現(xiàn)得很完整.
用于頁(yè)面設(shè)計(jì), 所以偏向頁(yè)面元素的樣式控制.
技術(shù)文章對(duì)可視化搭建工具的理解深刻: 可視化在線編輯器架構(gòu)設(shè)計(jì).

Vue-Layout

基于UI組件的Vue可視化布局、生成.vue代碼的工具盛撑。

開源項(xiàng)目.

支持 Component Tree 編輯, 面向中后臺(tái)開發(fā)人員, 編輯自由度為可嵌套的組件.
工具的使用體驗(yàn)效果不錯(cuò).

gen

根據(jù)接口生成頁(yè)面，減少重復(fù)性工作

開源項(xiàng)目, 用起來感覺不錯(cuò).
系統(tǒng)中有好幾個(gè)概念, 開始比較難上手.

其他

請(qǐng)使用關(guān)鍵字 website-builder, site-builder 等關(guān)鍵字進(jìn)行搜索.
VvvebJs
grapesjs
Maha
有贊微頁(yè)面
X-Page-Editor-Vue

業(yè)界實(shí)踐

列舉一些業(yè)界在頁(yè)面可視化搭工具上的實(shí)踐, 并附帶少量點(diǎn)評(píng).

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

支持 Dynamic Logic 的頁(yè)面可視化搭建 IDE.
講解了頁(yè)面可視化搭建框架支持 Dynamic Logic 的可行性和設(shè)計(jì)架構(gòu).
作者在前端框架和 IDE 方面寫了好幾篇文章, 很深刻.

騰訊IMWeb: 積木系統(tǒng)捧搞，將運(yùn)營(yíng)系統(tǒng)做到極致

2015年的文章! 完全說到點(diǎn)上.

簡(jiǎn)單易用的抵卫、可視化的可編輯頁(yè)面.
通用的、簡(jiǎn)便地組件接入機(jī)制.
組件：開發(fā)過程和系統(tǒng)無關(guān), 邏輯和系統(tǒng)無關(guān).