关于java:手淘双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，获取优先内推资格！