沈礼 蚂蚁金服 蚂蚁亿级金融业务的前端实践

QCon大会

2018/10/20 发布于 技术 分类

文字内容
1. 蚂蚁亿级⽤用户⾦金金融业务的前端实践 沈沈礼(皓默) 蚂蚁⾦金金服前端技术专家
2. 在此键⼊入姓名 在此键⼊入Tittle
3. ⾃自我介绍 • 沈沈礼(皓默) • ⽹网络id:ishenli • 13年年 —百度 — 搜索业务 • 15年年— 蚂蚁⾦金金服 — 花呗、借呗等
4. • 蚂蚁⾦金金融业务特点 • 前端架构 • 多端(h5 + pc + ⼩小程序) • BFF(Backend for Frontend) • 质量量稳定
5. ⾦金金融业务特点 ▸ 移动端场景优先 ▸ 后端模型稳定,前端展现灵活 ▸ 稳定性要求⾼高
6. 前端架构
7. 客户端: ⽀支付宝 服务端: web⻚页⾯面 解耦 客户端:⽀支付宝 node web 服务端: 服务接⼝口 多端 客户端:⽀支付宝、淘宝、天猫 node bff 服务端: 服务接⼝口 2015 zepto hybrid app java web 2016 react hybrid app node web java service 2017 react + 多客户端 hybrid app node bff java service
8. 渠道 移动优先 后端稳定 前端灵活 后端 h5 mobile、pc web、native ⼩小程序 React/Vue Redux/dva 容器器适配 Node BFF-⽤用户体验适配层 egg.js 蚂蚁Node中间件 运维 研发 平台 平台 java service java service java service 质量量稳定 ⼯工程体系
9. 多端现状 离线包/⼩小程序 (压缩⽂文件) 源码 云端构建 在线⻚页⾯面 (CDN) 应⽤用 中⼼心 部署 离线访问 在线访问 客户端
10. 离线H5 资源加速 性能提升 请求静态资源 本地配置 ⽂文件 查 询 拦 截 规 则 拦截请求 版本规则判断 业务资源 公共资源 离线包⽂文件 有 检查本 地资源 下载 解压 解密 没有 容器器 离线包管理理 中⼼心 线上资源 CDN
11. ⼩小程序 VS 离线H5 webview渲染优化 精简运⾏行行环境 保活机制 UC内核 • 框架代码统⼀一管理理 • 缓存为字节码 • 减少业务包⼤大⼩小 • h5组件转native • 后台运⾏行行5分钟 • 再次访问秒开 JSCore • 逻辑处理理 • 绑定⻚页⾯面 • ⻚页⾯面只需负责渲染
12. 多端差异 通信协议 登录模式 部署形态 版本更更新 H5 HTTP / TCP 客户端Session CDN / 离线包 多版本共存 ⼩小程序 TCP 客户端Session 离线包 多版本共存 PC HTTP 浏览器器Session Web服务器器 唯⼀一版本
13. 多端场景下的挑战 体验层API 经常变化 ⽭矛盾 服务端设计的接⼝口究竟是⾯面向UI 还是只是通⽤用服务? 服务层API 相对稳定
14. BFF模式 传统⽅式: 困境中的答案: Backend for Frontend H5/⼩小程序 Native APP PC Browser H5/⼩小程序 Native APP PC Browser 业务服务层 Mobile BFF Desktop BFF 基础服务 基础服务 …. 基础服务 业务服务 ….
15. BFF为⽤用户体验解围 ⼀一件重要的事情: 服务⾃自治 体 服务⾃自治带来的⾼高效和灵活 验 ▸ 简化客户端逻辑,减少⽹网络开销 层 ▸ 避免⽆无意义的数据透传 ▸ 敏敏感信息过滤 ▸ 多协议发布 根据团队的技术栈选型:Java/Node/Php/.. Node作为BFF的开发 H5/ ⼩小程序 Native APP PC Browser TCP TCP 移动⽹网关 RPC Node BFF RPC 花呗服务 ⽤用户服务 借呗服务 交易易服务 HTTP RPC ….
16. 先思考⼀一下: Node Web开发中需要关注的有哪些点?
17. 理理想的企业级 Web 开发的核⼼心要素 编程模型约束 动态资源管理理 多进程管理理 ⽇日志 跨语⾔言 RPC 分布式中间件 数据访问层 故障排除体系 。。。
19. Base On Koa ▸ Koa based framework ▸ 当前解决异步编程最好的Web通⽤框架,洋葱模型 ▸ 所有源代码100%掌握并且参与到核⼼代码贡献 (@fengmk2 @dead_horse)
20. 编程模型规范 showcase !"" app # !"" controller (控制器器) # # $"" home.js # !"" service (业务逻辑) # # $"" github.js # !"" view (模板) # # $"" home.tpl # !"" public (静态资源) # # $"" main.css # $"" router.js (路路由) !"" config (配置) # !"" config.default.js # !"" config.prod.js # $"" plugin.js !"" test (单元测试) !"" README.md $"" package.json ▸ 约定⼀一些⽬目录规范,分层 ▸ Controller ▸ Service ▸ Config
21. Base On Koa ▸ 专注于Http的abstraction层,很薄 ▸ Middleware局限性 ▸ 定位是拦截⽤用户的请求,并在它前后做些事 ▸ 但实际情况下,很多功能与请求是⽆无关的,⽐比如定时任务,初始化,Application拓拓展 ▸ 功能之间的顺序不不能简单地交给开发者,需要统⼀一编排和管理理 ▸ 对于企业级应⽤用来说,还计较基础,需要⾮非常多的上层封装才能⽤用
22. Egg插件机制 ▸ 核⼼心要素 ▸ 插件是围绕某个功能组织的拓拓展集合 ▸ 插件之间可以声明依赖关系 ▸ 就是⼀一个迷你的应⽤用,⼀一样有Service、Config、Extend、Middleware … ▸ 解决Koa的Middleware局限性,不不适合⽤用于承载拓拓展的职责 ▸ 丰富的拓拓展点(context、agent、application …)
23. 跨语⾔言RPC ▸ 微服务时代,异构语⾔言 ▸ 通过⾃自动化⼿手段完成序列列化和反序列列化 ▸ 达到JS和Java互操作对开发者⽆无感知 ▸ ProtoBuf、Hessian 开源 https://github.com/alipay/sofa-rpc-node https://github.com/eggjs/
24. 实践分享
25. 多端适配的痛点 ▸ 适配多样的接⼝口规范 ▸ 客户端多版本差异 ▸ 多协议(http、tcp、pb) ▸ 登录态互通 ▸ …..
26. 跨APP请求适配 !"" app # !"" controller # # !"" huabei.js # !"" service # # !"" user # !"" extend # # !""application.js # !"" middleware # # !"" login.js # $"" router.js !"" config # !"" config.js !"" package.json $"" test 协议适配 接⼝口发布 登录兼容
27. 跨APP免登 - egg插件化 !"" app # !"" controller # $"" router.js !"" lib # !"" plugin # # !"" egg-login !"" config # $"" plugin.js !"" package.json $"" test 独⽴立发个npm包 包的⽅方式加载 egg-login !"" app # !"" extend # # $"" application.js # !"" middleware # # !"" login.js !"" config # $"" plugin.js !"" package.json $"" test // config/plugin.js // 挂载独⽴立插件 exports.login = { package: ‘egg-login’ }
28. 质量量稳定 开发阶段 运维阶段
29. 创建 开发 测试 预发 git 分⽀支 本地开发 代码CR/CI 合并分⽀支 云端构建 单元测试 全链路路回归 质量量报告 合并主⼲干 产物保留留 环境隔离、不不锁node模块版本、私有npm源、⾃自动化
30. 研发管理理 1. 新建迭代 2. 发布部署 3. 合并分⽀支 4. 单测覆盖 5. ⾃自助运维 GitLab+Node
31. 三板斧 线上变更更三原则 ▸ 可灰度 ▸ 可监控 ▸ 可回滚
32. 发布 内⽹网灰度 员⼯工灰度 单机发布 多组发布 全量量发布 监控 反映 报错监控 业务监控 实时预警 线上变更更 内⽹网灰度 员⼯工灰度 单机变更更 多组变更更 全量量变更更 回滚 ⼀一键回滚
33. 服务端监控 1. CPU 2. 内存 3. 预警 4. ⽇日志 http://alinode.aliyun.com/
34. 前端监控 1. 性能 2. 数据异常、智能报警 3. ⽇日志保留留 4. 实时数据 秒级刷新 5. 问题定位 源码映射
35. 总结
36. 渠道 前端 后端 h5 mobile、pc web、native ⼩小程序 构研 React/Vue Redux/dva 容器器适配 建 发 Node BFF-⽤用户体验适配层 ⼯工 平 具台 egg.js 蚂蚁Node中间件 node java service java service java service 框架、⼯工具 ▸ 社区 ▸ 开源 技术栈 ▸ Node/Egg ▸ Hybrid ▸ React/Vue ▸ Webpack ▸ ⼩小程序 平台 ▸ ⾃自动化 ▸ 标准化
37. ⼈人员成⻓长 ▸ 前端和BFF由同⼀一⼈人完成 ▸ 具备服务端技能 ▸ 拓拓展知识⾯面 ▸ 提升沟通和协调能⼒力力 ▸ 更更合理理的分⼯工 ▸ 业务⽀支持变多,解决问题变快
38. 在此键⼊入姓名 在此键⼊入Tittle
39. 在此键⼊入姓名 在此键⼊入Tittle
40. Thanks