背景
引子
頁面視覺化搭建, 是一個歷久彌新的話題. 更廣義上講, 頁面是 GUI 的一部分, GUI 的拖拉生成在各種開發工具上很常見, 如 Android Studio, Xcode, Visual Studio 等. 前端頁面早在十幾年前就能用 Dreamweaver, Frontpage 等工具視覺化搭建出來.
Dreamweaver 操作頁面示例:
但是現在已經很少人使用 Dreamweaver 了, 其主要原因是頁面承載的內容已經和頁面原始碼分離, 由後端介面返回再渲染到頁面, 靜態頁面網站無法承載大量的動態內容.
Dreamweaver 死了, 但是頁面視覺化搭建工具依然廣泛需要和使用, 所以這個話題依然值得探討.
文章內容
- 頁面構成和頁面元件化.
- 頁面視覺化搭建工具的必要性.
- 頁面視覺化搭建工具的區分維度.
- 業界的實踐例項.
頁面
頁面是 HTML / DOM
頁面視覺化搭建的操作物件是頁面. 頁面是一份 HTML 文件, 不管是靜態頁面還是動態渲染出來的頁面, 在頁面上看到的內容, 都是 HTML 文件的一部分.
對 HTML 文件的例項化和操作, 通過文件物件模型(DOM)來實現, 也可以說頁面是一個 DOM. 本文沒有嚴格區分 HTML 和 DOM 這兩個概念, 以下行文都用 HTML 這個概念.
HTML 使用一種樹形結構來表示頁面, 樹的每個節點為一個頁面元素或文字節點, 一個頁面元素可以包含多個頁面元素節點或文字節點. 頁面元素通常稱為標籤, 頁面元素型別由 HTML 規範定義.
HTML 結構示例:
頁面是 HTML Tree
+ Data
從前端開發的角度, 可以認為頁面是由 HTML Tree
和 Data
組成, HTML Tree
是頁面元素的樹形結構, Data
是頁面元素的屬性或文字節點. 下圖中藍色框所示的節點可以認為是資料.
為什麼從前端開發角度會說頁面是 HTML Tree
+ Data
? 舉一個常見場景來說明: 在開發新頁面時, 我們是可以複製已有頁面(好吧, 我就是這樣的前端工程師), 然後只修改頁面 HTML, 或者只修改資料, 或同時修改 HTML 和資料, 從而完成新頁面的開發.
靜態頁面和動態邏輯頁面
上一節說頁面的由 HTML Tree
和 Data
組成, 討論的是靜態頁面.
瀏覽器請求靜態頁面, 網路返回的 HTML 原始碼就是頁面渲染完成後的 HTML. 靜態頁面的原始碼和頁面渲染結果一致:
當下, 前端頁面更多的是有動態邏輯的頁面, 在頁面中引入和使用動態指令碼(Javascript)對頁面進行修改和控制.
瀏覽器請求動態邏輯頁面, 網路返回的 HTML 原始碼與頁面渲染完成後的 HTML 有差異. 動態邏輯頁面的原始碼和渲染結果有差異:
頁面元件化
頁面渲染後是一棵 HTML 元素構成的樹, 頁面的可編輯粒度為 HTML 規範定義的 HTML 元素.
使用 Web Components 組合 HTML 元素, 實現了功能封裝和可複用的頁面元件. 在流行的前端框架中, 都提供了元件化的功能, 從前端框架的視角看, 頁面是由元件樹組成. 這些元件內部維護自身的 HTML 元素結構、樣式和功能邏輯, 並通過元件的 props 獲取外部傳入的資料, 實現了功能封裝和複用.
Vue 元件樹示例:
並沒有討論 CSS
在以上的章節中, 我們並沒有討論決定頁面樣式的 CSS. 因為藉助 Javascript 的動態邏輯, CSS 可以歸入到 Data
的範圍: 通過對頁面元素 style attribute
的修改, 或將 CSS 屬性動態新增到<style>標籤中,可以實現對頁面元素樣式的修改。
頁面視覺化搭建
有了對頁面組成的認知基礎,可以對頁面視覺化搭建有更多的討論: 頁面視覺化搭建是什麼? 為什麼需要?
是什麼
如前文所闡述, 動態邏輯頁面分解為 HTML Tree
, Data
和 Dynamic Logic
. 前端開發工程師開發前端頁面的過程, 本質上是用程式設計工具(IDE)對頁面的 HTML Tree
, Data
和 Dynamic Logic
進行增刪和修改.
頁面視覺化搭建, 是用視覺化互動的方式對頁面的 HTML Tree
, Data
和 Dynamic Logic
進行增刪和修改, 從而實現頁面的生成. 頁面視覺化搭建工具是實現頁面視覺化編輯的軟體工具.
用頁面視覺化搭建工具來搭建頁面與前端工程師在頁面上搬磚, 都是搭建頁面, 區別在於實現頁面搭建的方式. 做個簡單對比:
差異點 | 程式設計開發頁面 | 視覺化搭建頁面 |
技能要求 | 需要程式設計基礎 | 可以沒有程式設計基礎 |
操作方式 | 在程式碼編輯器中編寫程式碼 | 在視覺化搭建工具中拖拉/填表/編寫程式碼 |
為什麼需要
任何工具的存在都是更高效地解決問題. 頁面視覺化搭建工具, 用於解決頁面生成的效率問題.
可能前端工程師會覺得最有效率的頁面生成方式是打程式碼, 但有搭建頁面需求的不只是前端工程師. 而視覺化頁面搭建工具, 恰恰是面向”就缺一個前端工程師”的人員, 用於提升他們生成頁面的效率.
我們可以從一些使用場景來窺探頁面視覺化搭建工具的應用場合.
頁面小白做 H5
頁面小白不需要任何頁面相關的知識, 不需要了解 HTML/JS/CSS 這些概念, 只要像使用 Word 一樣在 H5 製作工具上操作, 就可以做出一個挺漂亮的頁面. H5 製作工具很多, 其中 百度H5 做很好不錯.
如: 小陳女票要生日了, 小陳為女票做了一個有創意的生日祝福頁面:
營銷活動頁面搭建
大多數網際網路公司需要做許多的活動頁面來承載運營業務. 運營活動頁面的特點是: 頁面功能大同小異、需求急、時間緊、下線快、研發性很比低. 前端工程師無法持續開發無窮無盡的活動頁面, 需要採用活動頁面視覺化搭建工具, 由運營人員/產品人員直接生成活動頁面. 研發人員的工作轉變為提供滿足活動頁面業務需要的活動模板.
如: 抽獎活動頁面的視覺化搭建:
中後臺系統開發
在公司內部, 需要做許多的中後臺支援系統, 這些系統的管理端一般用 web 頁面承載. 那麼問題來了, 中後臺系統的前端工程, 怎麼保障可用性、可維護性和頁面呈現一致性? 這些系統與後臺邏輯強關聯, 一般由後臺開發人員開發; 後臺開發人員寫程式碼邏輯是沒有問題的, 但是其前端開發能力相對較弱. 所以需要增強他們開發前端頁面的能力, 前端開發能力由前端服務化提供.
前端服務化的第一種方式是提供一套元件庫, 如 餓了麼的 Element.
元件庫一般由前端開發人員封裝成模板工程, 模板工程提供公共樣式和函式庫, 並對編寫的程式碼做校驗和約束, 一定程度上降低了前端開發難度, 統一後臺人員程式碼風格. 此時後臺開發人員的開發方式為: 在程式碼中用元件拼湊頁面, 然後寫程式碼邏輯.
前端服務化的第二種方式, 是提供頁面視覺化組裝系統, 這個系統輸出組裝後的前端工程原始碼. 這樣的系統比提供元件庫和模板工程的方式走得更遠: 通過視覺化生成模板工程, 後臺開發人員不需要在程式碼中拼湊前端頁面, 不需要關注前端元件, 只需要編寫程式碼邏輯.
這種方式可以參考阿里的 ice.
阿里 ice 示例:
前端服務化的終極方式, 是直接提供一個開發的 IDE, 將動態邏輯的書寫也在 IDE 中完成.
如 美團外賣前端視覺化介面組裝平臺 —— 樂高, 前端服務化——頁面搭建工具的死與生.
美團樂高示例:
前端服務化
更加廣泛來說, 為頁面小白/運營人員/產品人員提供的頁面視覺化生成工具, 也是賦予以上人員前端開發的能力. 所以頁面視覺化搭建, 本質上是前端服務化的一部分. 前端服務化總結, 可以看百度的 前端即服務-通向零成本開發之路.
頁面視覺化搭建工具區分維度
有了前文對頁面的基礎認知, 終於進入了本文的正題 — 頁面視覺化搭建工具.
前面已經零星討論過頁面視覺化搭建工具的定義, 再總結一下: 頁面視覺化搭建, 是指用視覺化互動的方式(對比編寫程式碼的方式), 實現頁面的修改或生成; 頁面視覺化搭建工具, 增強了使用者的前端開發能力, 提升了使用者修改或生成頁面的效率.
思考一個更具體的問題: 當我們討論頁面視覺化搭建工具時, 怎麼進行描述和討論? 換個角度提問題: 可以從什麼維度對頁面視覺化搭建工具進行描述和區分?
頁面視覺化搭建工具的區分維度包括:
- 系統功能
- 面向客群
- 編輯自由度
下文會對頁面視覺化搭建工具的區分維度做介紹, 並會對每個區分維度提供示例(這些示例不會展開討論, 且在不同維度下會多次使用同個示例).
系統功能
頁面視覺化搭建工具的系統功能是指該工具在解決特定頁面視覺化搭建問題上提供的核心能力.
頁面是由HTML Tree
, Data
和 Dynamic Logic
三部分組成, 一個頁面視覺化搭建工具提供的能力是編輯頁面組成部分之一或多部分. 對基於元件的頁面, 其可編輯單元為元件, 此時採用 Component Tree
概念取代 HTML Tree
.
HTML Tree
編輯
這類頁面搭建工具專注於視覺化地編輯頁面 HTML Tree
部分, 一般可以對頁面做自由度較高的編輯.
其關鍵功能在於高自由度: 幾乎可以編輯頁面可見的所有元素, 能自由修改頁面結構、頁面元素樣式和頁面資料, 採用類似 Word, Photoshop 的視覺化編輯方式.
這類工具一般只適用於生成邏輯比較簡單的頁面, 其中原因後續會講.
常說的 H5 製作工具就是指這類工具.
Component Tree
編輯
這類頁面搭建工具針對元件化的頁面, 主要實現 Component Tree
的視覺化編輯. 其核心功能在於頁面佈局設計: 在 UI 元件列表中選擇合適的元件, 通過拖拉的方式將元件嵌入到頁面中, 生成帶佈局和樣式的頁面.
vue-layout 示例:
頁面 Data
編輯
這類頁面搭建工具專注於視覺化地編輯頁面的 Data
部分, 如圖片URL、按鈕文字、按鈕跳轉連結等.
這類搭建工具主要針對 HTML Tree
比較固定、能承載複雜業務邏輯的頁面. HTML Tree
固定的常見方式是頁面元件化, 只需修改頁面元件的 Data
就能快速地生成頁面.
其核心功能在於快速搭建承載業務邏輯的頁面.
通常營銷活動頁面就採用這種方式來視覺化搭建.
阿里雲鳳蝶示例:
Dynamic Logic
編輯
這類頁面搭建工具支援在介面上輸入邏輯程式碼, 實現頁面 Dynamic Logic
編輯, 如後臺介面請求邏輯, 業務判斷邏輯等.
這些邏輯程式碼需要有合適的插入點, 一般在事件鉤子中提供插入點, 如頁面 onload、網路請求狀態變更、按鈕事件、資料變更等.
做到可以支援編輯 Dynamic Logic
是超牛逼的事情, 這類工具對頁面的理解最深入, 對開發者的技術能力、前端架構能力和開發能力都要求很高.
系統功能組合
還有其他系統功能的組合, 可以綜合上面的典型類別來做討論.
面向客群
頁面視覺化搭建工具的面向客群是指工具的使用客群. 不同的使用客群, 其對頁面技術的認知程度、搭建頁面的訴求有所不同, 所以可以從工具的面向客群來區分不同工具.
前端小白
前端小白是不具有前端知識的人群, 他們對頁面視覺化搭建工具的訴求是互動性越高越好. 最適合他們的工具是像 Word, Powerpoint, Photoshop 等具有豐富互動功能, 且所見即所得的頁面搭建工具.
同時他們也不關心頁面最後用什麼方式託管到網際網路上, 頁面編輯完成後要幫他們在公網上託管頁面, 並提供頁面連結, 方便前端小白將頁面發給自己的女朋友.
如頁面界的 Photoshop:
運營/產品
運營、產品人員沒有開發人員頁面開發、邏輯程式設計的能力, 他們的訴求是可以快速搭建活動、產品頁面. 活動、產品頁面是承載著業務邏輯的: 如包含領取優惠券功能、背景音樂播放功能、產品購買功能等. 運營、產品對頁面視覺化搭建的另一個訴求是“快速”: 一天好幾個活動, 怎麼快怎麼來.
面向運營、產品的視覺化搭建工具, 需要將頁面的邏輯功能封裝在頁面區塊內, 支援通過點選來選擇區塊, 然後在表單中編輯區塊所需資料, 只對頁面進行少量編輯就完成業務頁面搭建.
如領取優惠券的頁面, 運營、產品只要在表單中填入優惠券的 ID, 然後就快速生成領取該優惠券的頁面, 不需要關心優惠券在頁面上如何展示和被領取的具體邏輯.
如, 開源專案 pipeline:
中後臺開發人員
中後臺開發人員具有邏輯程式設計能力, 但其前端開發能力比較弱. 中後臺開發人員的訴求是, 在開發中後臺系統的 Web 管理端時, 不需要進行重度的前端頁面結構和樣式開發, 可以專注在邏輯和資料處理上.
這要求頁面視覺化搭建工具提供頁面搭建的區塊, 對區塊進行視覺化組合來輸出一個基本的前端頁面; 並在頁面搭建工具上提供業務邏輯編寫的輸入點, 或將基本前端頁面原始碼匯出到 IDE 中供中後臺開發人員進行業務邏輯的開發.
如: ice 阿里飛冰
前端工程師
要啥頁面視覺化搭建工具, 抓起鍵盤就開始幹.
編輯自由度
頁面視覺化搭建工具的編輯自由度, 是指頁面可編輯單元的粒度. 前端頁面的可編輯單元為 HTML 元素; 從前端頁面元件化的角度, 頁面可編輯單元為元件.
不同的編輯自由度的選擇, 是視覺化搭建工具在不同業務場景下編輯自由度與編輯效率的平衡.
編輯自由度為 HTML 元素(左)與自由度為元件(右)的示例:
編輯自由度為 HTML 元素
編輯自由度為 HTML 元素的頁面搭建工具有以下特點: 可編輯的元素豐富、頁面結構靈活、視覺化編輯效率較低、業務邏輯封裝度較低.
這類工具的可編輯單元為 HTML 元素, 可以編輯元素的文字、樣式和行為, 可編輯的元素較豐富; 並且可以組合各種 HTML 元素到頁面中, 生成的頁面結構靈活; 從生成頁面的角度, 編輯出一個頁面需要從基本的 HTML 元素開始搭建, 視覺化編輯的工作量較大; 一個業務功能的實現, 通常需要渲染多個 HTML 元素, 而這類工具可以自由增刪業務所需的 HTML 元素, 這導致無法固定地承載業務功能, 所以這類編輯工具生成的頁面, 業務邏輯封裝程度較低.
編輯自由度為前端框架元件
編輯自由度為前端框架元件的頁面搭建工具有以下特點: 可編輯的元素依賴搭建工具提供的元件, 視覺化編輯效率較高、業務邏輯封裝度較高.
這類工具的可編輯單元為前端框架的元件, 這些元件需要開發並匯入到頁面視覺化搭建工具中; 元件的渲染結果包含了多個 HTML 元素, 所以從生成頁面的角度, 編輯出一個頁面只需要組合元件, 可以較快速完成頁面生成; 元件本身承載了特定的業務功能, 所以這類編輯器生成的頁面, 業務邏輯封裝程度較高.
對於巢狀的元件, 需要重點解決元件資料流和元件佈局適配.
如: Vue-Layout
vue-layout 示例:
不巢狀的前端框架元件
移動端的頁面, 常用的佈局策略是: 寬度鋪滿, 高度滾動. 如果前端框架元件都設定為鋪滿寬度, 頁面展示時元件只需在瀏覽器垂直方向上順序排列, 則元件組合時候不需要巢狀, 所有元件互為兄弟節點. 這種鋪滿寬度的元件, 非常適合搭建移動端頁面的場景: 在承載頁面邏輯的同時, 使得頁面的編輯更加簡單, 使用者只需要處理元件的順序, 不需要處理元件的巢狀.
理想的頁面視覺化搭建框架
頁面視覺化搭建工具, 需要對頁面做一些約定和約束, 在視覺化搭建時遵循工具約定和約束來編輯頁面. 更全面討論頁面視覺化搭建工具時, 不只是關注工具本身的功能, 還需要關注工具的依賴和約束, 如頁面視覺化搭建工具的元件化方式、模板組織方式、編輯功能實現方式等. 從工具開發的角度說, 頁面視覺化搭建工具是需要架構設計的, 不同工具的區分, 其實是不同的頁面視覺化搭建框架間的差異.
在網際網路公司中, 廣泛運用頁面視覺化搭建工具來支援運營活動頁面的生成, 本章我們只探討運營頁面搭建工具的理想框架.
頁面視覺化搭建框架的核心是實現頁面的視覺化編輯. 運營頁面搭建工具, 宣告頁面配置資料並提供配置表單, 通過對配置表單的資料填充, 實現基於模板的頁面生成. 如圖所示:
視覺化編輯
配置資料
對頁面的可編輯部分, 需要準確描述可編輯部分所需的配置資料; 配置資料是異構的, 不同頁面、不同區塊的配置資料各不相同. 所以需要對不同頁面、不同區塊定義各自配置資料的資料結構和欄位型別.
理想的配置資料格式為 JSON, 因為其格式靈活, 前端友好; 理想的配置資料描述格式為 JSON Schema, 因為其支援表單動態生成和資料校驗.
配置表單生成
採用 JSON Schema, 容易生成配置表單, 只要按照 JSON Schema 對 JSON 資料的描述, 可以動態渲染出配置表單. 並且可以採用 JSON Schema 對編輯後的資料做格式校驗, 避免編輯錯誤.
如配置表單自動生成工具 json-editor:
元件化
元件是對 HTML 元素、元素佈局和樣式、業務邏輯的封裝, 通過元件化的方式, 將頁面的搭建轉化為對元件的組合, 大大減低了運營頁面生成的編輯工作量, 實現快速搭建承載業務邏輯的運營頁面.
如 pipeline 的頁面元件化:
模板
模板是帶有預設資料的頁面; 對於元件化的頁面, 模板是從元件庫中選取部分元件, 並帶有各個元件的預設資料.
採用模板生成頁面, 只需對模板進行少量編輯即可實現頁面快速生成.
與編輯系統解偶
編輯系統和元件解偶,元件只需要遵循編輯系統的組織約定, 其具體開發過程和承載的邏輯與編輯系統無關, 支援自由擴充頁面元件.
編輯系統與模板採用的前端框架解偶, 在遵循編輯系統約定下, 可以選擇不同的前端框架.
理想的運營頁面視覺化搭建框架
- 採用 JSON Schema 宣告配置資料, 配置表單自動生成.
- 採用元件化和頁面模板實現頁面生成效率的提升.
- 編輯系統與元件、前端框架、模板解耦.
- 在遵循編輯系統約定下, 元件可以自由擴充, 前端框架可以自由選擇.
頁面視覺化搭建工具舉例
列舉一些頁面視覺化搭工具, 並附帶少量點評.
阿里雲鳳蝶
移動建站平臺
- 支援頁面
Data
編輯, 面向運營、產品人員, 編輯自由度為無巢狀的元件. - 目前製作運營、活動頁面功能上最好的工具.
- 提供頁面搭建的模板, 並支援自定義模板.
- 配置表單基於 Schema 生成, 配置表單操作功能完善.
ice 阿里飛冰
飛冰 – 讓前端開發簡單而友好
- 支援
Component Tree
編輯, 面向中後臺開發人員, 編輯自由度為無巢狀的元件. - 使用”物料-區塊”, 非前端開發人員可以快速搭建出可用、符合規範的頁面.
- 頁面以原始碼方式輸出.
- 前端服務化的一種方式.
百度H5
創意,絕不雷同
- 支援
HTML Tree
編輯, 面向前端小白, 編輯自由度為 HTML 元素. - 做 H5 的好工具, 功能上很強大, 對動畫的編輯功能做到細緻.
美團外賣前端視覺化介面組裝平臺 —— 樂高
- 支援
Dynamic Logic
編輯, 面向中後臺開發人員, 編輯自由度為可巢狀的元件. - 前端服務化的一種方式.
- 在美團內部支援了許多業務頁面, 沒有公網服務, 瞭解該系統只能通過其介紹文章.
esview
Drag vue dynamic components to build your page,generate vue code.
開源專案, 模仿美團點評的樂高.
- 完整的視覺化頁面搭建框架, 面向中後臺開發人員.
- 頁面佈局結果看起來比較亂, 自定義元件寫法比較詭異; 沒有融合業務邏輯, 不支援在框架中寫頁面的程式碼邏輯.
gaea-editor
Design websites in your browser
開源專案.
- 支援
Component Tree
編輯, 面向中後臺開發人員, 編輯自由度為可巢狀的元件. - 頁面的拖拉生成, 實現得很完整.
- 用於頁面設計, 所以偏向頁面元素的樣式控制.
- 技術文章對視覺化搭建工具資料流有深刻理解: 視覺化線上編輯器架構設計.
Vue-Layout
基於UI元件的Vue視覺化佈局、生成.vue程式碼的工具。
開源專案.
- 支援
Component Tree
編輯, 面向中後臺開發人員, 編輯自由度為可巢狀的元件. - 工具的使用體驗效果不錯.
gen
根據介面生成頁面,減少重複性工作
- 開源專案, 用起來感覺不錯.
- 系統中有好幾個概念, 開始比較難上手.
其他
- 請使用關鍵字 website-builder, site-builder 等關鍵字進行搜尋.
- VvvebJs
- grapesjs
- Maha
- 有贊微頁面
- X-Page-Editor-Vue
業界實踐
列舉一些業界在頁面視覺化搭工具上的實踐, 並附帶少量點評.
前端服務化——頁面搭建工具的死與生
- 支援
Dynamic Logic
的頁面視覺化搭建 IDE. - 講解了頁面視覺化搭建框架支援
Dynamic Logic
的可行性和設計架構. - 作者在前端框架和 IDE 方面寫了好幾篇文章, 很深刻.
騰訊IMWeb: 積木系統,將運營系統做到極致
2015年的文章! 完全說到點上.
- 簡單易用的、視覺化的可編輯頁面.
- 通用的、簡便地元件接入機制.
- 元件: 開發過程和系統無關, 邏輯和系統無關.
美團外賣前端視覺化介面組裝平臺 —— 樂高
- 把系統架構將得很清楚, 有借鑑意義.
- 對頁面組成做了分析, 闡述了視覺化配置的原理.
前端即服務-通向零成本開發之路
百度的前端服務化實踐, 都在這一篇.
視覺化線上編輯器架構設計
- 視覺化線上編輯器屬於前端開發引擎, 前端進入了前端工業時代.
- 深入討論了元件資料流.
百度外賣如何做到前端開發配置化
轉轉運營活動高效開發有哪些祕訣
基於元件的頁面生成系統-魔方, 採用 npm 管理元件.
QQ會員: 如何保證H5頁面高質量低成本快速生成
內部 ET 平臺, 包含活動管理的其他功能.
vue-design 桌面端頁面視覺化構建程式
esview — 這可能是目前最好的vue程式碼生成工具
總結
- 頁面由
HTML Tree
,Data
,Dynamic Login
組成. - 頁面視覺化搭建工具用於提升各類人員的頁面搭建效率.
- 頁面視覺化搭建其實是前端服務化的方式.
- 頁面視覺化搭建工具需要平衡自由度和效率.
- 元件和模板是頁面視覺化搭建框架的核心.
全文結束, 本文對頁面視覺化搭建思考和討論可能還不夠完整, 歡迎討論和補充.
後記: 終於寫完了, 歷時估計一個月! 寫這篇文章的初衷是給我造的頁面視覺化搭建框架 — pipeline 寫背景, 但思考的點比較多, 所以就獨立寫了一篇文章. Pipeline 基本對標阿里的雲鳳蝶, 已經開源, 相關文章還在撰寫中. 趕緊點選 Demo 體驗吧.