背景

引子

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

但是現在已經很少人使用 Dreamweaver 了, 其主要原因是頁面承載的內容已經和頁面源碼分離, 由后端接口返回再渲染到頁面, 靜態頁面網站無法承載大量的動態內容.

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

[[231153]]

Dreamweaver 操作頁面示例:

文章內容

• 頁面構成和頁面組件化.
• 頁面可視化搭建工具的必要性.
• 頁面可視化搭建工具的區分維度.
• 業界的實踐實例.

頁面

頁面是 HTML / DOM

頁面可視化搭建的操作對象是頁面. 頁面是一份 HTML 文檔, 不管是靜態頁面還是動態渲染出來的頁面, 在頁面上看到的內容, 都是 HTML 文檔的一部分.

對 HTML 文檔的實例化和操作, 通過文檔對象模型(DOM)來實現, 也可以說頁面是一個 DOM. 本文沒有嚴格區分 HTML 和 DOM 這兩個概念, 以下行文都用 HTML 這個概念.

HTML 使用一種樹形結構來表示頁面, 樹的每個節點為一個頁面元素或文本節點, 一個頁面元素可以包含多個頁面元素節點或文本節點. 頁面元素通常稱為標簽, 頁面元素類型由 HTML 規范定義.

HTML 結構示例:

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

頁面是 HTMLTree + Data

從前端開發的角度, 可以認為頁面是由 HTMLTree 和 Data 組成, HTMLTree 是頁面元素的樹形結構, Data 是頁面元素的屬性或文本節點. 下圖中藍色框所示的節點可以認為是數據.

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

靜態頁面和動態邏輯頁面

上一節說頁面的由 HTMLTree 和 Data 組成, 討論的是靜態頁面.

瀏覽器請求靜態頁面, 網絡返回的 HTML 源碼就是頁面渲染完成后的 HTML. 靜態頁面的源碼和頁面渲染結果一致:

當下, 前端頁面更多的是有動態邏輯的頁面, 在頁面中引入和使用動態腳本(Javascript)對頁面進行修改和控制.

瀏覽器請求動態邏輯頁面, 網絡返回的 HTML 源碼與頁面渲染完成后的 HTML 有差異. 動態邏輯頁面的源碼和渲染結果有差異:

頁面組件化

頁面渲染后是一棵 HTML 元素構成的樹, 頁面的可編輯粒度為 HTML 規范定義的 HTML 元素.

使用 Web Components 組合 HTML 元素, 實現了功能封裝和可復用的頁面組件. 在流行的前端框架中, 都提供了組件化的功能, 從前端框架的視角看, 頁面是由組件樹組成. 這些組件內部維護自身的 HTML 元素結構、樣式和功能邏輯, 并通過組件的 props 獲取外部傳入的數據, 實現了功能封裝和復用.

Vue 組件樹示例:

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

并沒有討論 CSS

在以上的章節中, 我們并沒有討論決定頁面樣式的 CSS. 因為借助 Javascript 的動態邏輯, CSS 可以歸入到 Data 的范圍: 通過對頁面元素 style attribute 的修改, 或將 CSS 屬性動態添加到 <style> 標簽中, 可以實現對頁面元素樣式的修改.

頁面可視化搭建

有了對頁面組成的認知基礎, 可以對頁面可視化搭建有更多的討論: 頁面可視化搭建是什么? 為什么需要?

是什么

如前文所闡述, 動態邏輯頁面分解為 HTMLTree, Data 和 DynamicLogic. 前端開發工程師開發前端頁面的過程, 本質上是用編程工具(IDE)對頁面的 HTMLTree, Data 和 DynamicLogic 進行增刪和修改.

頁面可視化搭建, 是用可視化交互的方式對頁面的 HTMLTree, Data 和 DynamicLogic 進行增刪和修改, 從而實現頁面的生成. 頁面可視化搭建工具是實現頁面可視化編輯的軟件工具.

用頁面可視化搭建工具來搭建頁面與前端工程師在頁面上搬磚, 都是搭建頁面, 區別在于實現頁面搭建的方式. 做個簡單對比:

為什么需要

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

我們可以從一些使用場景來窺探頁面可視化搭建工具的應用場合.

頁面小白做 H5

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

如: 小陳女票要生日了, 小陳為女票做了一個有創意的生日祝福頁面:

營銷活動頁面搭建

大多數互聯網公司需要做許多的活動頁面來承載運營業務. 運營活動頁面的特點是: 頁面功能大同小異、時間緊、下線快、研發性很比低. 前端工程師無法持續開發無窮無盡的活動頁面, 需要采用活動頁面可視化搭建工具, 由運營人員/產品人員直接生成活動頁面. 研發人員的工作轉變為提供滿足活動頁面業務需要的活動模板.

如: 抽獎活動頁面的可視化搭建:

中后臺系統開發

在公司內部, 需要做許多的中后臺支持系統, 這些系統的管理端一般用 web 頁面承載. 那么問題來了, 中后臺系統的前端工程, 怎么保障可用性、可維護性和頁面呈現一致性? 這些系統與后臺邏輯強關聯, 一般由后臺開發人員開發; 后臺開發人員寫代碼邏輯是沒有問題的, 但是其前端開發能力相對較弱. 所以需要增強他們開發前端頁面的能力, 前端開發能力由前端服務化提供.

前端服務化的第一種方式是提供一套組件庫, 如 餓了么的 Element. 組件庫一般由前端開發人員封裝成模板工程, 模板工程提供公共樣式和函數庫, 并對編寫的代碼做校驗和約束, 一定程度上降低了前端開發難度, 統一后臺人員代碼風格. 此時后臺開發人員的開發方式為: 在代碼中用組件拼湊頁面, 然后寫代碼邏輯.

前端服務化的第二種方式, 是提供頁面可視化組裝系統, 這個系統輸出組裝后的前端工程源碼. 這樣的系統比提供組件庫和模板工程的方式走得更遠: 通過可視化生成模板工程, 后臺開發人員不需要在代碼中拼湊前端頁面, 不需要關注前端組件, 只需要編寫代碼邏輯. 這種方式可以參考阿里的 ice.

阿里 ice 示例:

前端服務化的終極方式, 是直接提供一個開發的 IDE, 將動態邏輯的書寫也在 IDE 中完成. 如 美團外賣前端可視化界面組裝平臺 —— 樂高（https://tech.meituan.com/waimai-lego.html）, 前端服務化——頁面搭建工具的死與生（https://www.cnblogs.com/sskyy/p/6496287.html）.

美團樂高示例:

前端服務化

更加廣泛來說, 為頁面小白/運營人員/產品人員提供的頁面可視化生成工具, 也是賦予以上人員前端開發的能力. 所以頁面可視化搭建, 本質上是前端服務化的一部分. 前端服務化總結, 可以看百度的 前端即服務-通向零成本開發之路.

頁面可視化搭建工具區分維度

有了前文對頁面的基礎認知, 終于進入了本文的正題 -- 頁面可視化搭建工具. 前面已經零星討論過頁面可視化搭建工具的定義, 再總結一下: 頁面可視化搭建, 是指用可視化交互的方式(對比編寫代碼的方式), 實現頁面的修改或生成; 頁面可視化搭建工具, 增強了使用者的前端開發能力, 提升了使用者修改或生成頁面的效率.

思考一個更具體的問題: 當我們討論頁面可視化搭建工具時, 怎么進行描述和討論? 換個角度提問題: 可以從什么維度對頁面可視化搭建工具進行描述和區分?

頁面可視化搭建工具的區分維度包括:

系統功能

面向客群

編輯自由度

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

系統功能

頁面可視化搭建工具的系統功能是指該工具在解決特定頁面可視化搭建問題上提供的核心能力. 頁面是由 HTMLTree, Data 和 DynamicLogic 三部分組成, 一個頁面可視化搭建工具提供的能力是編輯頁面組成部分之一或多部分. 對基于組件的頁面, 其可編輯單元為組件, 此時采用 ComponentTree 概念取代 HTMLTree.

HTMLTree 編輯

這類頁面搭建工具專注于可視化地編輯頁面 HTMLTree 部分, 一般可以對頁面做自由度較高的編輯. 其關鍵功能在于高自由度: 幾乎可以編輯頁面可見的所有元素, 能自由修改頁面結構、頁面元素樣式和頁面數據, 采用類似 Word, Photoshop 的可視化編輯方式. 這類工具一般只適用于生成邏輯比較簡單的頁面, 其中原因后續會講. 常說的 H5 制作工具就是指這類工具.

如: 百度H5、iH5

ComponentTree 編輯

這類頁面搭建工具針對組件化的頁面, 主要實現 ComponentTree 的可視化編輯. 其核心功能在于頁面布局設計: 在 UI 組件列表中選擇合適的組件, 通過拖拉的方式將組件嵌入到頁面中, 生成帶布局和樣式的頁面.

如: ice 阿里飛冰、vue-layout

vue-layout 示例:

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

頁面 Data 編輯

這類頁面搭建工具專注于可視化地編輯頁面的 Data 部分, 如圖片URL、按鈕文本、按鈕跳轉鏈接等. 這類搭建工具主要針對 HTMLTree 比較固定、能承載復雜業務邏輯的頁面. HTMLTree 固定的常見方式是頁面組件化, 只需修改頁面組件的 Data 就能快速地生成頁面. 其核心功能在于快速搭建承載業務邏輯的頁面. 通常營銷活動頁面就采用這種方式來可視化搭建.

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

阿里云鳳蝶示例:

DynamicLogic 編輯

這類頁面搭建工具支持在界面上輸入邏輯代碼, 實現頁面 DynamicLogic 編輯, 如后臺接口請求邏輯, 業務判斷邏輯等. 這些邏輯代碼需要有合適的插入點, 一般在事件鉤子中提供插入點, 如頁面 onload、網絡請求狀態變更、按鈕事件、數據變更等. 做到可以支持編輯 DynamicLogic 是超牛逼的事情, 這類工具對頁面的理解最深入, 對開發者的技術能力、前端架構能力和開發能力都要求很高.

如: 前端服務化——頁面搭建工具的死與生

系統功能組合

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

面向客群

頁面可視化搭建工具的面向客群是指工具的的使用客群. 不同的使用客群, 其對頁面技術的認知程度、搭建頁面的訴求有所不同, 所以可以從工具的面向客群來區分不同工具.

前端小白

前端小白是不具有前端知識的人群, 他們對頁面可視化搭建工具的訴求是交互性越高越好. 最適合他們的工具是像 Word, Powerpoint, Photoshop 等具有豐富交互功能, 且所見即所得的頁面搭建工具. 同時他們也不關心頁面最后用什么方式托管到互聯網上, 頁面編輯完成后要幫他們在公網上托管頁面, 并提供頁面鏈接, 方便前端小白將頁面發給自己的女朋友.

如頁面界的 Photoshop:

https://www.ih5.cn

運營/產品

運營、產品人員沒有開發人員頁面開發、邏輯編程的能力, 他們的訴求是可以快速搭建活動、產品頁面. 活動、產品頁面是承載著業務邏輯的: 如包含領取優惠券功能、背景音樂播放功能、產品購買功能等. 運營、產品對頁面可視化搭建的另一個訴求是"快速": 一天好幾個活動, 怎么快怎么來. 面向運營、產品的可視化搭建工具, 需要將頁面的邏輯功能封裝在頁面區塊內, 支持通過點擊來選擇區塊, 然后在表單中編輯區塊所需數據, 只對頁面進行少量編輯就完成業務頁面搭建. 如領取優惠券的頁面, 運營、產品只要在表單中填入優惠券的 ID, 然后就快速生成領取該優惠券的頁面, 不需要關心優惠券在頁面上如何展示和被領取的具體邏輯.

如, 開源項目 pipeline:

中后臺開發人員

中后臺開發人員具有邏輯編程能力, 但其前端開發能力比較弱. 中后臺開發人員的訴求是, 在開發中后臺系統的 Web 管理端時, 不需要進行重度的前端頁面結構和樣式開發, 可以專注在邏輯和數據處理上. 這要求頁面可視化搭建工具提供頁面搭建的區塊, 對區塊進行可視化組合來輸出一個基本的前端頁面; 并在頁面搭建工具上提供業務邏輯編寫的輸入點, 或將基本前端頁面源碼導出到 IDE 中供中后臺開發人員進行業務邏輯的開發.

如: ice 阿里飛冰

前端工程師

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

編輯自由度

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

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

編輯自由度為 HTML 元素

編輯自由度為 HTML 元素的頁面搭建工具有以下特點: 可編輯的元素豐富、頁面結構靈活、可視化編輯效率較低、業務邏輯封裝度較低. 這類工具的可編輯單元為 HTML 元素, 可以編輯元素的文本、樣式和行為, 可編輯的元素較豐富; 并且可以組合各種 HTML 元素到頁面中, 生成的頁面結構靈活; 從生成頁面的角度, 編輯出一個頁面需要從基本的 HTML 元素開始搭建, 可視化編輯的工作量較大; 一個業務功能的實現, 通常需要渲染多個 HTML 元素, 而這類工具可以自由增刪業務所需的 HTML 元素, 這導致無法固定地承載業務功能, 所以這類編輯工具生成的頁面, 業務邏輯封裝程度較低.

如: iH5、vvveb

vvveb 示例:

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

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

編輯自由度為前端框架組件的頁面搭建工具有以下特點: 可編輯的元素依賴搭建工具包含的組件, 可視化編輯效率較高、業務邏輯封裝度較高. 這類工具的可編輯單元為前端框架的組件, 這些組件需要開發并導入到頁面可視化搭建工具中; 組件的渲染結果包含了多個 HTML 元素, 所以從生成頁面的角度, 編輯出一個頁面只需要組合組件, 可以較快速完成頁面生成; 組件本身承載了特定的業務功能, 所以這類編輯器生成的頁面, 業務邏輯封裝程度較高. 對于嵌套的組件, 需要重點解決組件數據流和組件布局適配.

如: Vue-Layout

vue-layout 示例:

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

不嵌套的前端框架組件

移動端的頁面, 常用的布局策略是: 寬度鋪滿, 高度滾動. 如果前端框架組件都設置為鋪滿寬度, 頁面展示時組件只需在瀏覽器垂直方向上順序排列, 則組件組合時候不需要嵌套, 所有組件互為兄弟節點. 這種鋪滿寬度的組件, 非常適合搭建移動端頁面的場景: 在承載頁面邏輯的同時, 使得頁面的編輯更加簡單, 使用者只需要處理組件的順序, 不需要處理組件的嵌套.

如: 阿里云鳳蝶、pipeline

pipeline 示例:

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

理想的頁面可視化搭建框架

頁面可視化搭建工具, 需要對頁面做一些約定和約束, 在可視化搭建時遵循工具約定和約束來編輯頁面. 更全面討論頁面可視化搭建工具時, 不只是關注工具本身的功能, 還需要關注工具的依賴和約束, 如頁面可視化搭建工具的組件化方式、模板組織方式、編輯功能實現方式等. 從工具開發的角度說, 頁面可視化搭建工具是需要架構設計的, 不同工具的區分, 其實是不同的頁面可視化搭建框架間的差異.

在互聯網公司中, 廣泛運用頁面可視化搭建工具來支持運營活動頁面的生成, 本章我們只探討運營頁面搭建工具的理想框架.

頁面可視化搭建框架的核心是實現頁面的可視化編輯. 運營頁面搭建工具, 聲明頁面配置數據并提供配置表單, 通過對配置表單的數據填充, 實現基于模板的頁面生成. 如圖所示:

可視化編輯

配置數據

對頁面的可編輯部分, 需要準確描述可編輯部分所需的配置數據; 配置數據是異構的, 不同頁面、不同區塊的配置數據各不相同. 所以需要對不同頁面、不同區塊定義各自配置數據的數據結構和字段類型. 理想的配置數據格式為 JSON, 因為其格式靈活, 前端友好; 理想的配置數據描述格式為 JSON Schema, 因為其支持表單動態生成和數據校驗.

配置表單生成

采用 JSON Schema, 容易生成配置表單, 只要按照 JSON Schema 對 JSON 數據的描述, 可以動態渲染出配置表單. 并且可以采用 JSON Schema 對編輯后的數據做格式校驗, 避免編輯錯誤.

如配置表單自動生成工具 json-editor:

組件化

組件是對 HTML 元素、元素布局和樣式、業務邏輯的封裝, 通過組件化的方式, 將頁面的搭建轉化為對組件的組合, 大大減低了運營頁面生成的編輯工作量, 實現快速搭建承載業務邏輯的運營頁面.

如 pipeline 的頁面組件化:

模板

模板是帶有默認數據的頁面; 對于組件化的頁面, 模板是從組件庫中選取部分組件, 并帶有各個組件的默認數據. 采用模板生成頁面, 只需對模板進行少量編輯即可實現頁面快速生成.

與編輯系統解偶

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

理想的運營頁面可視化搭建框架

• 采用 JSON Schema 聲明配置數據, 配置表單自動生成.
• 采用組件化和頁面模板實現頁面生成效率的提升.
• 編輯系統與組件、前端框架、模板解耦.
• 在遵循編輯系統約定下, 組件可以自由拓展, 前端框架可以自由選擇.

頁面可視化搭建工具舉例

列舉一些頁面可視化搭工具, 并附帶少量點評.

阿里云鳳蝶

移動建站平臺

• 支持頁面 Data 編輯, 面向運營、產品人員, 編輯自由度為無嵌套的組件.
• 目前制作運營、活動頁面功能上最好的工具.
• 提供頁面搭建的模板, 并支持自定義模板.
• 配置表單基于 Schema 生成, 配置表單操作功能完善.

ice 阿里飛冰

飛冰 - 讓前端開發簡單而友好

• 支持 ComponentTree 編輯, 面向中后臺開發人員, 編輯自由度為無嵌套的組件.
• 使用"物料-區塊", 非前端開發人員可以快速搭建出可用、符合規范的頁面.
• 頁面以源碼方式輸出.
• 前端服務化的一種方式.

百度H5

創意，絕不雷同

• 支持 HTMLTree 編輯, 面向前端小白, 編輯自由度為 HTML 元素.
• 做 H5 的好工具, 功能上很強大, 對動畫的編輯功能做到細致.

美團外賣前端可視化界面組裝平臺 —— 樂高

• 支持 DynamicLogic 編輯, 面向中后臺開發人員, 編輯自由度為可嵌套的組件.
• 前端服務化的一種方式.
• 在美團內部支持了許多業務頁面, 沒有公網服務, 了解該系統只能通過其介紹文章.

esview

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

開源項目, 模仿美團點評的樂高.

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

gaea-editor

Design websites in your browser

開源項目.

• 支持 ComponentTree 編輯, 面向中后臺開發人員, 編輯自由度為可嵌套的組件.
• 頁面的拖拉生成, 實現得很完整.
• 用于頁面設計, 所以偏向頁面元素的樣式控制.
• 技術文章對可視化搭建工具數據流有深刻理解: 可視化在線編輯器架構設計.

Vue-Layout

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

開源項目.

• 支持 ComponentTree 編輯, 面向中后臺開發人員, 編輯自由度為可嵌套的組件.
• 工具的使用體驗效果不錯.

gen

根據接口生成頁面，減少重復性工作

• 開源項目, 用起來感覺不錯.
• 系統中有好幾個概念, 開始比較難上手.

其他

• 請使用關鍵字 website-builder, site-builder 等關鍵字進行搜索.
• VvvebJs
• grapesjs
• Maha
• 有贊微頁面
• X-Page-Editor-Vue

業界實踐

列舉一些業界在頁面可視化搭工具上的實踐, 并附帶少量點評.

前端服務化——頁面搭建工具的死與生

• 支持 DynamicLogic 的頁面可視化搭建 IDE.
• 講解了頁面可視化搭建框架支持 DynamicLogic 的可行性和設計架構.
• 作者在前端框架和 IDE 方面寫了好幾篇文章, 很深刻.

騰訊IMWeb: 積木系統，將運營系統做到極致

2015年的文章! 完全說到點上.

• 簡單易用的、可視化的可編輯頁面.
• 通用的、簡便地組件接入機制.
• 組件: 開發過程和系統無關, 邏輯和系統無關.

美團外賣前端可視化界面組裝平臺 —— 樂高

• 把系統架構將得很清楚, 有借鑒意義.
• 對頁面組成做了分析, 闡述了可視化配置的原理.

前端即服務-通向零成本開發之路

百度的前端服務化實踐, 都在這一篇.

可視化在線編輯器架構設計

• 可視化在線編輯器屬于前端開發引擎, 前端進入了前端工業時代.
• 深入討論了組件數據流.

百度外賣如何做到前端開發配置化

• PPT 將原理和架構講得很清楚.
• 使用流程圖很清晰.
• 項目開源了 -- block, 試用起來功能比較簡陋.

轉轉運營活動高效開發有哪些秘訣

基于組件的頁面生成系統-魔方, 采用 npm 管理組件.

QQ會員: 如何保證H5頁面高質量低成本快速生成

內部 ET 平臺, 包含活動管理的其他功能.

vue-design 桌面端頁面可視化構建程序

esview -- 這可能是目前最好的vue代碼生成工具

總結

頁面由 HTMLTree, Data, DynamicLogin 組成.

頁面可視化搭建工具用于提升各類人員的頁面搭建效率.

頁面可視化搭建其實是前端服務化的方式.

頁面可視化搭建工具需要平衡自由度和效率.

組件和模板是頁面可視化搭建框架的核心.

全文結束, 本文對頁面可視化搭建的思考和討論可能還不夠完整, 歡迎討論和補充.