頁面可視化搭建工具技術要點

前言

春節放假前邀請了三位講師在線分享了【在線分享】活動運營可視化生成器專題。今日早讀文章由騰訊AlloyTeam@陳韓傑投稿分享。

正文從這開始～～

背景

頁面可視化搭建工具, 是互聯網公司中常見的運營工具, 實現了運營人員快速生成和發佈頁面, 提升頁面上線效率; 且無需開發人員介入, 節省開發人力.

頁面可視化搭建工具搭建出的頁面示例:

但從零開始設計和開發出這種工具並不簡單. 作者維護的頁面可視化搭建框架 pipeline, 提供了頁面可視化搭建的核心功能, 免去從零實現頁面可視化搭建工具的困難.

本文主要包含以下內容:

• 活動頁面重複開發的痛點.

• 開發可視化搭建工具的技術要點.

• 理想的運營頁面可視化搭建工具.

• 開源頁面搭建框架 pipeline 介紹.

活動頁面開發之痛

活動頁面特點

前端業務中, 經常需要開發產品介紹頁/營銷頁/活動頁/圖片展示頁等頁面. 這類需求有以下幾個特點:

• 頁面類似: 頁面佈局和業務邏輯較固定.

• 需求高頻: 每週甚至每天有多個這種需求.

• 迭代快速: 開發時間短, 上線時間緊.

• 開發性價比低: 開發任務重複, 消耗各方的溝通時間和人力.

活動頁面常規開發流程

活動頁面常規開發流程圖

流程

1. 運營/產品提出頁面需求.

2. 走項目流程進入開發環節.

3. 開發根據設計稿完成頁面開發.

4. 測試進行頁面測試.

5. 運維進行頁面上線.

6. 運營/產品進行頁面驗收.

痛點

• 多方參與, 反覆溝通, 串行流程.

• 頁面上線週期長, 無法快速響應活動需求.

• 人力陷入重複工作泥潭, 忙碌而低效.

更優的流程

對於高頻和重複的活動頁面開發, 業界一般將頁面做成配置化, 配置工作從開發人員交接給產品/運營等需求方; 開發和設計人員只需提供配置化頁面支持. 更優的活動頁面生成流程依靠頁面可視化搭建系統來實現.現.

更優的活動頁面開發流程圖

流程

1. 運營/產品提出頁面需求.

2. 運營/產品在頁面可視化搭建系統中選取合適的頁面模板進行頁面搭建.

3. 頁面自動化發佈上線, 頁面需求完成, 流程完結.

4. 如果運營/產品沒有找到合適的模板.

5. 開發進行頁面模板開發, 並將頁面模板添加到頁面可視化搭建系統中.

6. 運營/產品繼續流程2.

同時, 隨着頁面可視化搭建系統中的頁面模板不斷豐富, 新的頁面需求對開發人員的依賴逐漸減低, 可由運營/產品直接完成.

頁面可視化搭建工具

更優的活動頁面開發流程依靠頁面可視化搭建系統實現, 重點是要有頁面可視化搭建工具提供技術支持. 頁面可視化搭建工具通過填寫配置數據表單, 拖拉頁面組件等可視化的頁面編輯方式, 實現頁面的生成或修改.

但從零開始設計和開發出頁面可視化搭建工具並不簡單, 有幾個需要了解和關注的技術點.

頁面可視化搭建工具的技術要點

從技術角度, 設計和開發一個頁面可視化搭建工具時, 需要考慮以下幾個技術要點:

• 頁面組件化

• 頁面模板

• 頁面可視化編輯

• 組件層級關係

• 頁面打包

• 實時預覽

• 頁面組件開發

頁面組件化

組件化的優點

頁面的基本單元是 HTML 元素, 但是 HTML 元素無法包含業務邏輯, 且由 HTML 元素直接組合出頁面, 過於繁雜和低效.

圖片來源: https://vuejs.org/images/components.png

頁面較好的組織方式是組件化, 如上圖所示. 組件是對 HTML 元素、元素佈局和樣式、業務邏輯的封裝. 通過組件封裝業務邏輯, 並通過組件屬性(Props)向外暴露組件的配置字段. 採用頁面組件化, 複雜的頁面可視化搭建可以轉化爲2個較簡單的操作:

• 組件樹組合, 頁面可視化搭建變成頁面組件的可視化組合.

• 組件配置編輯, 將對頁面內容的編輯轉化爲對組件的配置屬性(props)修改.

頁面前端框架

頁面組件化需依靠前端框架來實現. 頁面可視化搭建工具的架構方式對頁面前端框架有限制: 需選擇頁面可視化搭建工具支持的前端框架. 如: 頁面可視化搭建工具只支持基於 vue 的頁面, 那頁面組件化的前端框架只能選擇 vue.

但是前端技術團隊選用的前端框架, 一般已用於支持現有業務, 並沉澱了一定數量的技術組件和業務組件. 如果需要針對頁面可視化搭建工具進行前端框架的切換, 成本將會很大.

所以理想的頁面可視化搭建工具, 應該和頁面的前端框架解偶, 如下圖所示. 技術團隊在某前端框架中沉澱的技術組件和業務組件, 可在頁面可視化搭建工具的頁面中複用.

技術難點1:頁面可視化搭建工具與頁面前端框架解偶.

當然, 前端業務已選用了某前端框架, 開發專門支持該前端框架的頁面可視化搭建工具, 也是高效實現目標的選擇.

頁面模板

頁面模板包含完整的業務邏輯, 有助於快速生成業務頁面. 不同的頁面模板適用於不同的業務功能, 從模板庫中選擇合適的頁面模板並派生出默認業務頁面, 再對默認頁面進行可視化編輯, 從而生成目標業務頁面.

雲鳳蝶的頁面模板列表:

圖片來源: https://www.yunfengdie.com/

模板帶有頁面的默認數據; 對於組件化的頁面, 模板是從組件庫中選取部分組件, 並帶有各個組件的默認配置數據.

如上圖所示, 頁面組件庫中有組件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.

同理, 不同的組件有不同的樣式佈局, 編輯組件樹時, 需要處理不同組件產生層級關係後帶來的佈局影響.

圖片來源: https://alligator.io/react/using-this-props-children/

如下圖, 一個父組件爲行內組件, 給其添加一個塊級組件作爲子組件, 渲染後可能會導致行內組件被塊級組件撐開.

所以設計頁面可視化搭建工具的組件樹編輯功能時, 需要重點關注組件樹的層級關係, 解決組件間數據依賴和組件間佈局適配問題. 頁面可視化搭建工具需要制訂組件嵌套的規則和約束, 通過組件嵌套規則來確保可視化編輯後的組件樹正常渲染.

技術難點3: 如何組織頁面組件的層級關係.

使用組件嵌套的搭建工具示例:

圖片來源: https://github.com/jaweii/Vue-Layout

不嵌套的前端框架組件

可以想象, 組件的嵌套會加大頁面可視化搭建工具的架構設計和開發難度.

我們注意到, 營銷活動的主要平臺是移動端, 移動端頁面的常用的佈局策略是: 寬度鋪滿, 高度滾動. 如果前端框架組件都設置爲鋪滿寬度, 頁面展示時組件只需在瀏覽器垂直方向上順序排列, 則組件組合時不需要嵌套 — 所有組件互爲兄弟節點.

這種鋪滿頁面寬度的組件, 非常適合搭建移動端頁面的場景: 在承載頁面邏輯的同時, 使得頁面的編輯更加簡單, 使用者只需處理組件的順序, 無需處理組件的嵌套.

在移動端, 使用非嵌套組件層級規則的頁面可視化搭建工具有: 阿里雲鳳蝶、pipeline 等.

阿里雲鳳蝶圖示:

可視化搭建PC端中後臺系統頁面的工具, 同樣可以採用不嵌套組件層級規則, 如阿里的飛冰:

頁面預覽

頁面實時預覽是頁面可視化搭建工具的必要部分, 使用人員可以在通過頁面預覽來查看和驗證可視化編輯的效果.

頁面預覽示例:

用戶的可視化編輯包括修改組件樹和修改組件配置數據. 如下圖, 用戶修改頁面後, 需要重新渲染頁面組件, 得到新的預覽頁面.

實現頁面預覽有兩種方式: 頁面掛載和後臺渲染.

頁面掛載

頁面掛載指在編輯器前端頁面的某個元素節點(div)上渲染出用戶編輯的效果. 頁面掛載流程圖如下:

使用頁面掛載的預覽方式, 編輯器前端頁面需要提供組件庫組件渲染環境(組件庫前端框架); 爲實現前端渲染, 編輯器前端源碼需引入組件庫組件源碼, 後續組件庫更新, 編輯器需要同步更新. 頁面掛載方式有以下特點:

• 實現頁面預覽技術方案可行, 實時渲染速度快.

• 爲實現渲染, 編輯器的技術選型需和組件庫前端框架一致.

• 編輯器源碼和組件庫源碼耦合.

• 組件庫組件渲染後的代碼邏輯和樣式佈局, 可能會污染編輯器頁面.

後臺渲染

後臺渲染指在後臺進行用戶編輯結果頁面的渲染和生成, 編輯器前端頁面通過 iframe 加載和展示結果頁面. 後臺渲染流程圖如下:

使用後臺渲染的預覽方式, 編輯器前端頁面並不需要渲染組件庫的組件; 甚至不需要組件源碼, 只需知道各個組件的描述信息. 後臺渲染有以下特點:

• 可以實現編輯器和組件庫前端框架的分離.

• 可以實現編輯器和組件庫各組件的分離.

• 可以避免預覽頁面的邏輯和樣式污染編輯器環境.

• 要求後臺和組件庫提供頁面後臺渲染能力, 並要求後臺渲染速度快, 用戶需要”實時”預覽.

難點4: 如何實現組件庫的快速後臺渲染, 從而實現編輯器和組件庫前端框架的分離.

頁面構建

頁面構建是組件化前端源碼生成頁面資源的必要環節: 在開發時需要進行開發構建來進行頁面調試; 在可視化編輯後可能需要重新構建來生成預覽頁面; 在發佈前需要進行生產構建.

在可視化搭建頁面時需要“實時”預覽, 要求頁面頁面構建效率高, 實現快速的構建和打包. 更進一步, 後臺渲染其實和服務端渲染很像, 能否借鑑服務端渲染的技術思路.

自定義模板和組件開發

頁面可視化搭建工具在業務中的落地, 需要根據不同的業務場景進行業務組件和頁面模板的自定義開發. 這對頁面可視化搭建工具提出3個要求:

• 頁面可視化搭建工具要支持業務現有的前端框架.避免後續組件和模板自定義開發時的工作量和割裂感. 我們是希望複用現有前端框架組件, 而不是用另一個前端框架重寫一遍.

• 組件和模板的編寫方式需遵循較簡單的編寫約定, 避免開發人員難上手和寫起來不舒服.

• 自定義模板和組件和在開發模式下進行調試和測試.頁面可視化搭建工具必然會對頁面模板和頁面組件的編碼方式進行限定. 這要求就頁面可視化工具在頁面模板和頁面組件上的約束較少, 減少對前端框架代碼組織方式的入侵點.

理想的活動頁面可視化搭建工具

頁面可視化搭建工具, 需要對頁面做一些約定和約束, 在可視化搭建時遵循工具約定和約束來編輯頁面. 從頁面可視化搭建工具的技術要點中, 可以歸納出活動頁面可視化搭建工具的理想形態.

頁面可視化搭建工具有不同的框架設計和實現方式, 不同的功能有不同的適用場景, 詳細分類可以參考筆者以前的文章: 【第1282期】頁面可視化搭建工具前生今世.

概述

運營頁面搭建工具, 實現基於模板的頁面生成; 將頁面的邏輯功能封裝在組件內, 聲明頁面配置數據並提供配置表單, 通過對配置表單的數據填充, 進行少量頁面編輯就可以完成業務頁面搭建.

不嵌套的組件

在編輯自由度的選擇上, 選用不嵌套的組件.各組件鋪滿頁面寬度, 在頁面高度方向順序排列.解決組件嵌套帶來的數據流問題. 不嵌套的組件如下圖各個紅框框起來的部分所示.

配置表單自動生成

配置表單的作用是生成和約束 JSON 配置數據, 業界已有對 JSON 進行描述和自動生成表單的方案 — JSON Schema. 按照 JSON Schema 規範對 JSON 數據進行描述, 可以動態渲染出配置表單; 且 JSON Schema 可以對編輯後的數據做格式校驗, 避免編輯錯誤. 這比編寫一個表單頁面更加簡單和高效.

圖片來源: https://github.com/json-editor/json-editor

JSON Schema 的語法並不是很精簡, 雲鳳蝶的 Schema 語法 等方案更簡潔, 但是雲鳳蝶的語法沒有開源的表單生成庫支持, 在開源實踐上還是 JSON Schema 最佳.

理想活動頁面搭建工具特點

• 採用組件化和頁面模板實現頁面生成效率的提升.

• 採用不嵌套的組件層級簡化數據流和樣式佈局.

• 採用 JSON Schema 聲明配置數據, 自動生成配置表單.

• 採用後臺渲染, 使編輯系統與組件前端框架解耦.

• 在遵循編輯系統約定下, 組件可以自由拓展, 前端框架可以自由選擇.

頁面可視化搭建框架 Pipeline

簡介

Pipeline 是一個開源的頁面可視化搭建框架, 主要由筆者在維護. Pipeline 意爲流水線, 期望 pipeline 像工廠流水線一樣可以高效地組裝活動頁面.

所謂框架, 是它實現了頁面可視化搭建的基本功能, 解決了頁面可視化搭建的基本難點, 可以讓開發者快速擁有頁面搭建的能力, 並支持私有部署和二次開發.

項目信息:

• 項目地址: https://github.com/page-pipepline

• 體驗地址: https://page-pipepline.github.io/pipeline-editor/dist/#/

• 項目文檔: https://github.com/page-pipepline/pipeline-document

功能 Demo

可視化編輯

如動圖所示, pipeline 的可視化編輯能力有:

• 可視化修改頁面全局配置, 如修改頁面主題顏色.

• 可視化修改頁面組件內容, 如修改組件的圖片和替換組件文本.

• 實時預覽頁面編輯效果, 即刻獲得搭建後的頁面.

• 頁面支持用戶交互.

組件編輯

如動圖所示, pipeline 的組件編輯能力有:

• 動態增刪頁面組件.

• 可視化的組件拖拽, 拖拽組件庫組件插入到頁面組件列表中.

• 組件可以包含業務邏輯(網絡請求和用戶交互).

支持的前端框架

Pipeline 實現了編輯器和頁面前端框架的分離, 可以支持不同的前端框架. 所謂支持的前端框架, 就是對某個前端框架按照 pipeline 的約束規則進行組件編輯方式和工程構建方式的改造, 使得前端框架頁面可以在 pipeline 中可視化搭建.

目前已經支持 Vue, React, 和 Omi, 理論上可以支持任意前端框架.

image

框架特點

• 開源頁面可視化搭建框架.

• 自定義頁面可配置字段.

• 組件動態增減, 組件拖拽.

• 從頁面模板快速生成業務頁面.

• 模板工程/編輯器/後臺服務解偶.

• 模板工程前端框架無關: 支持 vue 和 react 等.

• 支持自由拓展頁面組件, 不限制組件樣式佈局, 接口調用等.

• 前端工程約束少, 不限制使用其他技術(Redux, SSR, UI庫等).

與雲鳳蝶的對比

阿里雲鳳蝶 是目前市場上可見中最棒的頁面可視化搭建服務, pipeline 的很多方面和雲鳳蝶相似, 做個簡單對比:

雲鳳蝶	pipeline
商業化解決方案, 直接可用	開源系統, 基礎的頁面搭建框架, 需要自行部署
生成的頁面, 上傳的圖片等只能託管在阿里, 也限定域名	資源落地和周邊功能需要自行搭建, 但是可以100%掌控所有資源
配置表單功能比較完善	配置表單比較基礎, 需要提升
模板前端框架採用 Nunjucks	前端框架採用沒有約束, 已經支持 vue 和 react 等, 業務遷移成本低
隱藏了模板的構建處理過程, 提供製定的 IDE	採用 webpack 構建, 模板開發與正常前端項目開發一致
不支持自定義頁面級別的配置項	支持自定義頁面級別的配置項

總的來說: 雲鳳蝶是完整的商業化頁面可視化搭建系統, 適合偏業務運營的公司; pipeline 是開源的頁面可視化搭建框架, 適合需要自建頁面可視化搭建系統且有技術人員支持的公司.

下一步工作

• 完善技術實現文檔, 使用文檔, 系統部署文檔和模板開發文檔.

• 提供對更多前端框架的支持.

• 提供更加豐富的可視化交互方式.

總結

本文討論了活動頁面開發的痛點, 總結出頁可視化搭建工具的7個技術要點和4個技術難點, 並整理出理想的運營頁面可視化搭建工具, 最後介紹頁面可視化搭建框架 pipeline.

行文倉促, 對頁面可視化搭建話題或開源項目 pipeline 感興趣, 歡迎討論.

References

• pipeline:https://github.com/page-pipepline

• 頁面可視化搭建工具前生今世:https://github.com/CntChen/cntchen.github.io/issues /15

• Vue2.0學習筆記：組件數據傳遞:https://www.w3cplus.com/vue/component-data-and-props-part1.html

• 阿里雲鳳蝶:https://i.yunfengdie.com/

關於本文作者：@陳韓傑原文：https://github.com/CntChen/cntchen.github.io/issues/17