背景
頁面視覺化搭建工具, 是網際網路公司中常見的運營工具, 實現了運營人員快速生成和釋出頁面, 提升頁面上線效率; 且無需開發人員介入, 節省開發人力.
頁面視覺化搭建工具搭建出的頁面示例:
但從零開始設計和開發出這種工具並不簡單. 筆者維護的頁面視覺化搭建框架 pipeline, 提供了頁面視覺化搭建的核心功能, 免去從零實現頁面視覺化搭建工具的困難.
本文主要包含以下內容:
- 活動頁面重複開發的痛點.
- 開發視覺化搭建工具的技術要點.
- 理想的運營頁面視覺化搭建工具.
- 開源頁面搭建框架 pipeline 介紹.
活動頁面開發之痛
活動頁面特點
前端業務中, 經常需要開發產品介紹頁/營銷頁/活動頁/圖片展示頁等頁面. 這類需求有以下幾個特點:
- 頁面類似: 頁面佈局和業務邏輯較固定.
- 需求高頻: 每週甚至每天有多個這種需求.
- 迭代快速: 開發時間短, 上線時間緊.
- 開發價效比低: 開發任務重複, 消耗各方的溝通時間和人力.
活動頁面常規開發流程
活動頁面常規開發流程圖
流程
- 運營/產品提出頁面需求.
- 走專案流程進入開發環節.
- 開發根據設計稿完成頁面開發.
- 測試進行頁面測試.
- 運維進行頁面上線.
- 運營/產品進行頁面驗收.
痛點
- 方多參與, 反覆溝通, 序列流程.
- 頁面上線週期長, 無法快速響應活動需求.
- 人力陷入重複工作泥潭, 忙碌而低效.
更優的流程
對於高頻和重複的活動頁面開發, 業界一般將頁面做成配置化, 配置工作從開發人員交接給產品/運營等需求方; 開發和設計人員只需提供配置化頁面支援. 更優的活動頁面生成流程依靠頁面視覺化搭建系統來實現. 現.
更優的活動頁面開發流程圖
流程
- 運營/產品提出頁面需求.
- 運營/產品在頁面視覺化搭建系統中選取合適的頁面模板進行頁面搭建.
- 頁面自動化釋出上線, 頁面需求完成, 流程完結.
- 如果運營/產品沒有找到合適的模板.
- 開發進行頁面模板開發, 並將頁面模板新增到頁面視覺化搭建系統中.
- 運營/產品繼續
流程2.
同時, 隨著頁面視覺化搭建系統中的頁面模板不斷豐富, 新的頁面需求對開發人員的依賴逐漸減低, 可由運營/產品直接完成.
頁面視覺化搭建工具
更優的活動頁面開發流程依靠頁面視覺化搭建系統實現, 重點是要有頁面視覺化搭建工具提供技術支援. 頁面視覺化搭建工具通過填寫配置資料表單, 拖拉頁面元件等視覺化的頁面編輯方式, 實現頁面的生成或修改.
但從零開始設計和開發出頁面視覺化搭建工具並不簡單, 有幾個需要了解和關注的技術點.
頁面視覺化搭建工具的技術要點
從技術角度, 設計和開發一個頁面視覺化搭建工具時, 需要考慮以下幾個技術要點:
- 頁面元件化
- 頁面模板
- 頁面視覺化編輯
- 元件層級關係
- 頁面打包
- 實時預覽
- 頁面元件開發
頁面元件化
元件化的優點
頁面的基本單元是 HTML 元素, 但是 HTML 元素無法包含業務邏輯, 且由 HTML 元素直接組合出頁面, 過於繁雜和低效.
頁面較好的組織方式是元件化, 如上圖所示. 元件是對 HTML 元素、元素佈局和樣式、業務邏輯的封裝. 通過元件封裝業務邏輯, 並通過元件屬性(Props)向外暴露元件的配置欄位. 採用頁面元件化, 複雜的頁面視覺化搭建可以轉化為2個較簡單的操作:
- 元件樹組合, 頁面視覺化搭建變成頁面元件的視覺化組合.
- 元件配置編輯, 將對頁面內容的編輯轉化為對元件的配置屬性(props)修改.
頁面前端框架
頁面元件化需依靠前端框架來實現. 頁面視覺化搭建工具的架構方式對頁面前端框架有限制: 需選擇頁面視覺化搭建工具支援的前端框架. 如: 頁面視覺化搭建工具只支援基於 vue 的頁面, 那頁面元件化的前端框架只能選擇 vue.
但是前端技術團隊選用的前端框架, 一般已用於支援現有業務, 並沉澱了一定數量的技術元件和業務元件. 如果需要針對頁面視覺化搭建工具進行前端框架的切換, 成本將會很大.
所以理想的頁面視覺化搭建工具, 應該和頁面的前端框架解偶, 如下圖所示. 技術團隊在某前端框架中沉澱的技術元件和業務元件, 可在頁面視覺化搭建工具的頁面中複用.
技術難點1:頁面視覺化搭建工具與頁面前端框架解偶.
當然, 前端業務已選用了某前端框架, 開發專門支援該前端框架的頁面視覺化搭建工具, 也是高效實現目標的選擇.
頁面模板
頁面模板包含完整的業務邏輯, 有助於快速生成業務頁面. 不同的頁面模板適用於不同的業務功能, 從模板庫中選擇合適的頁面模板並派生出預設業務頁面, 再對預設頁面進行視覺化編輯, 從而生成目標業務頁面.
雲鳳蝶的頁面模板列表:
模板帶有頁面的預設資料; 對於元件化的頁面, 模板是從元件庫中選取部分元件, 並帶有各個元件的預設配置資料.
如上圖所示, 頁面元件庫中有元件A, 元件B, 元件C, 元件D, ..., 元件X等. 頁面模板一由元件庫中的元件A, 元件B和元件C組成, 實現了一個完整的業務功能; 頁面模板二由元件庫中的元件A, 元件B和元件X組成, 完成另一個完整的業務功能.
頁面編輯
頁面由頁面元件組合而成, 頁面的編輯其實是對頁面元件進行重新組合, 並編輯各頁面元件的內容. 頁面編輯包含2個部分: 編輯頁面元件和編輯頁面內容.
編輯頁面元件
元件樹
使用元件化的方式來組織頁面, 頁面可以認為是一棵元件樹, 如下圖所示, 樹中的節點為頁面元件, 頁面元件可以包含子元件.
在程式碼編寫上, 通過元件標籤的組合來宣告一棵元件樹, 並在打包時生成頁面資源, 在執行時載入頁面資源渲染出頁面.
react 和 vue 的元件樹宣告示例:
編輯頁面元件的一個可行方式是: 動態地給頁面原始碼新增元件, 然後重新打包生成頁面. 如通過視覺化的方式替換 Left元件 為 NewLeft元件 後, 對原始碼的元件樹宣告做替換, 將 Left 標籤替換為 NewLeft 標籤.
動態元件
一些前端框架支援動態元件, 可以根據元件樹宣告動態渲染出元件, 而無需在構建前就定義好頁面的元件樹結構. 對動態元件頁面實現視覺化元件編輯時, 可以只編輯元件樹宣告檔案, 然後將元件樹宣告傳入提前打包好的頁面中進行渲染. 採用動態元件可以避免重新打包的耗時, 快速生成新頁面.
Vue 根據元件樹宣告動態地渲染元件示例如下圖, vue 動態元件使用 compontent 關鍵字來宣告, 並通過 is 屬性來決定例項化的具體元件. 對於 react, 元件是一個 js 物件, 直接在 jsx 中按照元件名稱返回對應元件就可以了.
編輯頁面內容
元件化頁面的頁面內容編輯, 是對頁面中各個元件的元件屬性(Props)進行配置.
元件配置資料
一個元件包含元件屬性(Props), 元件狀態(State), 元件HTML模板(Template), 元件業務邏輯(Javascript), 元件樣式佈局(Style)等幾個部分.
元件的配置資料通過元件暴露的 Props 注入到元件中, 在元件內部 Props 作為常量分發給 State, Template, Javascript, Style 等其他元件內容, 由元件內容渲染出檢視.
元件差異化
元件是業務內容的呈現載體, 不同的業務內容, 封裝在不同的業務元件中. 所以頁面模板中的元件是差異化的, 差異點體現在元件的 Props, State, Template, Javascript, Style 等元件內容上. 在編輯不同元件內容時, 元件配置資料的資料結構是也是差異化的.
如下圖示的頁面包含3個元件: 頭部元件, 間隔區元件和天氣元件. 頭部元件的配置資料為頭部標題和頭部圖片等; 間隔去元件的配置資料為間隔提示文字等; 天氣元件的配置資料為城市名稱. 不同的元件需要不同的配置資料.
需要為各元件差異化的配置資料定義資料結構和欄位型別, 理想的配置資料格式為 JSON, 因為其格式靈活, 支援資料巢狀, 且前端友好.
元件配置表單
頁面視覺化搭建工具的主要使用人員是運營/產品, 如果讓運營/產品人員直接編輯文字格式的元件配置資料, 操作不友好並且容易出錯. 需提供視覺化的編輯方式 -- 使用 Form 表單來填入配置資料. Form 表單是頁面中資料互動的基本形式, 非開發人員使用也沒有技術門檻. 使用配置表單來填入配置資料有2個好處:
- 配置表單互動功能完善, 容易使用.
- 配置表單可以新增校驗邏輯, 避免填入錯誤的配置資料.
如上圖所示, 由於元件配置資料的差異化, 元件配置表單也是差異化的, 需為元件庫中的每個元件提供相應的配置表單. 如果為每個元件都編寫一個表單頁面, 工作量較大; 對於複雜的配置項, 表單頁面的編寫工作量可能會大於頁面元件的開發工作量. 需要重點考慮提供配置表單的方式.
技術難點2: 如何用最簡單的方式生成配置資料編輯表單.
元件層級關係
元件樹定義了元件間父子兄弟的層級關係, 父子元件通過資料流和事件進行關聯: 資料從父元件的 State 傳遞到子元件的 Props; 子元件的變更觸發 Event 通知父元件.
層級關係對資料流和佈局的影響
頁面視覺化搭建工具編輯元件樹時, 會修改元件資料流. 而不同元件的 Props 和 State 是異構的, 在編輯元件樹時, 需要處理不同元件產生層級關係後對資料流的影響. 如下圖, 父元件的 State 只包含子元件A的 Props, 將子元件B掛載為父元件的子元件, 父元件沒有子元件B的 Props, 會導致無法渲染子元件B.
同理, 不同的元件有不同的樣式佈局, 編輯元件樹時, 需要處理不同元件產生層級關係後帶來的佈局影響.
如下圖, 一個父元件為行內元件, 給其新增一個塊級元件作為子元件, 渲染後可能會導致行內元件被塊級元件撐開.
所以設計頁面視覺化搭建工具的元件樹編輯功能時, 需要重點關注元件樹的層級關係, 解決元件間資料依賴和元件間佈局適配問題. 頁面視覺化搭建工具需要制訂元件巢狀的規則和約束, 通過元件巢狀規則來確保視覺化編輯後的元件樹正常渲染.
技術難點3: 如何組織頁面元件的層級關係.
使用元件巢狀的搭建工具示例:
不巢狀的前端框架元件
可以想象, 元件的巢狀會加大頁面視覺化搭建工具的架構設計和開發難度.
我們注意到, 營銷活動的主要平臺是移動端, 移動端頁面的常用的佈局策略是: 寬度鋪滿, 高度滾動. 如果前端框架元件都設定為鋪滿寬度, 頁面展示時元件只需在瀏覽器垂直方向上順序排列, 則元件組合時不需要巢狀 -- 所有元件互為兄弟節點.
這種鋪滿頁面寬度的元件, 非常適合搭建移動端頁面的場景: 在承載頁面邏輯的同時, 使得頁面的編輯更加簡單, 使用者只需處理元件的順序, 無需處理元件的巢狀.
在移動端, 使用非巢狀元件層級規則的頁面視覺化搭建工具有: 阿里雲鳳蝶、pipeline 等.
阿里雲鳳蝶圖示:
視覺化搭建PC端中後臺系統頁面的工具, 同樣可以採用不巢狀元件層級規則, 如阿里的飛冰:
頁面預覽
頁面實時預覽是頁面視覺化搭建工具的必要部分, 使用人員可以在通過頁面預覽來檢視和驗證視覺化編輯的效果.
頁面預覽示例:
使用者的視覺化編輯包括修改元件樹和修改元件配置資料. 如下圖, 使用者修改頁面後, 需要重新渲染頁面元件, 得到新的預覽頁面.
實現頁面預覽有兩種方式: 頁面掛載和後臺渲染.
頁面掛載
頁面掛載指在編輯器前端頁面的某個元素節點(div)上渲染出使用者編輯的效果. 頁面掛載流程圖如下:
使用頁面掛載的預覽方式, 編輯器前端頁面需要提供元件庫元件渲染環境(元件庫前端框架); 為實現前端渲染, 編輯器前端原始碼需引入元件庫元件原始碼, 後續元件庫更新, 編輯器需要同步更新. 頁面掛載方式有以下特點:
- 實現頁面預覽技術方案可行, 實時渲染速度快.
- 為實現渲染, 編輯器的技術選型需和元件庫前端框架一致.
- 編輯器原始碼和元件庫原始碼耦合.
- 元件庫元件渲染後的程式碼邏輯和樣式佈局, 可能會汙染編輯器頁面.
後臺渲染
後臺渲染指在後臺進行使用者編輯結果頁面的渲染和生成, 編輯器前端頁面通過 iframe 載入和展示結果頁面. 後臺渲染流程圖如下:
使用後臺渲染的預覽方式, 編輯器前端頁面並不需要渲染元件庫的元件; 甚至不需要元件原始碼, 只需知道各個元件的描述資訊. 後臺渲染有以下特點:
- 可以實現編輯器和元件庫前端框架的分離.
- 可以實現編輯器和元件庫各元件的分離.
- 可以避免預覽頁面的邏輯和樣式汙染編輯器環境.
- 要求後臺和元件庫提供頁面後臺渲染能力, 並要求後臺渲染速度快, 使用者需要"實時"預覽.
難點4: 如何實現元件庫的快速後臺渲染, 從而實現編輯器和元件庫前端框架的分離.
頁面構建
頁面構建是元件化前端原始碼生成頁面資源的必要環節: 在開發時需要進行開發構建來進行頁面除錯; 在視覺化編輯後可能需要重新構建來生成預覽頁面; 在釋出前需要進行生產構建.
在視覺化搭建頁面時需要“實時”預覽, 要求頁面頁面構建效率高, 實現快速的構建和打包. 更進一步, 後臺渲染其實和服務端渲染很像, 能否借鑑服務端渲染的技術思路.
自定義模板和元件開發
頁面視覺化搭建工具在業務中的落地, 需要根據不同的業務場景進行業務元件和頁面模板的自定義開發. 這對頁面視覺化搭建工具提出3個要求:
-
頁面視覺化搭建工具要支援業務現有的前端框架.
避免後續元件和模板自定義開發時的工作量和割裂感. 我們是希望複用現有前端框架元件, 而不是用另一個前端框架重寫一遍.
-
元件和模板的編寫方式需遵循較簡單的編寫約定, 避免開發人員難上手和寫起來不舒服.
-
自定義模板和元件和在開發模式下進行除錯和測試.
頁面視覺化搭建工具必然會對頁面模板和頁面元件的編碼方式進行限定. 這要求就頁面視覺化工具在頁面模板和頁面元件上的約束較少, 減少對前端框架程式碼組織方式的入侵點.
理想的活動頁面視覺化搭建工具
頁面視覺化搭建工具, 需要對頁面做一些約定和約束, 在視覺化搭建時遵循工具約定和約束來編輯頁面. 從頁面視覺化搭建工具的技術要點中, 可以歸納出活動頁面視覺化搭建工具的理想形態.
頁面視覺化搭建工具有不同的框架設計和實現方式, 不同的功能有不同的適用場景, 詳細分類可以參考筆者以前的文章: 頁面視覺化搭建工具前生今世.
概述
運營頁面搭建工具, 實現基於模板的頁面生成; 將頁面的邏輯功能封裝在元件內, 宣告頁面配置資料並提供配置表單, 通過對配置表單的資料填充, 進行少量頁面編輯就可以完成業務頁面搭建.
不巢狀的元件
在編輯自由度的選擇上, 選用不巢狀的元件.各元件鋪滿頁面寬度, 在頁面高度方向順序排列.解決元件巢狀帶來的資料流問題. 不巢狀的元件如下圖各個紅框框起來的部分所示.
配置表單自動生成
配置表單的作用是生成和約束 JSON 配置資料, 業界已有對 JSON 進行描述和自動生成表單的方案 -- JSON Schema. 按照 JSON Schema 規範對 JSON 資料進行描述, 可以動態渲染出配置表單; 且 JSON Schema 可以對編輯後的資料做格式校驗, 避免編輯錯誤. 這比編寫一個表單頁面更加簡單和高效.
JSON Schema 的語法並不是很精簡, 雲鳳蝶的 Schema 語法 等方案更簡潔, 但是雲鳳蝶的語法沒有開源的表單生成庫支援, 在開源實踐上還是 JSON Schema 最佳.
理想活動頁面搭建工具特點
- 採用元件化和頁面模板實現頁面生成效率的提升.
- 採用不巢狀的元件層級簡化資料流和樣式佈局.
- 採用 JSON Schema 宣告配置資料, 自動生成配置表單.
- 採用後臺渲染, 使編輯系統與元件前端框架解耦.
- 在遵循編輯系統約定下, 元件可以自由擴充, 前端框架可以自由選擇.
頁面視覺化搭建框架 Pipeline
簡介
Pipeline 是一個開源的頁面視覺化搭建框架, 主要由筆者在維護. Pipeline 意為流水線, 期望 pipeline 像工廠流水線一樣可以高效地組裝活動頁面.
所謂框架, 是它實現了頁面視覺化搭建的基本功能, 解決了頁面視覺化搭建的基本難點, 可以讓開發者快速擁有頁面搭建的能力, 並支援私有部署和二次開發.
專案資訊:
- 專案地址: github.com/page-pipepl…
- 體驗地址: page-pipepline.github.io/pipeline-ed…
- 專案文件: github.com/page-pipepl…
功能 Demo
視覺化編輯
如動圖所示, pipeline 的視覺化編輯能力有:
- 視覺化修改頁面全域性配置, 如修改頁面主題顏色.
- 視覺化修改頁面元件內容, 如修改元件的圖片和替換元件文字.
- 實時預覽頁面編輯效果, 即刻獲得搭建後的頁面.
- 頁面支援使用者互動.
元件編輯
如動圖所示, pipeline 的元件編輯能力有:
- 動態增刪頁面元件.
- 視覺化的元件拖拽, 拖拽元件庫元件插入到頁面元件列表中.
- 元件可以包含業務邏輯(網路請求和使用者互動).
支援的前端框架
Pipeline 實現了編輯器和頁面前端框架的分離, 可以支援不同的前端框架. 所謂支援的前端框架, 就是對某個前端框架按照 pipeline 的約束規則進行元件編輯方式和工程構建方式的改造, 使得前端框架頁面可以在 pipeline 中視覺化搭建.
目前已經支援 Vue, React, 和 Omi, 理論上可以支援任意前端框架.
框架特點
- 開源頁面視覺化搭建框架.
- 自定義頁面可配置欄位.
- 元件動態增減, 元件拖拽.
- 從頁面模板快速生成業務頁面.
- 模板工程/編輯器/後臺服務解偶.
- 模板工程前端框架無關: 支援 vue 和 react 等.
- 支援自由擴充頁面元件, 不限制元件樣式佈局, 介面呼叫等.
- 前端工程約束少, 不限制使用其他技術(Redux, SSR, UI庫等).
與雲鳳蝶的對比
阿里雲鳳蝶 是目前市場上可見中最棒的頁面視覺化搭建服務, pipeline 的很多方面和雲鳳蝶相似, 做個簡單對比:
| 雲鳳蝶 | pipeline |
| 商業化解決方案, 直接可用 | 開源系統, 基礎的頁面搭建框架, 需要自行部署 |
| 生成的頁面, 上傳的圖片等只能託管在阿里, 也限定域名 | 資源落地和周邊功能需要自行搭建, 但是可以100%掌控所有資源 |
| 配置表單功能比較完善 | 配置表單比較基礎, 需要提升 |
| 使用自定義的元件配置約束規則 | 使用通用的 JSON Schema 規範 |
| 模板前端框架採用 Nunjucks | 前端框架採用沒有約束, 已經支援 vue 和 react 等, 業務遷移成本低 |
| 隱藏了模板的構建處理過程, 提供製定的 IDE | 採用 webpack 構建, 模板開發與正常前端專案開發一致 |
| 不支援自定義頁面級別的配置項 | 支援自定義頁面級別的配置項 |
總的來說: 雲鳳蝶是完整的商業化頁面視覺化搭建系統, 適合偏業務運營的公司; pipeline 是開源的頁面視覺化搭建框架, 適合需要自建頁面視覺化搭建系統且有技術人員支援的公司.
下一步工作
- 完善技術實現文件, 使用文件, 系統部署文件和模板開發文件.
- 提供對更多前端框架的支援.
- 提供更加豐富的視覺化互動方式.
總結
本文討論了活動頁面開發的痛點, 總結出頁視覺化搭建工具的7個技術要點和4個技術難點, 並整理出理想的運營頁面視覺化搭建工具, 最後介紹頁面視覺化搭建框架 pipeline.
行文倉促, 對頁面視覺化搭建話題或開源專案 pipeline 感興趣, 歡迎討論.
References
- pipeline
- 頁面視覺化搭建工具前生今世
- Vue 2.0學習筆記：元件資料傳遞
- 阿里雲鳳蝶