活動中台：揭秘vivo的千萬級DAU活動中台

第一部分活動中台的前世今生
第1章傳統活動開發遇到的困境 3
1.1活動開發的3種模式 3
1.2如何抽象整合活動平臺 6
第2章活動開發模式創新 8
2.1“將平臺交出去”的創新設計 8
2.2讓研發人員也成為平臺的用戶 10
2.3原來這就是活動中台 12
第3章活動中台業務設計 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作品狀態 20
3.2.3作品短鏈 20
3.2.4批量管理 21
3.2.5作品組 22
3.2.6資料分析 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許可權系統的實現 36
3.5.3許可權隔離設計 41
3.6活動工廠—H5視覺化搭建 44
3.6.1元素區 45
3.6.2設計區 45
3.6.3配置區 47
3.6.4頁面管理區 52
3.6.5功能區 54
3.7資料服務設計 56
3.7.1元件服務 57
3.7.2編譯服務 57
3.7.3資料服務 58
 
第二部分活動中台架構設計
第4章微前端架構設計 63
4.1微組件概述 63
4.1.1Vue 單檔組件 64
4.1.2構建 UMD 規範 64
4.1.3構建微組件基座 67
4.2微元件狀態管理 70
4.2.1傳統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 性能優化實踐 130
5.1H5性能檢測 130
5.1.1Lighthouse 130
5.1.2關鍵指標解析 132
5.2H5渲染加速優化 136
5.2.1網路層優化 136
5.2.2圖像優化 140
5.3圖片高效載入方案 142
5.3.1圖片服務架構設計 142
5.3.2實戰中WebP的應用 148
5.3.3提升WebP的相容性 150
5.4網頁秒開探索 153
5.4.1網頁渲染模式 153
5.4.2WebView 秒開方案 157
5.5H5跨屏動態適配方案 162
5.5.1普適性佈局方案 162
5.5.2H5在滿屏下的痛點 165
5.5.3預設性的優化 167
5.5.4預設規則的實現 170
 
第三部分活動中台技術探索
第6章Node.js在中台應用上的實踐 179
6.1企業級 NPM 私服實踐 179
6.1.1安裝部署Verdaccio 180
6.1.2利用NRM來使用私有源 183
6.1.3內置外掛程式擴展私服能力 184
6.1.4自訂tag管理多環境外掛程式 185
6.2Node.js資料持久層的探索 187
6.2.1資料持久層現狀與思考 188
6.2.2探索資料持久層 191
6.2.3工程化體系加持下的未來 204
6.3Node.js 應用全鏈路追蹤技術 206
6.3.1Node.js 全鏈路資訊獲取的方式 207
6.3.2zone-context方案設計 208
6.4Node.js搭建自動化文檔工作流 216
6.4.1自動化文檔生成器 217
6.4.2自動化文檔部署 221
第7章中台之上的低代碼開發平臺 226
7.1H5生產力的迷與思 226
7.1.1低複用場景下的弊端 226
7.1.2零代碼與低代碼 228
7.1.3低代碼模式下的活動開發 230
7.2構建本地低代碼工具 233
7.2.1低代碼工具設計 233
7.2.2基於Vue代碼的工程視覺化工具 236
7.3智慧化的活動中台 247
後記 249