背景

近年来，各大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，获取优先内推资格！