內容簡介
本書講解了如何將企業(yè)的營銷活動開發(fā)和運營能力通過中臺標準化和敏捷化,實現(xiàn)對前端需求的快速響應和后端能力的整合復用,從而提升企業(yè)營銷能力和營銷效果。
本書的內容來自于vivo官方的實踐,vivo的活動中臺“悟空”是各行業(yè)競相學習和效仿的標桿。本書從業(yè)務、產品和技術的角度對悟空中臺的業(yè)務設計、技術架構、核心技術、實現(xiàn)思路、應用實踐等做了全面的講解。
全書一共7章,可以分為三個部分:
第1部分 活動中臺前世今生(第1~3章)
首先介紹了傳統(tǒng)活動開發(fā)的模式和瓶頸,然后介紹了vivo結合中臺理念探索出的一套創(chuàng)新性的活動開發(fā)模式,z后介紹了活動中臺的功能架構和業(yè)務設計。
第二部分 活動中臺架構設計(第4~5章)
從前端的視角講解了如何利用微前端和H5等技術實現(xiàn)活動中臺的架構設計和落地,不僅講解了活動中臺的架構與實現(xiàn),而且還包含諸如微前端架構、可視化搭建、H5性能優(yōu)化、H5跨屏動態(tài)適配等大量技術細節(jié)。
第三部分 活動中臺技術探索(第6~7章)
這部分內容是 vivo中臺團隊對智能活動制作的探索與設想。不僅向讀者介紹了中臺配套的服務端Node.js技術,而且還介紹了中臺團隊在活動中臺上進行的低代碼實踐。
(1)vivo官方出品:vivo的活動中臺“悟空”久負盛名,早已實現(xiàn)千萬級DAU,是活動中臺領域的標桿,被競相學習和效仿。(2)5維度講解:從業(yè)務設計、技術架構、核心技術、實現(xiàn)思路、應用實踐等維度全面講解了活動中臺的設計與實現(xiàn)。(3)提升活動開發(fā)能力:本書將從業(yè)務、產品、技術等多個維度全面提升企業(yè)的活動開發(fā)能力,從而提升活動的效果。(4)前端技術精進:包含微前端技術架構、可視化搭建、H5性能優(yōu)化、H5跨屏動態(tài)適配等大量前端技術細節(jié)。
為什么要寫這本書
2018年,vivo的互聯(lián)網營銷業(yè)務飛速發(fā)展,公司內部誕生了許多營銷活動支撐系統(tǒng)。經過研究和分析,我們發(fā)現(xiàn)大多數(shù)活動系統(tǒng)的功能相似度很高,存在重復建設的問題。因此,我們期望可以抽象各業(yè)務活動系統(tǒng)的功能,在同一平臺上快速滿足活動業(yè)務需求,從而減少建設和學習成本,提高工作效率。在架構設計階段,我們發(fā)現(xiàn)該平臺和中臺的概念非常相近,中臺也是為了抽象整合可復用的能力,快速響應用戶需求而誕生的。架構設計不能生搬硬套流行的概念,而是要在實際業(yè)務場景中逐步完善。
隨著互聯(lián)網活動業(yè)務的覆蓋范圍越來越廣,活動平臺既要快速支撐前臺需求,又要保障后臺能力穩(wěn)定且可復用。同時,我們還會經常面臨多項活動任務并發(fā)的情況,一般我們會挑選更具有價值的需求去響應,例如符合公司戰(zhàn)略方向、具備重大商業(yè)價值的需求。在這種情況下,新生業(yè)務的發(fā)展會不可避免地受到影響,甚至錯過發(fā)展的契機。不同業(yè)務的需求會存在優(yōu)先級和商業(yè)價值的區(qū)別,但價值相對較低的需求就必須讓步嗎?
在早期的活動功能架構設計中,我們也預料到了這類問題。為支撐并發(fā)需求,解決通用性活動方案無法滿足個性化定制的問題,我們引入了用戶自主定制的概念,在向業(yè)務用戶開放SaaS可視化零代碼平臺以搭建活動的同時,向研發(fā)工程師開放底層 PaaS 低代碼平臺,讓業(yè)務發(fā)展不再受制于平臺的規(guī)范,以加快整體活動的開發(fā)進程。該模式符合“抽象整合,敏捷創(chuàng)新”的中臺理念,既滿足了高價值業(yè)務需求的支撐要求,又平衡了其他業(yè)務的訴求。
后,我們慢慢抽象活動共性業(yè)務、剝離統(tǒng)一活動數(shù)據(jù)服務,再結合低代碼開發(fā)平臺,打造了一站式活動運營開發(fā)中臺,并將它命名為“悟空”。“悟空”承載了我們的愿景,希望在技術領域持續(xù)探索,“修煉七十二變”,不斷攻克活動運作過程中的“九九八十一難”,終“取得真經”。
我們不拘泥于一時的成果,不斷推陳出新,把前臺業(yè)務當作大樹的枝干,把強大穩(wěn)定的后臺能力當作肥沃的土壤,而中臺就是介于枝干和土壤之間挺拔的樹干,為繁多的枝丫輸送養(yǎng)分。
當活動中臺取得階段性勝利時,我們開始在“vivo互聯(lián)網技術”公眾號上發(fā)表活動中臺系列技術文章。欒傳龍老師聯(lián)系到我們,希望我們以書的方式向行業(yè)輸出體系化的、更加全面且有深度的解決方案。在得到部門的大力支持后,團隊開始了本書的寫作。本書將講述微前端如何助力零代碼、低代碼的活動生產模式,并講解在實際搭建過程中遇到的問題和解決方案,以幫助讀者在短的時間內了解活動中臺的建設思路。
讀者對象
活動中臺產品經理
系統(tǒng)架構師、Web前端工程師
本書特色
本書結合實際的活動中臺建設歷程,為讀者帶來整體技術架構思路的介紹和全鏈路開發(fā)技術的解析。H5網頁是活動中臺的交付件,其依賴的Web前端技術也自然成為主導活動中臺建設的重要技術。我們希望從前端技術的角度給讀者帶來不一樣的中臺架構搭建理念,幫助讀者在互聯(lián)網營銷活動的支撐方面找到新的方法,幫助企業(yè)在解決共性能力搭建的基礎上,找到可以支撐定制化能力的架構設計思路。
如何閱讀本書
本書分為三部分,共7章。
部分(第1~3章)為活動中臺的前世今生,介紹目前行業(yè)內的活動開發(fā)現(xiàn)狀,幫助讀者了解技術背后的業(yè)務問題,講解如何不局限于中臺的概念并結合實際困境,構想出開創(chuàng)性的活動方案,為讀者展示終的產品形態(tài)和業(yè)務架構。
第二部分(第4~5章)為活動中臺架構設計,從微前端技術切入,講述如何搭建中臺級前端架構,同時以實操的形式講解技術架構如何落地。如果你是一名經驗豐富的研發(fā)人員,希望了解微前端架構設計技巧以及H5優(yōu)化的相關技巧,可以直接閱讀這部分內容。
第三部分(第6~7章)為活動中臺技術探索,在Web端的創(chuàng)新道路中,活動中臺在Node.js技術和智能活動探索方面同樣也有突破。這部分將向讀者介紹服務端技術和低代碼場景下中臺團隊的思考與實踐。
勘誤和支持
除封面署名外,參加本書編寫、審閱工作的還有葛偉、胡鋒、馮偉、符升升、萬安文、呂成睿。由于水平有限,編寫時間倉促,書中難免會出現(xiàn)一些錯誤或者不準確的地方,懇請讀者批評指正。讀者可以將書中的錯誤以郵件的形式發(fā)送至wukong@vivo.com。如果你遇到任何問題,也可以郵件聯(lián)系我,我將盡量為讀者提供滿意的解答,期待能夠得到你們的真摯反饋。
致謝
首先感謝維沃軟件技術有限公司。我們創(chuàng)新性中臺方案的成功應用,得到了所有部門的信任和認可,是全體運營、產品、研發(fā)、測試、運維、數(shù)據(jù)、設計同事通力合作的結果。慶幸在我好的年華,遇見了優(yōu)秀的你們。
感謝機械工業(yè)出版社華章公司的編輯楊福川、欒傳龍老師,以及負責vivo互聯(lián)網技術運營的同事張紫娟在這一年多的時間中始終支持我寫作。是你們的鼓勵與信任幫助我順利完成了全部書稿。
感謝在活動中臺建設過程中,一起暢談技術并給予全力支持的楊昆、黃文佳、王豪、王振拯、于路、黃云杰、孫茂斌、吳健、羅然、趙杰、孔祥軍、陳星星、蘇寧、劉洋等前端伙伴們。因為你們的信任,我們才會一起看見。
謹以此書獻給一起奮斗的同事和朋友們—徐耀銘、張飛、關巖冰、孫權、陳綱、皮偉、施楊濤、郭超、劉冬、康佳奇、康雄、楊洋、劉榮青、張瑞、劉梁、高源,以及名單之外的更多朋友。沒有你們的支持和辛苦付出,不會有活動中臺及本書的誕生。
作者簡介
朱明鵬
一位具有豐富可視化搭建經驗的技術專家,有近10年的軟件開發(fā)與架構經驗。先后就職于亞信科技、途牛旅游網,積累了豐富的前后端開發(fā)經驗,曾負責并參與多個大型系統(tǒng)軟件的基礎架構和業(yè)務平臺的設計與研發(fā)工作。目前是vivo互聯(lián)網產品平臺部系統(tǒng)架構師,領導低代碼效能工具的設計研發(fā)和和大前端領域的技術探索。
序一
序二
序三
前言
部分 活動中臺的前世今生
第1章 傳統(tǒng)活動開發(fā)遇到的困境 3
1.1 活動開發(fā)的3種模式 3
1.2 如何抽象整合活動平臺 6
第2章 活動開發(fā)模式創(chuàng)新 8
2.1 “將平臺交出去”的創(chuàng)新設計 8
2.2 讓研發(fā)人員也成為平臺的用戶 10
2.3 原來這就是活動中臺 12
第3章 活動中臺業(yè)務設計 15
3.1 中臺功能架構設計 15
3.1.1 問題背景 15
3.1.2 產品介紹 16
3.1.3 產品矩陣 17
3.1.4 功能架構 17
3.2 落地頁管理—作品中心 18
3.2.1 作品卡片 19
3.2.2 作品狀態(tài) 20
3.2.3 作品短鏈 20
3.2.4 批量管理 21
3.2.5 作品組 22
3.2.6 數(shù)據(jù)分析 23
3.3 作品的齒輪—組件與任務 24
3.3.1 組件類型 24
3.3.2 任務組件 27
3.4 物料管理—素材中心 30
3.4.1 素材上傳 31
3.4.2 素材管理 33
3.5 訪問控制—權限中心 34
3.5.1 常見的權限設計模式 34
3.5.2 權限系統(tǒng)的實現(xiàn) 36
3.5.3 權限隔離設計 41
3.6 活動工廠—H5可視化搭建 44
3.6.1 元素區(qū) 45
3.6.2 設計區(qū) 45
3.6.3 配置區(qū) 47
3.6.4 頁面管理區(qū) 52
3.6.5 功能區(qū) 54
3.7 數(shù)據(jù)服務設計 56
3.7.1 組件服務 57
3.7.2 編譯服務 57
3.7.3 數(shù)據(jù)服務 58
第二部分 活動中臺架構設計
第4章 微前端架構設計 63
4.1 微組件概述 63
4.1.1 Vue 單文件組件 64
4.1.2 構建 UMD 規(guī)范 64
4.1.3 構建微組件基座 67
4.2 微組件狀態(tài)管理 70
4.2.1 傳統(tǒng)EventBus方案 70
4.2.2 天然的解決方案Vuex 71
4.3 微組件基座設計 77
4.3.1 組件沙箱 77
4.3.2 沙箱通信 85
4.4 通用可視化中的微組件 91
4.4.1 擴展微組件 91
4.4.2 定制化基座 92
4.4.3 組件動畫 95
4.5 熱編譯微組件工程 100
4.5.1 微組件生成活動頁 100
4.5.2 服務端活動編譯加速 107
4.6 可視化搭建微信小程序 109
4.6.1 基于uni-app的微組件 110
4.6.2 微組件編譯微應用 124
第5章 H5 性能優(yōu)化實踐 130
5.1 H5性能檢測 130
5.1.1 Lighthouse 130
5.1.2 關鍵指標解析 132
5.2 H5渲染加速優(yōu)化 136
5.2.1 網絡層優(yōu)化 136
5.2.2 圖像優(yōu)化 140
5.3 圖片高效加載方案 142
5.3.1 圖片服務架構設計 142
5.3.2 實戰(zhàn)中WebP的應用 148
5.3.3 提升WebP的兼容性 150
5.4 網頁秒開探索 153
5.4.1 網頁渲染模式 153
5.4.2 WebView 秒開方案 157
5.5 H5跨屏動態(tài)適配方案 162
5.5.1 普適性布局方案 162
5.5.2 H5在滿屏下的痛點 165
5.5.3 預設性的優(yōu)化 167
5.5.4 預設規(guī)則的實現(xiàn) 170
第三部分 活動中臺技術探索
第6章 Node.js在中臺應用上的實踐 179
6.1 企業(yè)級 NPM 私服實踐 179
6.1.1 安裝部署Verdaccio 180
6.1.2?利用NRM來使用私有源 183
6.1.3 內置插件擴展私服能力 184
6.1.4 自定義tag管理多環(huán)境插件 185
6.2?Node.js數(shù)據(jù)持久層的探索 187
6.2.1 數(shù)據(jù)持久層現(xiàn)狀與思考 188
6.2.2?探索數(shù)據(jù)持久層 191
6.2.3 工程化體系加持下的未來 204
6.3 Node.js 應用全鏈路追蹤技術 206
6.3.1 Node.js 全鏈路信息獲取的方式 207
6.3.2 zone-context方案設計 208
6.4 Node.js搭建自動化文檔工作流 216
6.4.1 自動化文檔生成器 217
6.4.2 自動化文檔部署 221
第7章 中臺之上的低代碼開發(fā)平臺 226
7.1 H5生產力的迷與思 226
7.1.1 低復用場景下的弊端 226
7.1.2 零代碼與低代碼 228
7.1.3 低代碼模式下的活動開發(fā) 230
7.2 構建本地低代碼工具 233
7.2.1 低代碼工具設計 233
7.2.2 基于Vue代碼的工程可視化工具 236
7.3 智能化的活動中臺 247
后記 249