手淘双11最新实践：PopLayer弹层领域业务研发模式升级

背景

近年来，各大APP内的弹层需求逐渐增多，以手机淘宝为例，平常的弹层上线频率为单端每个月50次左右，而在大促期间能够达到240次以上。在手淘内，各种弹层业务都会经过PopLayer中间件的能力进行管理。但业务每每会遇到开发弹层难、慢、稳定性差的种种困难。对比于往年业务研发成本较高的现状，PopLayer在今年提出了【低研发搭建模式】来解决这类问题，造成一套快速搭建+可视化+多端多场景通用的解决方案，在平常与大促期间获得了普遍应用：

• 研发效率升级：弹层业务的上线成本从3天+，下降到2小时左右
• 业务覆盖率高：双11大促期间的业务覆盖率达到75%
• 稳定性极佳：大促期间线上0故障

在各种APP都逐渐走向存量时代，精细化流量运营的今天，弹层做为一个能够随时随地产生内容并带来高流量的强运营手段，已经从低频需求，变成了面向各种人群触达的高频需求。做为业务支撑方向的中间件，如何为业务提效，将业务的关注重点从开发转向内容运营，助力其完成触达矩阵，成为了一件很是值得探索的事情。

（更多干货内容请搜索关注【淘系技术】公众号）

PopLayer

弹层，是一种强触达用户的交互形态。PopLayer的定义，则是一个能够在任何APP页面上，在指定时间内，对页面无侵入地弹出任何内容的弹层中间件。其业务定位，则为触达各领域用户的重要流量场。

为了便于理解，下面以手淘首页近期Pop为例，将手淘内的Pop业务分类举例介绍（本文中Pop即指弹层）：

1. 大促氛围打造

开售倒计时提醒

1. 加强用户体验

死亡恢复浏览飘条

1. 红包发放&提醒

星秀猫开奖

红包催用提醒飘条

1. 用户指引

能够看到，弹层业务的交互形态是灵活多变的，业务目标诉求也各有不一样。其背后有着各自业务层面的复杂诉求和增加目标。PopLayer为此提供了一套端侧弹层管理SDK+任务管理系统的总体解决方案。

PopLayer常规任务管理流程

注：PopLayer是以端侧中间件为核心进行建设的，其中每一个环节都有比较复杂的链路能够展开，本文不展开讨论端侧细节，主要讨论研发效率方面。

在这套流程中，对业务方负担最重的，也是研发耗时最重的，即是前端页面的研发以及服务端接口的研发。且各个业务的曝光预判接口不断累积，也带来了很是大的资源浪费与QPS压力。随着弹层业务逐年增多，这套模式的弊端愈来愈凸显：

• 研发效率低下。以平常期间观察，研发一个图文类型弹层，至少须要一个前端人员投入三天以上时间+一个后端人员投入三天以上时间+测试人员投入一天以上。
• 运营效率低下。运营策略每每受限于研发成本、资源调控、以及上线时间等等问题，而没法灵活展开与快速迭代。尤为在大促期间，不少快速决策的运营玩法没法及时且稳定地落地，丧失了关键时刻获取流量的机会。
• 研发质量难以保证。不一样于整页研发，弹层存在一些特殊须要注意的问题。而研发人员接入PopLayer的流程熟悉程度每每有限，很容易因缺少经验而产生线上异常，好比只有背景黑色遮罩弹出而内容加载失败（能够想想会是什么情况）
• 业务数据指标没有统一标准，没法造成客观统一的业务指标，没法经过数据快速定位问题，没法造成有效的数据沉淀与对比。
• 总体方案难以沉淀复用。

这样的研发成本，对于Pop这类每每须要快速响应的业务需求，是远远不能知足的。尤为在大促期间，对时效性要求很高，一个Pop从决策到上线，可能仅仅只有1-2个小时的响应时间，一旦错过期机对业务的流量损失是巨大的。

通过建设搭建模式，这套陈旧野生的研发流程终于获得了改变。现在，经过新模式，一个常规的单图Pop几分钟就能够完成搭建。业务方能够完全解放双手，集中精力在更加优质的内容编排与制做上。

PopLayer搭建模式对研发流程的影响

-

PopLayer搭建模式

Pop业务背景分析

通过长期与业务深刻合做，咱们发现弹层的需求每每有必定的规律可循。PopLayer领域下的业务特征大致以下：

• UI结构轻量：主要为底图+内部图文混合的UI结构，视觉复杂度有限
• 点击交互可枚举：跳转页面、关闭Pop、发送后端接口、切换内部子页面等
• 组件复用性低、总体复用性高：每一个Pop内部可复用的组件几乎不存在，更应该以一个完整的Pop做为一个模板进行维护和复用
• Pop特有逻辑较多，好比疲劳度规则、各种数据来源变量解析等

那么实现一套统一标准的搭建方案，从先后端等各个方面逐个击破，来承载业务的大部分高频需求，支持其快速、低研发迭代上线，便成了解决这类问题的首选方案。

得益于这套标准化的前端协议规则，咱们能够将PopLayer的触发范围，从APP站内触达，向其余流量场横向扩展，好比Android桌面、H5环境等，这部分后文将会展开讨论。

搭建模式架构

搭建模式方案框架图

咱们经过锁定 低研发搭建+多端多领域统一触达 的解决方案，支持运营与业务快速完成各种弹层小时级上线。其链路主要包括以下几个部分：

• 搭建
• 设计一套Pop业务域内的统一业务描述DSL，来描述Pop的所有UI架构、数据提取规则、交互逻辑等等内容。以其为核心，完成搭建与各端各领域的解耦
• 搭建IDE，提供友好的编辑界面、实时动态预览、真机预览等业务服务，最终产生标准DSL内容
• 解析
• 探索除APP站内以外的更多触达领域，包括Android桌面环境、H5环境
• 研发DSL运行时解析引擎，并完成统一体验的Pop渲染及交互
• 任务管理服务
• 提供一体化人群曝光预判
• 提供权益、AB与模板搭建的打包配置能力，无需业务方自建实验、自研权益对接
• 将单场景多Pop状况下的预判QPS压力，下降为单场景组合预判模式，有效下降服务端压力

搭建

搭建与DSL

DSL，即领域特定描述语言，是为了解决特定领域问题而造成的编程语言或规范语言。在Pop业务域下，咱们无需造成编程语言，甚至追求尽量低研发，因此这里的DSL即为一种Pop业务域范围内的规范描述语言。

Pop的DSL格式为经常使用的JSON格式。其总体结构为pages-UI动线、props-变量解析、requests-请求接口、env-环境全局配置。

下面咱们从交互动线结构、变量解析、事件结构、疲劳度几个方面分别介绍DSL描述的主要内容。

1. 交互动线与UI结构

交互动线

对应到DSL，咱们提供了多子页面+多版本的描述方案，即经过建立多个子页面+每一个子页面的多个版原本完成动线素材，并经过设置事件动做，完成动线串联。对应到DSL的结构，即经过pages+vers以树形结构分别描述各个子页面版本。其总体示例以下：

布局版型

Pop的布局版型是多种多样的，但基本可归类为以下几种：居中、四角挂角、四边贴边。DSL设计中，每个子页面均可以单独设置其布局版型。不一样的版型，会以不一样的布局逻辑计算其大小位置。

UI组件

Pop形态下的UI组件，基于围绕着以下几个类型展开：图片、文本、视频、容器、倒计时、点击热区等。即经过提供大图或视频为背景，并经过容器+内部组件造成内部复杂的界面布局。咱们针对各个组件提供了统一的布局配置+各自不一样的素材配置。以一个倒计时组件为例：

1. 变量数据提取与绑定

变量数据提取

Pop的内容与服务端数据作绑定时，须要提供一套提取数据的描述方案。而数据来源因Pop的总体链路设计，存在多个可能来源。咱们经过 指定数据来源+提供插入式Mtop接口配置+接口数据提取Function 完成数据提取的设置，造成一个变量。仍以上述Demo为例，其中红包金额的变量为服务端Mtop接口返回数据。其提取流程示例：

即经过预判MTOP接口数据源，经过JSONPath，并指定其数据位置完成提取。在某些较为复杂的状况下，有时数据来源须要多层解析（JSONPath+URLDecode+URLParse），那么也支持其设置串行多层解析。

变量绑定

解析结束的变量，即视为一种全局资源，其能够绑定到各类内容与其余数据上，哪里须要哪里搬。好比图片地址、文本内容、toast内容、跳转地址、MTOP请求参数等等。其实现方案为经常使用的字符串模板表达式${prop_name}，进行运行时替换。

1. 事件结构

大多状况下，Pop内的事件，即为用户点击事件，但随着业务复杂度的提高，例如视频播放结束、视频加载失败、倒计时结束等时机也须要响应事件，咱们便提供了统一的事件描述，方便挂载到各个组件事件配置上。而事件的类型。即为跳转场景、切换子页面、发送MTOP接口、关闭Pop等，咱们分别对这些事件提供了对应的封装描述。此处细节较多暂不展开。

1. 疲劳度

疲劳度是Pop的重要组成部分之一。疲劳度的设计分为疲劳度规则+疲劳度消耗规则。例如Pop须要用户天天曝光不设限，但点击后当天再也不弹出。那么其疲劳度规则为一天一次，而消耗规则即为点击时消耗。经过这样的实现方式，则能够很是灵活的实现各种疲劳度需求，作到想怎么弹就怎么弹。

在DSL的曝光、关闭、以及每一个事件结构中，均有疲劳度消耗规则，而疲劳度总体规则，则经过不一样的疲劳度表达式完成配置。

搭建IDE

IDE的核心功能，即为业务用户提供一个实时可视化、随时可真机预览的一站式搭建编辑器。其产出，则是产生一份描述业务完整需求的DSL内容。目前已为业务提供包括页面搭建、数据管理、曝光断定、疲劳度规则、降级策略、埋点配置等方面的搭建功能。

搭建IDE

解析

如方案框架图所示，搭建模式的目标不只仅是在APP站内完成Pop触达，还须要在Android桌面、站外H5这样的环境里完成一站式多端触达。咱们能够把目前涉及的几个流量域，称为触达领域。

APP站内的触发流程，即PopLayer端侧中间件，功能上有很是丰富的积累，可支撑几乎全部Pop业务的各方面诉求，此处不进行展开，本文将从弹出Pop后的解析引擎、Android桌面的触达领域支持方面进行介绍。

运行时解析引擎

针对不一样的触达环境，须要造成各自的运行时解析引擎，目前咱们完成了APP站内引擎：负责站内+Android桌面的解析渲染，以及H5站外引擎：负责H5环境下的解析渲染。这里咱们主要针对站内引擎进行介绍。

PreDisplay + Running

解析引擎的主体工做流程，分为PreDisplay阶段：获取DSL、获取各环境数据、解析变量、完成UI渲染并曝光，以及Running阶段：在曝光后的事件交互处理。

解析引擎工做流

在执行display以前，Pop为隐形状态，用户无感知。通过如上图的DSL解析、同步各种环境数据、变量解析、曝光断定、素材加载等流程后，经过display接口，完成最终曝光。

为了达到双端统一的渲染效果、高适配性、以及高性能渲染的要求，站内引擎的底层载体目前为Rax方案。基于Rax完善的工程化支持，咱们得以完成一系列上层方案，无需过分关注动态性、适配性等问题。

Android桌面弹层

对于手淘这样日活流量足够大的APP，其Android桌面的触达流量价值一样是巨大的。相比APP站内的Pop触达，其更加拥有包括增强唤端、二方流量交换这样的独特价值。在有规则规范的前提下，咱们能够经过端侧中间件建设，把Pop搭建的能力无差异的输出到桌面环境，使其成为Pop触达生态的一环。其具体的触达形态，则能够是顶部消息、挂角提醒等。其底层实现方案为Android悬浮窗。

桌面Pop的效果Demo以下：

桌面Pop方案框架

首先，咱们将桌面与站内进行了搭建能力对齐，使一个搭建产生的页面，便可以在手淘里弹出，也能够在桌面上弹出。为此咱们抹平了底层方案不一样带来的差别，包括：

• 搭建模式与站内一致，一样采用标准DSL+解析引擎完成渲染
• 经过控制Window添加次序来对齐层级管理
• 经过控制视窗大小位置，控制其可绘图区域；经过搭建输出可视区域位移量，对视窗内容进行位移还原窗口内容

另外，咱们提供了桌面环境的特殊处理：

• 增长了切换桌面触发时机（计划触发，适合计划常驻），并打通了ACCS消息触发时机（即时触发，适合消息类型）
• 增长了自由拖拽、边侧自动吸附功能

因为桌面环境的特殊性，应避免对用户造成严重的干扰。那么桌面触达的规则管理则十分重要。目前咱们设计了以下避免过分干扰的规则：

• 桌面环境的Pop必须有明确明显的关闭按钮
• 切换其余APP时，须要将Pop内容进行隐藏，对于Android高版本则进行倒计时后自动关闭设置
• 桌面的弹出管理底层与站内一致，采用分层分优先级管理，并对一次桌面切换的曝光次数进行上限设置

任务管理服务

从上述任务管理流程图能够看到，业务对于曝光预判、业务数据方面都是须要服务端的人力投入的。即除前端的研发成本问题，服务端一样面临相似的问题。咱们梳理业务目前痛点以下：

• 人力消耗大，大促时效性差
• 机器资源消耗大
• 全量配置下发+全量接口预判的模式，致使单活动机器资源消耗大；
• 单场景（好比手淘首页）下的Pop每每存在多个，活动之间筛选独立进行，致使机器消耗总量增加快（QPS总量随活动数线性增长且无上限）
• 稳定性风险高
• 临时开发的模式，加上人员开发质量层次不齐，稳定性很难保障。
• 业务须要本身投入精力维护稳定性，特别是每次大促的时候应对突发流量

为此咱们实现了对业务进行一站式托管。核心目标为：

• 实现权益、导流这两个业务领域的低研发极速上线
• 下降机器资源消耗，在线活动数量再也不受机器资源限制
• 托管业务整年0故障

经过拆解上文的任务管理流程图，能够看到服务端的工做主要包括曝光预判接口，以及页面内的业务数据接口。咱们针对两部分分别进行部分托管建设，架构图设计以下：

任务管理服务架构

• 针对曝光预判接口，咱们提供了单场景多活动的人群预判复用能力，即将人群圈选的预判模式统一集中管理，底层与奥格人群平台二方包打通，上层单场景仅透出一个整合接口。从过去每次切换页面触发N次预判接口，变为仅触发一次。业务也无需自研人群接口，仅需把人群包ID进行配置便可。
• 针对内容数据接口，咱们仍在建设中。计划经过底层打通了拉菲权益平台二方包，将权益类型（红包、优惠券等）直接整合进搭建体系中，业务无需进行复杂的权益能力对接，仅需提供权益ID配置便可。

总体效果

除文章开头提到双十一期间的业务覆盖率已经达到75%以外，得益于搭建模式对研发效率的提高，今年双十一期间，手淘内Pop的业务量和总体流量也有了大幅度飞跃：

除此以外，今年咱们快速稳定地响应了大促期间的所有紧急需求，避免出现过去几年因封网、研发效率等问题带来的没法上线Pop的状况。

写在最后

PopLayer目前除手淘外，已经服务了集团众多APP，包括天猫、淘宝特价版、闲鱼、淘宝直播、饿了么、Lazada、零售通、AE等等。后续也将继续以手淘为核心，服务更多的集团业务。

经过双十一大促期间以及平常的业务覆盖率，咱们印证了搭建模式对业务的价值。站在业务的角度思考，Pop这类“既轻量又复杂”的业务域，通过一番深挖的底层支持，能够大幅度破除业务的桎梏，让其解放双手，去快速经过“提出idea-搭建-AB-看数据-再次迭代”的模式获得最佳的业务结果。这套业务研发模式的优化，从思考如何研发变为如何尽量封装研发，对于相对轻量级的业务域来讲也是有输出价值的。

后续，咱们一方面将会继续完善相关建设，将AB、标签+推荐系统、引擎加载页面性能优化等等进行深度挖掘，从研发效率提高，升级到业务价值提高；另外一方面也会将Pop的建设经验沉淀成流量域方法论的一部分，输出到其余流量域中，为业务探索与构建更有价值的流量增加矩阵。

手淘平台技术

咱们背靠淘系基础架构和厂商，既有立足5G适配、网络加速、图片体验、网关调用、大内容上传下载等核心技术支撑业务体验升级和改造，

又为用户增加提供消息推送、浮层搭建、厂商触达、外链拉端等流量端能力，并沉淀一系列如最小核、全链路数据等架构能力，为手淘及产品升级提供平台支撑，并成为集团移动端基础设施。

职位：Android研发工程师、iOS研发工程师

感兴趣的同窗可将简历发送到：yangqing.yq@alibaba-inc.com，获取优先内推资格！