基于 RxJS 构建稳健前端应用

To B 业务的生命周期与迭代通常会持续多年，随着产品的迭代与演进，以接口调用为核心的前后端关系会变得非常复杂。在多年迭代后，接口的任何一处修改都可能给产品带来难以预计的问题。在这种情况下，构建更稳健的前端应用，保证前端在长期迭代下的稳健与可拓展性就变得非常重要。本视频将重点介绍如何利用接口防腐策略避免或减少接口变更对前端的影响。

Transcript

1. 基于 RxJS 构建稳健前端应⽤ 谢亚东 https://xieyadong.com Google Developer Expert [Hangzhou]
2. 困境与难题
3. 内存控制台 内存剩余 0.8 GB 内存已使⽤ 1.2 GB 使⽤百分⽐ 60% /api/v1/memory/free /api/v1/memory/usage
4. 组件与接⼝依赖关系 MemoryFree MemoryUsage MemoryUsagePercent /api/v1/memory/free /api/v1/memory/usage 内存剩余 0.8 GB 内存已使⽤ 1.2 GB 使⽤百分⽐ 60%
5. 组件与接⼝依赖关系 MemoryFree MemoryUsage MemoryUsagePercent /api/v1/memory/free /api/v1/memory/usage 内存剩余 0.8 GB 内存已使⽤ 1.2 GB 使⽤百分⽐ 60%
6. 组件与接⼝依赖关系
7. 前端迭代 WEB V1 API V1 接⼝迭代 产品迭代周期 初始版本 WEB V2 API V2 第⼀次迭代 WEB V3 API V3 第⼆次迭代 Web Next API V4 第三次迭代
8. API Server Web Applications OpenSource API V1 … OpenSource API V2 API V1 … API V2 Component Component … 接⼝变更对前端的影响 1. 返回字段调整 2. 调⽤⽅式改变 3. 多版本共存
9. 更复杂的平台型 To B 业务 Platform Proxy Engine API Platform API V1 V2 … V1 V2 … Engine A V1 V2 … V1 V2 … Engine B … Engine B … Web Applications Component Component …
10. 前后端团队关系 上游团队 下游团队 接⼝ 前端 客户/供应商 跟随者
11. 接⼝依赖 前端⼯程体系 接⼝变更
12. 架构设计
13. 架构整洁之道 软件应当是⼀种使⽤周期很⻓的东⻄，⽽固件会随着硬件的演进⽽淘汰过时，但事实上的情况 是，虽然软件本身不会随着时间推移⽽磨损，但硬件及其固件却会随时间推移⽽过时，随即也 需要对软件做相应的改动。 硬件 Hardware 固件 Firmware 依赖 软件 Software 依赖
14. 前端与接⼝设计 前端也很难或者⽆法决定引擎与接⼝的设计，虽然前端本身不会随着时间的推移⽽变得不可 ⽤，但技术引擎及相关接⼝却会随着时间推移⽽过时，前端代码会跟随技术引擎的迭代更换逐 步腐烂，最终难逃被迫重写的命运。 引擎 Engine 接⼝ API 依赖 前端 Frontend 依赖
15. 硬件 Hardware 固件 Firmware 依赖 软件 Software 依赖 HAL 后端通⽤语⾔ Ubiquitous Language 前端通⽤语⾔ Ubiquitous Language 后端限界上下⽂ Bounded Context 上下⽂映射 Context Maps 前端限界上下⽂ Bounded Context 防 腐 层 硬件抽象层 Hardware Abstraction Layer 防腐层 Anticorruption Layer
16. 对上游的控制权 低 ⾼ RxJS GraphQL BFF
17. RxJS WebSocket Http Calls Async Data Sync Data Observable 1. 统⼀不同数据源的能⼒：WebSocket、http、⽤户操作转换为统⼀的 Observable 2. 统⼀不同类型数据的能⼒：异步数据和同步数据统⼀为 Observable 3. 丰富的数据加⼯能⼒：丰富的 Operator 操作符，在订阅前进⾏预先加⼯ API
18. Web Applications Component Component … Observables Observable Anticorruption Layer API Server OpenSource API V1 … OpenSource API V2 API V1 … API V2 OpenSource API V1 … OpenSource API V2 API V1 … API V2 API Server Web Applications OpenSource API V1 … OpenSource API V2 API V1 … API V2 Component Component …
19. 代码实现
20. MemoryFree MemoryUsage MemoryUsagePercent /api/v1/memory/free /api/v1/memory/usage Observable Anticorruption Layer Observable Anticorruption Layer
21. 接⼝防腐层代码实现
22. 返回字段调整 number { requestId:string; data: number } /api/v1 /api/v2
23. 调⽤⽅式改变 { requestId:string; data: number } { requestId:string; data: { free: number; usage: number; } } /api/v2 /api/v3 { requestId:string; data: number }
24. 多版本共存 { requestId:string; data: number } { requestId:string; data: { free: number; usage: number; } } /api/v2 /api/v3 { requestId:string; data: number }
25. 部署环境 A Web Applications Component Component … Observables Observable Anticorruption Layer API Server OpenSource API V1 … OpenSource API V2 API V1 … API V2 OpenSource API V1 … OpenSource API V2 API V1 … API V2 Web Applications Component Component … Observables Observable Anticorruption Layer API Server OpenSource API V1 … OpenSource API V2 API V1 … API V2 OpenSource API V1 … OpenSource API V2 API V1 … API V2 Web Applications Component Component … Observables Observable Anticorruption Layer API Server OpenSource API V1 … OpenSource API V2 API V1 … API V2 OpenSource API V1 … OpenSource API V2 API V1 … API V2 部署环境 B 部署环境 C
26. 接⼝防腐层额外作⽤ 1. 概念映射 2. 格式适配 3. 接⼝缓存 4. 稳定性兜底 5. 联调与测试
27. 概念映射 接⼝语义与前端需要数据的语义有时并不能完全对应，当在组件层直接调⽤接⼝时，所有开发 者都需要对接⼝与界⾯的语义映射⾜够了解。有了防腐层后，防腐层提供的调⽤⽅法包含了数 据的真实语义，减少了开发者的⼆次理解成本。
28. 格式适配 在很多情况下，接⼝返回的数据结构与格式与前端需要的数据格式并不符合，通过在防腐层增 加数据转换逻辑，可以降低接⼝数据对业务代码的⼊侵。在以上的案例⾥，我们封装了 getMemoryUsagePercent 的数据返回，使得组件层可以直接使⽤百分⽐数据，⽽不需要再次进 ⾏转换。
29. 接⼝缓存 对于多种业务依赖同⼀接⼝的情况，我们可以通过防腐层增加缓存逻辑，从⽽有效降低接⼝的 调⽤压⼒。与格式适配类似，将缓存逻辑封装在防腐层可以避免组件层对数据的⼆次缓存，并 可以对缓存数据集中管理，降低代码的复杂度。
30. 稳定性兜底 当接⼝稳定性较差时，通常的做法是在组件层对 response error 的情况进⾏处理，这种兜底逻 辑通常⽐较复杂，组件层的维护成本会很⾼。我们可以通过防腐层对稳定性进⾏兜底，当接⼝ 出错时可以返回兜底业务数据，由于兜底数据统⼀维护在防腐层，后续的测试与修改也会更加 ⽅便。
31. 联调与测试 接⼝和前端可能会存在并⾏开发的状态，此时，前端的开发并没有真实的后端接⼝可⽤。与传 统的搭建 mock api 的⽅式相⽐，在防腐层直接对数据进⾏ mock 是更⽅便的⽅案。
32. https://github.com/vthinkxie/rxjs-acl