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