活动中台：揭秘vivo的千万级DAU活动中台

为什么要写这本书

2018年，vivo的互联网营销业务飞速发展，公司内部诞生了许多营销活动支撑系统。经过研究和分析，我们发现大多数活动系统的功能相似度很高，存在重复建设的问题。因此，我们期望可以抽象各业务活动系统的功能，在同一平台上快速满足活动业务需求，从而减少建设和学习成本，提高工作效率。在架构设计阶段，我们发现该平台和中台的概念非常相近，中台也是为了抽象整合可复用的能力，快速响应用户需求而诞生的。架构设计不能生搬硬套流行的概念，而是要在实际业务场景中逐步完善。

随着互联网活动业务的覆盖范围越来越广，活动平台既要快速支撑前台需求，又要保障后台能力稳定且可复用。同时，我们还会经常面临多项活动任务并发的情况，一般我们会挑选更具有价值的需求去响应，例如符合公司战略方向、具备重大商业价值的需求。在这种情况下，新生业务的发展会不可避免地受到影响，甚至错过发展的契机。不同业务的需求会存在优先级和商业价值的区别，但价值相对较低的需求就必须让步吗？

在早期的活动功能架构设计中，我们也预料到了这类问题。为支撑并发需求，解决通用性活动方案无法满足个性化定制的问题，我们引入了用户自主定制的概念，在向业务用户开放SaaS可视化零代码平台以搭建活动的同时，向研发工程师开放底层 PaaS 低代码平台，让业务发展不再受制于平台的规范，以加快整体活动的开发进程。该模式符合“抽象整合，敏捷创新”的中台理念，既满足了高价值业务需求的支撑要求，又平衡了其他业务的诉求。

后，我们慢慢抽象活动共性业务、剥离统一活动数据服务，再结合低代码开发平台，打造了一站式活动运营开发中台，并将它命名为“悟空”。“悟空”承载了我们的愿景，希望在技术领域持续探索，“修炼七十二变”，不断攻克活动运作过程中的“九九八十一难”，终“取得真经”。

我们不拘泥于一时的成果，不断推陈出新，把前台业务当作大树的枝干，把强大稳定的后台能力当作肥沃的土壤，而中台就是介于枝干和土壤之间挺拔的树干，为繁多的枝丫输送养分。

当活动中台取得阶段性胜利时，我们开始在“vivo互联网技术”公众号上发表活动中台系列技术文章。栾传龙老师联系到我们，希望我们以书的方式向行业输出体系化的、更加全面且有深度的解决方案。在得到部门的大力支持后，团队开始了本书的写作。本书将讲述微前端如何助力零代码、低代码的活动生产模式，并讲解在实际搭建过程中遇到的问题和解决方案，以帮助读者在短的时间内了解活动中台的建设思路。

读者对象

活动中台产品经理

系统架构师、Web前端工程师

本书特色

本书结合实际的活动中台建设历程，为读者带来整体技术架构思路的介绍和全链路开发技术的解析。H5网页是活动中台的交付件，其依赖的Web前端技术也自然成为主导活动中台建设的重要技术。我们希望从前端技术的角度给读者带来不一样的中台架构搭建理念，帮助读者在互联网营销活动的支撑方面找到新的方法，帮助企业在解决共性能力搭建的基础上，找到可以支撑定制化能力的架构设计思路。

如何阅读本书

本书分为三部分，共7章。

第1部分（第1～3章）为活动中台的前世今生，介绍目前行业内的活动开发现状，帮助读者了解技术背后的业务问题，讲解如何不局限于中台的概念并结合实际困境，构想出开创性的活动方案，为读者展示终的产品形态和业务架构。

第2部分（第4～5章）为活动中台架构设计，从微前端技术切入，讲述如何搭建中台级前端架构，同时以实操的形式讲解技术架构如何落地。如果你是一名经验丰富的研发人员，希望了解微前端架构设计技巧以及H5优化的相关技巧，可以直接阅读这部分内容。

第3部分（第6～7章）为活动中台技术探索，在Web端的创新道路中，活动中台在Node.js技术和智能活动探索方面同样也有突破。这部分将向读者介绍服务端技术和低代码场景下中台团队的思考与实践。

本书讲解了如何将企业的营销活动开发和运营能力通过中台标准化和敏捷化，实现对前端需求的快速响应和后端能力的整合复用，从而提升企业营销能力和营销效果。

本书的内容来自于vivo官方的实践，vivo的活动中台“悟空”是各行业竞相学习和效仿的标杆。本书从业务、产品和技术的角度对悟空中台的业务设计、技术架构、核心技术、实现思路、应用实践等做了全面的讲解。

全书一共7章，可以分为三个部分：

第1部分 活动中台前世今生（第1~3章）

首先介绍了传统活动开发的模式和瓶颈，然后介绍了vivo结合中台理念探索出的一套创新性的活动开发模式，后介绍了活动中台的功能架构和业务设计。

第2部分 活动中台架构设计（第4~5章）

从前端的视角讲解了如何利用微前端和H5等技术实现活动中台的架构设计和落地，不仅讲解了活动中台的架构与实现，而且还包含诸如微前端架构、可视化搭建、H5性能优化、H5跨屏动态适配等大量技术细节。

第3部分 活动中台技术探索（第6~7章）

这部分内容是 vivo中台团队对智能活动制作的探索与设想。不仅向读者介绍了中台配套的服务端Node.js技术，而且还介绍了中台团队在活动中台上进行的低代码实践。

朱明鹏

一位具有丰富可视化搭建经验的技术专家，有近10年的软件开发与架构经验。先后就职于亚信科技、途牛旅游网，积累了丰富的前后端开发经验，曾负责并参与多个大型系统软件的基础架构和业务平台的设计与研发工作。目前是vivo互联网产品平台部系统架构师，领导低代码效能工具的设计研发和和大前端领域的技术探索。

第1部分　活动中台的前世今生
第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.1　Vue 单文件组件 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.1　H5性能检测 130
5.1.1　Lighthouse 130
5.1.2　关键指标解析 132
5.2　H5渲染加速优化 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.2　WebView 秒开方案 157
5.5　H5跨屏动态适配方案 162
5.5.1　普适性布局方案 162
5.5.2　H5在满屏下的痛点 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.2  Node.js数据持久层的探索 187
6.2.1　数据持久层现状与思考 188
6.2.2  探索数据持久层 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章　中台之上的低代码开发平台 226
7.1　H5生产力的迷与思 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

本书讲解了如何将企业的营销活动开发和运营能力通过中台标准化和敏捷化，实现对前端需求的快速响应和后端能力的整合复用，从而提升企业营销能力和营销效果。

本书的内容来自于vivo官方的实践，vivo的活动中台“悟空”是各行业竞相学习和效仿的标杆。本书从业务、产品和技术的角度对悟空中台的业务设计、技术架构、核心技术、实现思路、应用实践等做了全面的讲解。

全书一共7章，可以分为三个部分：

第1部分 活动中台前世今生（第1~3章）

首先介绍了传统活动开发的模式和瓶颈，然后介绍了vivo结合中台理念探索出的一套创新性的活动开发模式，后介绍了活动中台的功能架构和业务设计。

第2部分 活动中台架构设计（第4~5章）

从前端的视角讲解了如何利用微前端和H5等技术实现活动中台的架构设计和落地，不仅讲解了活动中台的架构与实现，而且还包含诸如微前端架构、可视化搭建、H5性能优化、H5跨屏动态适配等大量技术细节。

第3部分 活动中台技术探索（第6~7章）

这部分内容是 vivo中台团队对智能活动制作的探索与设想。不仅向读者介绍了中台配套的服务端Node.js技术，而且还介绍了中台团队在活动中台上进行的低代码实践。

朱明鹏

一位具有丰富可视化搭建经验的技术专家，有近10年的软件开发与架构经验。先后就职于亚信科技、途牛旅游网，积累了丰富的前后端开发经验，曾负责并参与多个大型系统软件的基础架构和业务平台的设计与研发工作。目前是vivo互联网产品平台部系统架构师，领导低代码效能工具的设计研发和和大前端领域的技术探索。

序　　一

vivo 活动中台能够获得成功，我个人理解有4个必不可少的要素。

1）需求是否有共性，即各个业务群是否都需要解决同样的业务难题。如果需求差异过大，一套中台解决方案很难满足所有需求。

2）该中台是否能够解决大部分业务线自己解决起来都比较困难的问题，是否能够应对耗费资源比较大的状况。

3）活动中台团队是否能够以第三方服务的姿态去设计、推荐自己的服务，并做好客户满意度调查。

4）在这个组织中，每个业务单元是否以组织整体利益化为原则去选择自己的业务实现方案。

从终的结果来看，前三点证明了悟空活动中台开发运营团队的优秀，第四点证明了vivo企业文化践行的优秀。

徐耀铭　　

vivo线上市场领域总经理　　

序　　二

得知悟空活动中台要出书的消息，我感到非常自豪。在“vivo 互联网技术”公众号开放之后，vivo团队首次向外界展示了自己的技术实力。本书是vivo对业界贡献的一点微薄之力，希望能给业界同行一些启发。

如今的悟空中台正在为公司各业务部门的营销活动提供强有力的支撑，获得了各业务部门的一致好评。回顾过去，我想与读者分享3个比较深的感悟。

首先，任何中台的诞生并非凭空而来，而是慢慢发展起来的，是一个从小到大的过程。一个系统开始出现的原因可能是技术团队想要追求更高的效率，然后提取出一些重复问题和业务场景，给出一个通用的解决方案，在验证方案的有效性之后，继续扩大方案的应用范围，终形成中台系统。这是一个成长和进化的过程，关键是要求技术人员对业务和技术有深刻的理解、敏锐的眼光，重要的是要有梦想和追求科技创新的精神。

其次，对于广大的工程师队伍来说，他们对技术的追求总是更高，相信技术是解决问题的途径。当产研团队面临较大的业务压力时，不应先考虑压缩需求、增加研发队伍的数量，而是要思考技术手段是否能更有效地帮助团队解决问题。这样的工程师在团队中占比越多，团队就更有可能做出超越常规的创新。

后，从管理的角度出发，打造工程师文化。在科技企业中，工程师文化意义重大。工程师文化的本质是重视工程师的价值，鼓励工程师用技术的力量来解决商业问题，为用户提供价值。在科技企业中，工程师群体是非常重要的创造性群体，只要有足够的探索空间，他们就能在技术上不断取得突破，从而为用户提供更高的产品价值。

在vivo内部，用户导向和设计驱动的核心价值观指导着产品开发的整个过程。所有的产品设计、研发都必须围绕用户需求，深刻认识用户需求本质，精心设计解决方案，通过技术创新为用户提供简单、完美、优雅的解决方案，通过科技创新让用户的生活更美好。

悟空中台是这两大核心价值观体现的完美典范：一方面给用户提供了各种丰富、有趣的活动，另一方面大大降低了内部运营开发团队开展营销活动的难度，提高了工作效率，这应是所有技术人员不懈追求的目标。

张　飞　　

vivo互联网内容分发事业部总经理　　

序　　三

多年前我从事互联网运营工作的时候，为了组织各类线上活动，要花费大量精力来跟进设计开发，因此特别希望有一种工具可以解决设计开发的效率问题，能让产品运营聚焦于目标达成。随着团队的不断尝试，大家开始立项建设“悟空”，以期能够提升互联网运营效率。

后来，随着vivo业务的发展，我们不仅面临手机APP的运营场景，还面临着广告投放、线下营销等众多业务场景。在这么多的场景变化下，我们认为不变的目标还是“拉新、促活、留存、转化”，因此团队开始创新性地在不同场景中抽象系统能力，建设中台来支撑业务目标的达成，这也促使了“悟空”的成长和进化。

本书完整地记录了技术团队如何解决具体的中台建设问题，揭秘“悟空”的诞生过程，希望每位读者都能从中获益。

关岩冰　　

vivo互联网产品平台部总经理

vivo 活动中台能够获得成功，是因为做到了4点：，将共性需求提炼为中台能力；第二，中台解决难度大、耗费资源多的难题；第三，中台团队以第三方的姿态去设计、推荐自己的服务；第四，每个业务单元以组织整体利益化为原则去选择自己的业务实现方案。从终结果来看，前三点证明了悟空活动中台开发运营团队的优秀，第四点证明vivo企业文化践行的优秀。

——徐耀铭  vivo线上市场领域总经理

“悟空”中台体现了vivo的用户导向和设计驱动这两大核心价值，一方面给用户提供了各种丰富、有趣的活动，另一方面大大降低了内部运营开发团队开展营销活动的难度，提高了工作效率，这应是所有技术人员都要不懈追求的目标。

——张飞  vivo互联网内容分发事业部总经理

vivo前端团队在研发悟空活动中台过程中，在多端可视化搭建方向上进行了卓有成效的探索，以uni-app跨端框架为基础，创造性地将微前端和多端概念结合起来，实现了可视化搭建动态多端小程序。本书详细复盘了vivo前端团队在多端可视化搭建过程中的探索与思考。如果你的团队同样面临可视化搭建问题，那么本书不容错过。

——崔红保  DCloud CTO 

vivo在活动中台建设方面的探索比较领先。本书全面地介绍了营销场景中H5落地页生产的中台方法，为创新技术与业务相结合实现价值化提供了范例。对于正在解决烟囱式H5活动开发问题的企业来说，本书的许多理念和方法都值得借鉴，推荐阅读。

——陆田  一叶智能CEO

本书是vivo中台团队在长期实践的基础上宝贵经验的总结。书中不仅对理论知识进行了解读，而且用了大量的案例进行说明，特别是自研的微前端设计与实现方案。前端开发人员可以参考本书的实战案例进行技能提升。

——纪龙  OPPO自营电商oneplus研发负责人