【前端架构】前后端分离架构设计

一、前后端分离

1. 为什么选择前后端分离

   1. 独立部署

   2. 分清职责

   3. 技术栈独立

   4. 方便系统演进

   5. 提高效率

2. 前后端分离的开发模式

   1. 按业务的展示逻辑，确认出待展示的内容

   2. 前后端根据内容，一起细化每个字段名，直至接口确认完毕

   3. 遇到对接第三方接口时，需要反复进行上一步

   4. 当各种开发完成时，在测试环境进行集成

   5. 将完整的业务功能交给QA进行测试

3. 前后端分离的API设计

   1. RESTful API

      1. 标准的HTTP动词（又称HTTP请求方法）：GET、PUT、POST、DELETE、PATCH等，每个动词的用法应该和它的行为一致

      2. 状态码：20x、40x、50x等常见的状态码，都应该正确地使用

      3. 资源路径：RESTful API中的URL用于代表资源，应该确保资源能遵循相关的规范，例如，/comments/1返回第一条评论，/comments/返回所有的评论

      4. 参数处理：如果存在大量的参数，那么我们就需要通过GET带查询字符串（Query String）的方式，或者POST带body的方式来进行传递

   2. API与安全

      1. Token管理

      2. 表单校验

      3. 权限管理

   3. 应对API变更

      1. 统一API接口服务

      2. API数据模型

      3. 一致化处理方式

      4. 可选的模型适配层

二、API管理模式：API文档管理方式

1. 传统方式

   1. 手写API文档

   2. 口头约定API

   3. 离线API文档

   4. 在线协作API文档

   5. 版本化API文档

   6. 代码即文档

2. 互联网模式

   1. HTTP服务即API文档

   2. 代码生成可交互的API文档，如Swagger

三、前后端并行开发：Mock Server

1. 三种类型Mock Server的比较

   1. 普通Mock Server：HTTP服务器（如Node.js中的Mock Server框架json-server）

      1. 支持相关字段的查询、过滤

      2. 支持文件内容的全文搜索

      3. 支持正则表达式路由

   2. DSL形式的Mock Server（如Java语言的Mock Server服务器Moco）

   3. 编程型Mock Server（如Swagger）

2. Mock Server的测试：契约测试

   1. 后端契约测试

      1. 运行Mock Server

      2. 发起对Mock Server服务的API请求，获取相应的返回数据

      3. 判断相应的数据，字段与API中的是否一致

   2. 前端契约测试

      1. 字段名一致性校验

      2. 使用interface接口进行API测试（TypeScript编写的应用）

      3. 检验逻辑字段

3. 前后端并行开发总结

   1. 前后端约定契约API，并完成对应的Mock Server实现

   2. 前后端根据各自的逻辑实现对应的业务代码

   3. 前后端编写各种契约测试，并确定API的修改能够反映到持续集成

   4. 前后端进行API集成

   5. 在API修改时，修正对应的API修改

四、服务于前端的后端：BFF

1. BFF的API Gateway

   

   1. 应对多端应用

   2. 聚合后端微服务

   3. 代码第三方API

   4. 遗留系统的微服务化改造

2. 前后端如何实现BFF

   1. 传统后端技术栈下的BFF

   2. 前端技术栈下的BFF

      1. 通过Node.js来接收前端发送过来的请求

      2. 根据请求的类型向对应的后台API服务发起请求

      3. 获得返回结果后进行处理，并向前端返回对应的结果

3. 使用GraphQL作为BFF

   1. GraphQL优势

      1. 按需获取

      2. 代码即文档

      3. 易于使用的API调试工具

      4. 强类型的API检查

      5. 易于版本化的API

   2. GraphQL缺点

      1. HTTP请求无法被缓存

      2. 错误码处理不友好

      3. 学习成本

      4. 实现复杂

   3. 基于GraphQL的BFF架构

      1. GraphQL->API Gateway->后端服务

      2. GraphQL->REST、RPC等接口的后端服务

      3. GraphQL->GraphQL接口的后端服务

推荐阅读

1. 上篇：【前端架构】组件化架构设计

参考资料

1. 《前端架构：从入门到微前端》

延伸阅读

---

▶ Walkthrough007