刘慧敏—京东购物小程序工程化之路

2020-03-01 339浏览

  • 1.京东购物⼩小程序⼯工程化之路路 刘慧敏 京东凹凸实验室 高级工程师
  • 2.在此键入姓名 在此键入tittle
  • 3.在此键入姓名 在此键入tittle
  • 4.刘慧敏敏 京东凹凸实验室 前端⾼高级⼯工程师，于 2014 年年加⼊入京东， ⽬目前负责京东购物⼩小程序项⽬目的研发与管理理。 曾就职于腾讯，参与过 QQ 空间核⼼心产品的研发。
  • 5.⽬目录 1. ⼯工程化的召唤 2. 模块化之路路 3. Node.js 数据层 4. 持续集成系统 5. 监控与告警 6. 总结与展望
  • 6.⼯工程化的召唤
  • 7.早期版本 THANKS！ 1 个前端⼩小团队 THANKS！ 1 个⽉月封闭开发 1 周 1 个版本 January 9, 2017
  • 8.开发模式 THANKS！ THANKS！ + 样式编译 代码压缩
  • 9.团队协作 THANKS！ THANKS！ 通过规范约束 Git 分⽀支规范 接⼝口规范 Git 提交信息规范 数据上报规范 代码规范 组件使⽤用规范 版本发布规范 ⾃自测规范 ⽤用户体验规范 ...
  • 10.当前版本 THANKS！ 4 个前端团队 THANKS！ 需求快速迭代 1 周 2 ~ 3 个版本
  • 11.痛点与挑战 • THANKS！ THANKS！ 存在冗余代码，影响代码包⼤大⼩小
  • 12.痛点与挑战 THANKS！ THANKS！ 存在冗余代码，影响代码包⼤大⼩小 • • 多个⼩小程序间代码⽆无法复⽤用
  • 13.痛点与挑战 THANKS！ • THANKS！ 多个⼩小程序间代码⽆无法复⽤用 存在冗余代码，影响代码包⼤大⼩小 • • 功能越发复杂，⻚页⾯面性能下降
  • 14.痛点与挑战 • • • • THANKS！ THANKS！ 多个⼩小程序间代码⽆无法复⽤用 存在冗余代码，影响代码包⼤大⼩小 功能越发复杂，⻚页⾯面性能下降 H5 版本需另⾏行行开发，浪费⼈人⼒力力
  • 15.痛点与挑战 • • • • • 存在冗余代码，影响代码包⼤大⼩小 THANKS！ THANKS！ 功能越发复杂，⻚页⾯面性能下降 多个⼩小程序间代码⽆无法复⽤用 H5 版本需另⾏行行开发，浪费⼈人⼒力力 发布流程过于繁琐，效率低下
  • 16.痛点与挑战 • • • • • • 存在冗余代码，影响代码包⼤大⼩小 THANKS！ THANKS！ 功能越发复杂，⻚页⾯面性能下降 多个⼩小程序间代码⽆无法复⽤用 H5 版本需另⾏行行开发，浪费⼈人⼒力力 发布流程过于繁琐，效率低下 缺少⾃自动化测试，版本质量量⽆无法保证
  • 17.痛点与挑战 • • • • • • • 存在冗余代码，影响代码包⼤大⼩小 多个⼩小程序间代码⽆无法复⽤用 THANKS！ THANKS！ H5 版本需另⾏行行开发，浪费⼈人⼒力力 功能越发复杂，⻚页⾯面性能下降 发布流程过于繁琐，效率低下 缺少⾃自动化测试，版本质量量⽆无法保证 ⽆无法有效追踪线上版本的问题
  • 18.模块化之路路
  • 19.模块化改造 对近 100 个公共模块改造为 ES6 Module 并发布⾄至私有 NPM 仓库 THANKS！ THANKS！ const cookie = require('path/to/cookie') import { getCookie } from '@legos/cookie'
  • 20.Legos 系统 Cli ⼯工具 ⻚页⾯面管理理 包管理理 THANKS！ THANKS！ ⽂文档管理理
  • 21.主包 THANKS！ THANKS！ 分包 分包
  • 22.( 45kb ) THANKS！ THANKS！ ( 主包⻚页⾯面 ) ( 分包⻚页⾯面 ) ( 10kb )
  • 23.包⼤大⼩小精减 15% 28% 将未使⽤用到的模块进⾏行行剔除 整包⼤大⼩小减少约 15% 将主包未使⽤用到的模块挪⾄至分包中 主包⼤大⼩小减少约 28% THANKS！ THANKS！
  • 24.⾃自由组合打包 ⽀支持提取任意指定的⻚页⾯面集，⽣生成代码包或插件， 提升代码复⽤用性 THANKS！ THANKS！ // 基础购物流程（商详 + 购物⻋车 + 结算 + 订单） legos build --pages item cart pay order index cate cart my order search item shop pay ...
  • 25.⻚页⾯面抽离调试 开发调试阶段，对单个⻚页⾯面进⾏行行抽离， 编译速度平均提升 3 倍以上 THANKS！ THANKS！ // 仅调试商品详情⻚页 legos dev --pages item
  • 26.多端⽀支持 根据 target 参数和⽂文件命名⾃自动加载不不同端的⽂文件 THANKS！ THANKS！ @legos/cookie index.js index.weapp.js // 编译 H5 版本 index.h5.js legos build --target h5 index.rn.js
  • 27.Node.js 数据层
  • 28.项⽬目演变 THANKS！ THANKS！ 1 优惠券接⼝口
  • 29.项⽬目演变 THANKS！ THANKS！ 1 搜索暗⽂文接⼝口 热搜词接⼝口 1 2 轮播⼴广告接⼝口 3 频道⼊入⼝口接⼝口 4 BI 频道接⼝口 5 通栏⼴广告接⼝口 6 秒杀商品接⼝口 7 8 9 拼购商品接⼝口 实时价格接⼝口
  • 30.带来的问题 THANKS！ THANKS！ 代码包体积变⼤大
  • 31.带来的问题 THANKS！ THANKS！ 代码包体积变⼤大 ⻚页⾯面打开速度变慢
  • 32.带来的问题 THANKS！ THANKS！ 代码包体积变⼤大 ⻚页⾯面打开速度变慢 前端逻辑过于复杂
  • 33.带来的问题 THANKS！ THANKS！ 代码包体积变⼤大 ⻚页⾯面打开速度变慢 前端逻辑过于复杂 必须发版修复问题
  • 34.接⼝口聚合 接⼝口 A THANKS！ THANKS！ 前端 ⻚页⾯面 聚合接⼝口 聚合 ⽹网关 接⼝口 B 接⼝口 C 接⼝口 D ... 后台 服务
  • 35.Hawaii ⽅方案 RDS 请求描述⽂文件 THANKS！ THANKS！ Cli ⼯工具编译、提交 Hawaii 管理理端查看、发布 ⼀一套基于 Node.js 实现的⽀支持复杂关系接⼝口依赖的 数据聚合解决⽅方案
  • 36.RDS 请求描述⽂文件 字段名 类型 含义 字段名 类型 含义 configRequest Array Object 前置的依赖请求 url String 接⼝口地址 params Object 参数 beforeRequest Function 请求参数处理理 afterResponse Function 返回数据处理理 request Array Object 请求列列表 modules THANKS！ THANKS！ Array 模块列列表 字段名 类型 含义 moduleId String 模块ID request Array Object 请求列列表 afterResponse Function 返回数据处理理 嵌套定义⼦子请求
  • 37.请求示例例 c.cgi THANKS！ THANKS！ a.cgi config.json d.cgi b.cgi config.json
  • 38.c.cgi a.cgi config.json d.cgi b.cgi config.json
  • 39.
  • 40.
  • 41.数据结果 THANKS！ THANKS！
  • 42.其他能⼒力力 数据⾃自动上报 接⼝口 A THANKS！ THANKS！ 前端 ⻚页⾯面 聚合接⼝口 Hawaii ⽹网关 接⼝口 B 接⼝口 C 接⼝口C 容灾⽂文件 CDN 后台 服务
  • 43.THANKS！ ⻚页⾯面呈现速度提升 THANKS！
  • 44.THANKS！ THANKS！ 精减前端代码逻辑与体积 ⻚页⾯面呈现速度提升
  • 45.⻚页⾯面呈现速度提升 THANKS！ 精减前端代码逻辑与体积 THANKS！ 服务⼀一键部署
  • 46.⻚页⾯面呈现速度提升 THANKS！ THANKS！ 服务⼀一键部署 精减前端代码逻辑与体积 线上问题快速修复
  • 47.⻚页⾯面呈现速度提升 精减前端代码逻辑与体积 THANKS！ 服务⼀一键部署 THANKS！ 线上问题快速修复 接⼝口数据智能容灾
  • 48.⻚页⾯面呈现速度提升 精减前端代码逻辑与体积 THANKS！ THANKS！ 线上问题快速修复 服务⼀一键部署 接⼝口数据智能容灾 多维度数据监控
  • 49.持续集成系统
  • 50.Git 分⽀支规范 Tag 1.0.0 Tag 1.0.1 THANKS！ THANKS！ master feature_a feature_b release_1.1.0 Tag 1.1.0
  • 51.版本流程 流程繁琐、⼿手⼯工操作过多、周期⻓长、发现问题不不及时 开发阶段 新建 Feature 分⽀支 开发 ⾃自测 转测试 THANKS！ THANKS！ 测试阶段 合版阶段 发布阶段 ⼿手⼯工测试 代码 Diff 建⽴立 Release 分⽀支 合并代码 解决代码冲突 打体验包 整体测试 提交版本审核 发布版本 更更新 Master 代码 更更新 Changelog 打 Git Tag
  • 52.优化思路路 THANKS！ THANKS！ 1. 将必要的流程固化⾄至线上系统上进⾏行行
  • 53.优化思路路 THANKS！ 1. 将必要的流程固化⾄至线上系统上进⾏行行 THANKS！ 2. 使⽤用 API 代替 Git ⼿手⼯工操作
  • 54.优化思路路 THANKS！ THANKS！ 2. 使⽤用 API 代替 Git ⼿手⼯工操作 1. 将必要的流程固化⾄至线上系统上进⾏行行 3. 持续进⾏行行合版，提早暴暴露露问题
  • 55.优化思路路 1. 将必要的流程固化⾄至线上系统上进⾏行行 3. 持续进⾏行行合版，提早暴暴露露问题 4. 引⼊入⾃自动化测试 THANKS！ API 代替 Git ⼿手⼯工操作 2. 使⽤用 THANKS！
  • 56.优化思路路 1. 将必要的流程固化⾄至线上系统上进⾏行行 THANKS！ THANKS！ 3. 持续进⾏行行合版，提早暴暴露露问题 2. 使⽤用 API 代替 Git ⼿手⼯工操作 4. 引⼊入⾃自动化测试 5. 使⽤用⼩小程序官⽅方 Cli ⼯工具进⾏行行预览和上传
  • 57.持续集成系统 包含特性录⼊入、发布计划管理理、代码构建、Git 操作等多项功能 THANKS！ THANKS！
  • 58.THANKS！ THANKS！ 特定步骤 定时任务
  • 59.特定步骤 定时任务 THANKS！ THANKS！ Init Clone NPM Build Test Preview Finish Upload Exception
  • 60.特定步骤 Init Clone 定时任务 THANKS！ THANKS！ NPM Main Queue Build Test Preview Queue Finish Preview Upload Exception Upload Queue
  • 61.简化后的流程 开发 THANKS！ THANKS！ 录⼊入特性分⽀支 开发 提交测试 解决代码冲突
  • 62.简化后的流程 开发 测试 录⼊入特性分⽀支 ⼿手⼯工测试 开发 运⾏行行⾃自动化⽤用例例 提交测试 代码 Diff THANKS！ THANKS！ 解决代码冲突
  • 63.简化后的流程 开发 录⼊入特性分⽀支 开发 提交测试 解决代码冲突 测试 PM ⼿手⼯工测试 创建发布计划 运⾏行行⾃自动化⽤用例例 关联特性分⽀支 代码 Diff 提审发布 THANKS！ THANKS！
  • 64.解决代码冲突 借助 Merge Request 实现线上⾼高效解决代码冲突 THANKS！ THANKS！
  • 65.代码冲突最⼩小化 feature_c THANKS！ THANKS！ feature_b feature_a release_1.1.0
  • 66.代码冲突最⼩小化 feature_c feature_b feature_a release_1.1.0 THANKS！ THANKS！
  • 67.⾃自动化测试沙盒 通过模拟微信⼩小程序运⾏行行环境和基础库 API， 将⼩小程序的运⾏行行和测试脱离微信环境，从⽽而⽅方 便便地对其进⾏行行⾃自动化测试。最后通过拦截 setData 接⼝口及判断当前⻚页⾯面路路由，对⼩小程序 运⾏行行结果进⾏行行校验 THANKS！ THANKS！
  • 68.沙盒的框架结构 THANKS！ THANKS！ （ sandbox-cases ) 测试⽤用层
  • 69.沙盒的框架结构 THANKS！ THANKS！ （ sandbox-cases ) 测试⽤用层 调⽤用 （ sandbox/wx-app.js ) 提供异步控制接⼝口 ⽤用例例步骤控制层（step、wait、check…）
  • 70.沙盒的框架结构 （ sandbox-cases ) 测试⽤用层 THANKS！ THANKS！ 调⽤用 （ sandbox/wx-app.js ) ⽤用例例步骤控制层（step、wait、check…） 调⽤用 （ sandbox/wx-vm.js ) 提供异步控制接⼝口 提供⼩小程序 Runtime ⼩小程序运⾏行行时 VM（注册⻚页⾯面、⽣生命周期、AppData…）
  • 71.沙盒的框架结构 （ sandbox-cases ) 测试⽤用层 调⽤用 提供异步控制接⼝口 THANKS！ THANKS！ （ sandbox/wx-app.js ) ⽤用例例步骤控制层（step、wait、check…） 调⽤用 （ sandbox/wx-vm.js ) （ sandbox/wx-api.js ) 提供⼩小程序 Runtime ⼩小程序运⾏行行时 VM（注册⻚页⾯面、⽣生命周期、AppData…） 微信 API 模拟（⽹网络请求、开放接⼝口、数据存储、导航、设备…）
  • 72.测试⽤用例例 THANKS！ THANKS！
  • 73.测试结果 THANKS！ THANKS！
  • 74.监控与告警
  • 75.数据上报 脚本错误 全局 app onError，上报平台、微信版本、 基础库版本、错误堆栈 接⼝口数据异常 JS Error THANKS！ THANKS！ 统⼀一的 request 组件，上报错误码、 错误信息、请求类型 ⻚页⾯面测速 统⼀一的⻚页⾯面基类，上报测速点耗时、平台、⽹网络类型 及 referer、cookie、UA、IP 等信息 Speed Data Response
  • 76.JS 获取脚本错误 Data 获知接⼝口问题及业务变动 THANKS！ THANKS！ Speed 了了解⻚页⾯面性能
  • 77.实时告警的重要性 • THANKS！ THANKS！ 当⼩小程序发版后出现脚本错误
  • 78.实时告警的重要性 THANKS！ THANKS！ • 当⼩小程序发版后出现脚本错误 • 当后台接⼝口出现异常时
  • 79.实时告警的重要性 • THANKS！ THANKS！ 当后台接⼝口出现异常时 • 当订单量量突然下跌时 • 当⼩小程序发版后出现脚本错误
  • 80.实时告警的重要性 THANKS！ THANKS！ • 当后台接⼝口出现异常时 • 当⼩小程序发版后出现脚本错误 • 当订单量量突然下跌时 • 当突然出现恶意刷单时
  • 81.实时告警的重要性 • 当⼩小程序发版后出现脚本错误 • 当后台接⼝口出现异常时 • 当突然出现恶意刷单时 • 当⼴广告点击量量下跌时 THANKS！ THANKS！ • 当订单量量突然下跌时
  • 82.实时告警的重要性 • 当⼩小程序发版后出现脚本错误 THANKS！ THANKS！ • 当订单量量突然下跌时 • 当后台接⼝口出现异常时 • 当突然出现恶意刷单时 • 当⼴广告点击量量下跌时 • ...
  • 83.红绿灯系统 灵活的配置规则 THANKS！ THANKS！ 可⽤用率 调⽤用次数 调⽤用次数 n 分钟环⽐比 调⽤用次数 n ⽇日同⽐比 发⽣生次数
  • 84.红绿灯系统 灵活的配置规则 直观的告警形式 THANKS！ THANKS！ 可⽤用率 系统正常 调⽤用次数 系统异常 调⽤用次数 n 分钟环⽐比 严重异常 调⽤用次数 n ⽇日同⽐比 告警关闭 发⽣生次数
  • 85.红绿灯系统 灵活的配置规则 可⽤用率 直观的告警形式 THANKS！ THANKS！ 多样的通知⽅方式 系统正常 全局监控视图 系统异常 微信企业号消息 调⽤用次数 n 分钟环⽐比 严重异常 咚咚消息 调⽤用次数 n ⽇日同⽐比 告警关闭 ⼿手机短信 调⽤用次数 发⽣生次数
  • 86.告警示例例 ⻩黄灯规则：接⼝口调⽤用次数 > 300 & 可⽤用率 < 95% & 连续发⽣生 3 次 红灯规则：接⼝口调⽤用次数 > 500 & 可⽤用率 < 80% & 连续发⽣生 3 次 THANKS！ THANKS！
  • 87.告警通知 全局监控视图 + 多种通知⽅方式 THANKS！ THANKS！
  • 88.总结与展望
  • 89.在此键入姓名 在此键入tittle
  • 90.在此键入姓名 在此键入tittle
  • 91.THANKS THANKS！ THANKS！