前言
最近,跟着抖音哲玄前端大佬的《大前端全栈实践》课程,学习了BFF层的框架封装,受益匪浅,下面来分享下我的一些收获和思考。
什么是 BFF?
BFF的全称为 Backend For Frontend,即专为前端准备的后端,为什么需要专门为前端准备的服务端?后端直接把数据给前端不就好了?下面,我们说说BFF有哪些好处。
为什么用 BFF?
1. 前端更加灵活
前端可以在BFF层处理后端的数据,减少在浏览器端的处理,提高浏览器代码性能。比如,对多个接口进行整合,对接口数据处理成前端渲染需要的数据结构/字段。
2. 提升前端性能
得益于BFF带来的灵活性,浏览器可以减少很多代码处理逻辑:
- 绕过浏览器的请求并发数量限制:当页面一处地方需要请求多个后端接口数据并进行合并时,我们可以在BFF层进行合并,这样前端仅需发起一次请求,就可以获得BFF层处理后的结果。
- 减少复杂逻辑:前端的一些复杂的数据处理或者长任务,可以放到BFF层执行,比如数据的聚合、格式转换、大数据处理等,这样可以减轻浏览器的负担,提升用户体验。
3. 提高安全性
一些密钥或者会造成安全隐患的代码,可以放到BFF层进行处理,避免敏感信息在前端暴露。同时,BFF层还可以做统一的权限校验、数据过滤等安全相关的工作。
4. 减少前后端沟通成本
BFF 将接口设计的责任部分转移到前端,使前后端的职责边界更清晰:后端只需专注于提供稳定、通用的原子服务,前端则通过 BFF 将这些服务聚合成适合具体页面的接口。
BFF层框架设计
在传统的 Node.js 服务开发中,开发者需手动管理中间件、控制器及路由,新增功能时涉及繁琐的引入与注册流程。这种模式不仅开发效率低下,维护也日趋困难。此外,大量样板代码(如错误处理、参数校验、响应封装等)的重复编写,进一步降低了开发体验与代码质量。
为解决这些痛点,于是有了 elpis-core 框架。
以下是
elpis-core 的目录结构以及其入口文件代码
elpis-core框架的设计思想与优点
设计思想
elpis-core框架遵循约定优于配置的原则,有着清晰的目录结构,使得代码自动加载/注册成为可能。同时采用模块化的设计,每个模块责任单一,互相独立,方便维护和扩展。
优点:
- 约定大于配置:传统 BFF 可能需要大量的配置文件,
elpis-core采用约定大于配置,这样就可以实现对文件的自动扫描,自动加载和注册等,大大减少手动的引入和注册。同时,约定式的路由,让目录结构更清晰,更加容易维护。 - 更合理的分层,这种分层更有利于代码的维护:
- Controller 层:处理请求响应,负责参数验证和返回结果格式化;
- Service 层:处理业务逻辑,封装复杂的数据处理和第三方服务调用;
- Middleware 层:处理通用逻辑,如日志记录、错误处理、权限验证等。
- 更好的扩展性:统 BFF 扩展功能往往需要修改核心代码,elpis-core 提供了 extendLoader,可以通过扩展的方式增加新功能,不影响核心代码。框架通过 loader 机制实现了插件化的架构,使得功能扩展变得简单和可维护。
- 内置路由模式:传统 BFF 通常需要手动处理接口校验,elpis-core 通过 routerSchemaLoader 提供了接口校验的能力,可以更好地保证接口的规范性。支持参数类型校验、必填项检查等功能,提高了接口的健壮性。
- 灵活的环境配置:elpis-core内置环境配置管理,只需在config目录下添加对应环境的配置文件即可,更方便维护不同环境的配置。支持开发、测试、生产等多环境配置,并可以通过环境变量轻松切换。
通过以上设计,elpis-core不仅提供了一个规范的开发框架,还大大提升了开发效率和代码质量。
全文完,感谢观看。