凹凸技术揭秘：618 大促解析

导语

2021 年 618 已经圆满下线，平台下单金额创新高，达到了 3056 亿。做为大促线的主要前端承接团队，今年负责了 16 个会场的开发。本文将从会场创新功能、技术框架以及协做方式这三方面来揭秘，如何在短期内开发完 2021 年多会场、高要求的 618 大促，化解秃头危机。

不同的 618

1. Taro3 应用：拉通 H5 和小程序

近几年小程序因为在用户触达、用户留存方面的优点愈来愈受重视，团队也接触过须要在小程序中开发的会场（非 H5 形式），而 Taro 的优点正是用同一套代码打包出多端运行的程序，这符合咱们对小程序开发的需求。考虑到往后的业务渠道，咱们在 2021 年 Q1 完成了 Taro3 技术栈在会场的落地。在这个过程当中，咱们遇到了 2 个白屏问题：安卓低版本浏览器白屏以及主购小程序白屏。

• 安卓低版本浏览器白屏

产生这个现象，通常是因为低版本浏览器对高阶语法的兼容性不够致使的，在将页面不断简化后发现普通一个空白项目也会白屏。最终将问题肯定在 Web Components 的使用上。因为目前会场主要渠道为 H5 形式，在和 Taro 开发团队反馈讨论后，针对 H5 的应用，把 Web Components 实现的基础组件，替换为 React 组件；在小程序中不作修改。Dom 节点以下图所示：

目前最新版本 Taro 已经同步该功能，使用者不须要特殊处理。一套项目代码，解决 H5 页面开发和小程序开发，节省一倍开发量。

• 京东购物小程序对H5连接hash路由的特殊处理致使白屏

Taro3 打包 H5 时会添加默认 hash 路由，在通天塔（活动发布平台）发布活动时没法使用 history 路由，同时京东购物小程序和京喜小程序在 WebView 处理连接时会添加一些参数以及 hash 参数，从而致使小程序中 H5 页面路径错乱。解决方案有三个：

1. 和小程序提需开白名单
2. 修改H5的连接地址增长“omitH5Params”
3. 更改Taro3路由设置

因为大促会场个数多达 16 个，采用方案 1 和方案 2 须要统计各个会场以及渠道的连接，风险很大。所以和 Taro 开发团队讨论，最终实现了方案 3 的效果，新增路由配置钩子，针对 H5 进行单独的路由设置，经过通天塔默认的连接便可在小程序中访问会场。减小了开发和运营维护成本。

最终项目关键配置以下：

router: {
      forcePath : '/',
      customRoutes: {
        [`/pages/${process.env.TASK_DIR_NAME}/index`]: '/'
      }
    }
复制代码

2. 容灾服务：用户体验的保障

大促会场在线时长 1 个月左右，访问 PV 上亿，对页面安全性要求很是高。对于数据异常状况，前端处理的方式有两种：

• 请求异常时跳转简单版通天塔页面
• 监控请求，异常时采用内置数据兜底

从用户体验上考虑，两个方案各有优缺点。方案一优势在于能展现实时的商品、广告组信息，缺点为页面结构和预期不一样，缺乏交互引导；方案二优势在于和正常时页面结构一致，缺点在于数据为固化，不能及时跟进运营策略调整。为此咱们对容灾进行了总体流程设计：

今年咱们采用了兼顾方案1、二的新版容灾服务，由客户端（各会场）各自配置监控的接口（一般是首屏数据拉取接口），以及备份数据的间隔时间（通用为 1 小时），由服务器来进行去个性化数据的请求备份至 OSS 服务器，从而实现如下效果：

• 不存在页面跳转，保证用户体验符合预期；
• 跟随运营策略动态更新，兜底数据间隔 1 小时（可配置）备份一次。

在 618 专场期、高潮期，咱们统计了容灾服务的曝光，以下图所示（数据敏感性暂不提供具体值）：

3. 智能 UI：有效提高转化率

随着精细化运营策略的深刻，以及智能化应用的普及度，会场中商品 BI 已经不能知足用户诉求。今年加入了“智能 UI”的概念。根据构建用户设计画像，一样的商品信息/会场入口，经过前端呈现不一样设计风格的样式。如上图所示。

针对前端来讲，需求能够简化为：页面加载时，经过请求后端接口下发的用户设计画像，决定商品/店铺的 UI 样式。

• 功能实现

  做为典型的 SPA 项目，页面会在加载完 index.html 和主脚本后才会开始请求页面数据并由 js 渲染出来，以下图所示：

  为了防止页面二次渲染，咱们能够在请求页面数据的同时并行请求智能 UI 接口，以下图所示：

• 实现效果

  以主会场底部 feeds 以及店铺入口为例，实际页面效果以下：

  从交互同窗对活动复盘的数据来看，智能 UI 策略对楼层的点击率、转化率都获得了有效验证。

4. 下拉刷新：页面刷新的另外一种方式

在京东购物 app 首页，经过下拉操做能够触发页面刷新，甚至在于某些特殊日子（好比 618 大促），下拉能够触发 xView 来投放会场入口，因而可知用户已经被培养出下拉操做的习惯。可是在会场中，若是须要更新页面数据（好比秒杀商品），只能返回上级页面从新打开。

因为大促会场是经过 WebView 来呈现的，在和负责团队沟通后，2021 年 618 第一次在会场中上线了“下拉刷新”功能。

• 功能实现

  首先咱们须要经过导航栏统一配置协议设置 WebView 支持下拉刷新，同时设置在下拉刷新开始时调用的函数名，最后咱们只须要在回调函数中写下咱们页面刷新逻辑便可。

• 实现效果

5. VR 转盘：酷炫的 Z 世代

对于崇尚个性，拒绝跟风，对于新鲜事物都有较强的猎奇以及尝试心态的 Z 世代人群，大牌制燥厂从运营策略、设计风格到动效呈现上都作出了相应的调整。VR 转盘就是一个典型案例。

咱们先来看一张视觉设计时的对照图，能够看到你们对于实现精准性的要求是至关高的：

• 功能实现

轮盘的处理主要考虑到三部分：初始化、转动过程当中、中止转动。

• 初始化：处理圆形绘图（每一个卡片高度设置、居中，以及旋转角度），设置各状态初始值，包括圆心坐标、触摸起点坐标、转动前角度、转动状态、锁等。
• 转动中：
  • 触摸时：记录当前轮盘角度以及开始坐标、释放锁
  • 滑动过程时：判断是否横向滑动，设置状态，计算滑动角度以及当前item索引，轮盘动画处理。
  • 中止转动时：判断当前操做是否足以转动（以1/2个卡片角度为标准），释放锁，设置转动状态，触发轮盘回调。

• 实现效果

小结

2021 年 618 中还有不少新颖的交互形式（好比全渠道的 AB 页、Z 世代的词条选择等等）、和往年大促相比取得更高点击、转化率的模块（好比：百亿购物金系列、事业部楼层优化等）。能够参考设计同窗整理的战报。

精彩交互展现：

开发揭秘

1. 技术框架

从加入京东来以来，经历了最初的 gulp + ejs、再到后来的 Webpack + Vue/React、 如今的 Taro3，咱们迭代的最终的目标有如下 4 个：

• 更极致的性能
• 更快的开发效率
• 更低的维护成本
• 稳定的复用和迭代

首先经过底层基础配置和 EUI 组件库的支持，接着在中间层封装经常使用的工具库，配合不一样业务模块之间的组合，最终完成会场的开发工做；而这一系列分工、组合的基础，离不开良好的团队规范的实施；在完成本职的前端工做以外，团队也会思考未来的技术方向（智能化）以及更好的用户体验（容灾）。具体以下图所示：

2. 高效的协做方式

开发周期短且工做量大的项目必然会遇到团队协做的场景，目前咱们常常处理 3 类状况：

• 多人协做同一页面，好比大牌制燥厂和场景页
• 多人协做同会场不一样时期页面，好比主会场4个时期
• 同一组件在不一样会场中的复用，好比百亿购物金在大促会场的贯通

所以，高效的协做方式、合理的分支组织、科学的版本迭代变得尤其重要。

• 代码分支规范

开发项目时基于产品需求来作代码分支管理，原则上一个分支对应一个需求。项目在开发周期存在一个开发分支dev，全部的功能分支都基于开发分支dev来建立，并以feature-xxx的形式来命名 。

当功能模块开发完成后，再将该功能分支合并到开发分支dev

若是分支dev在合并了某个功能分支以后出现了问题，咱们也能够很快的回退到合并分以前的节点，甚至检出问题分支，从而确保开发分支的可靠性和易维护性

• 公共模块维护

公共模块的管理一直是开发中须要重点思考的问题。公共模块能够分为如下两类：

• 技术层面的公共模块

对于技术层面的公共模块，如请求库、组件库、工具类等，能够集成在脚手架里，项目初始化的时候经过npm的形式来引入。对于同一项目不一样分期的公共代码，

好比预加载模块、容错组件、底部导航等，一般来讲能够建一个文件夹，好比common，用于存放。

• 业务层面的公共模块

对于业务层面的公共模块，可能会随着开发周期而累积，所以没法像工具类等模块提早集成在脚手架里。好比今年的 618 活动，不少会场都包含了红包雨、倒计时等功能，这些功能在不一样会场之间的表现是大同小异的，所以能够共用同一套代码便可。

在不一样项目中引入公共代码，通常有npm、git submodule、git subtree等方式。它们各有优缺点，好比npm更侧重于包的依赖管理，可是没法作到双向同步，这就意味着须要有专人去维护这个包，假如我在当前的项目中开发了一个组件，这个组件在别的项目中也可能须要用到，可是我却没法将其提高到npm包里边，而须要相应的人去作这个事情。又好比git submodule，它的特色是容许在一个项目仓库中嵌入另外一个子仓库，可是所嵌入的子仓库是基于某个commitID，若是其余开发者在操做子仓库时没有按照相应的规范，致使本来的commitID发生变化，则有可能对全部引入了该子仓库的项目形成影响。

公共模块管理方式对比

方式	优势	缺点
npm	方便引入，可在多项目中使用	没法双向同步，须要专人维护、专人发包
git submodule	以子仓库引入，目录清晰	基于 commitID，commitID 发生变化可能致使子仓库变化
git subtree	以子仓库引入，目录清晰	子仓库的更新与推送指令相对复杂

git subtree相对来讲更符合咱们的需求，它像git submodule同样容许咱们在当前项目中引入子项目，这个子项目就像其余的普通目录同样直观，若是发生新增公共模块或修改功能模块等变动，只须要像维护其余仓库同样去维护子项目对应的仓库，再回到当前项目中去同步子项目代码便可。

• 项目版本迭代

因为 618 的活动持续时间较长，同一个活动项目可能会分为预热期、专场期、高潮期等不一样分期，每一个分期都有相应的变化，好比新增楼层、新增功能等。若是把预热期的功能发到了高潮期，或则把高潮期的配置弄成了专场期，则可能致使灾难性的问题。

通常来讲能够经过分支来管理不一样分期的代码，但这要求开发者要有较强的分支管理能力，并及时同步代码更新。即使如此，若是发布项目时切错了分支，仍会形成严重的事故。

为了不上述状况，咱们采起了如下措施：

• 不一样分期对应不一样入口文件
• 不一样分期特有功能/楼层存放在分期命名目录下
• 不一样分期配置不一样的发布指令

以京东金榜活动为例，京东金榜活动在整个 618 活动期间分为了专场期和高潮期，咱们在项目中分别用s1和s2目录来对应专场期和高潮期的入口:

其中，高潮期的签到楼层和竞速楼层与专场期不一样，所以将这两个楼层放在s2文件目录下：

而后经过配置分期对应的活动信息：

经过执行命令yarn deploy -- name=dist stage=1和yarn deploy -- name=dist stage=2来区分相应分期的打包部署操做。

使用以上方式可确保每一个分期对应指定的入口文件和指定的运行命令，尽量的避免了迭代出错的状况。

小结

大促会场的开发，意味着短期内大量会场（们）的开发上线，同时大促在线时间长，运营策略必定会动态调整，计划内的工做量以外，还须要考虑变动的人力预留以及成本。所以一个适合快速迭代、高效开发的技术框架，以及高效的协做方式，是支持咱们完成任务的基础。

结语

每年的 618 活动对咱们来讲都是巨大的挑战，高效的开发模式、优雅的协同方式、可靠的容灾方案是咱们始终追求的目标，咱们也会针对每一次活动的变化不断去精进技术。咱们相信只有足够的技术储备才能为京东 618 保驾护航，才能成为京东 618 业绩不断创新高的基石。

以上是咱们研发团队对 618 活动的开发方式和细节考量，但愿能抛砖引玉，共同成长。