随着 Serverless 基础服务带来的技术红利，前端工程师能够以更低成本和更高可靠性掌控后端的服务。在应用开发过程中不仅仅要考量运维的成本，如何让前端开发架构同后端应用架构结合，来实现应用研发提效，同样是开发者关注的核心，本文将从前后端一体化研发模式的开发实践上同大家一起讨论探索。

传统应用研发模式

在传统的前端研发的流程中，大抵会有如下两种同后端的研发协作方式：

• 前后端分离模式
  
• BFF（Backend For Frontend）模式
  

前后端分离

前后端分离的开发模式，其特征非常明显：

• 前端负责视图展现，以 SPA（single-page application ）为代表的通用解决方案
  
• 后端负责业务和数据逻辑的处理
  

对于这种职责的划分，也成为前端开发这一职业出现的一大因素，开发者期望不同的开发工程师在能够各自专注在其领域和负责的事情上，不仅仅分工的分离，资源部署也可以进行分离。对于前后端连接的部分，如 API 相关的约束和规则，以约定方式提前沟通。

相比于传统 Web 开发，比如 JavaWeb，前端端分离带来的优势是明显的。但对于前端领域希望的优化的方向，可能受限后端架构，比较有代表性的场景：SSR（Server Side Render）。

BFF

除了可能出现的架构受限之外，在实际项目开发中，也经常出现前后端开发分配的问题，比如一个业务逻辑，后端同学希望通过两个接口的组装下，而前端期望减少 http 请求，应该再加一个接口。

从各自领域出发各有各的道理，而前端在面向快速迭代的业务上，也希望掌握更多的控制权，那在前后端之间加一层处理，用于用户体验的适配和 API 的聚合就变得水到渠成。

BFF 的出现可以降低一定的沟通成本，在后端服务化的现今，通过 BFF 组装接口架构上会更合理。前端也掌控的更加服务能力，让 SSR 等方案的应用也将变得更加顺滑。

相信“全栈开发者们” 大多数还未来得及享受 BBF 带来的幸福感，便要开始烦恼因为这一层引入导致的问题，特别是链路复杂度上升，除了前端资源和后端资源发布之外，还需要关心 Node 应用；维护成本的问题，让本就缺乏运维经验的前端开发更是无从下手。

前后端一体的框架设计

在 Serverless 技术红利的现在，BFF 以往需要关心的负载、容灾和报警等运维方面的内容，都可以借助 Serverless 的技术体系得到缓解，同时面向前越来越多的前后端协同开发模式，如何提供一套框架以提效应用研发显得尤为重要。

什么是一体化研发

传统全栈开发，大多是前端资源和 Node 服务分别进行维护，独立启动调试服务，并各种拥有自己的开发部署流程。

传统模式更多是将资源机械地组合在一起，没有有充分发挥 Javascript 的语言优势，无法解决前后端开发之间存在的割裂感。

一体化的研发模式，希望提供的开发体验，除了同仓库之外，还能够以同一个命令开发构建，开发过程*享源码、类型，真正做到一起开发一起部署。

一体化研发框架设计

前后端一体的研发框架，包括前端 React 框架以及 Node 框架

以框架工程服务为基础，提供工程构建和运行时开箱即用的能力：

• 借助工程上的插件能力，在调试时提供统一的 dev 服务，构建时统一的命令构建产物
  
• 通过前端及 Node 运行时能力的生成，为技术方案的一键开启提供了可能
  

前端以函数调用的方式请求后端服务，通过函数式的编程范式，让开发更贴近现代前端 Web 研发的方式。

前端显式地引入后端代码，为了在构建阶段能够正确进行前端资源和 Node 服务的打包，框架通过约定方式进行 API 的编译及转化

后端 API 按目录约定生成指定的 API 路由，前端的函数调用，在编译阶段默认转化成 request 请求，开发者多数情况下无需关心 API 的调用地址。

除此之外框架提供了基于函数式的服务调用，让开发者以更加贴合函数式的方式使用 Node 服务。

通过前后端一体的研发模式设计，提供了更加符合直觉的应用开发方式，开发、调用、测试均像纯函数一样简单，让前后端开发方式更加一致。

开箱即用的技术方案

前后端一体的开发模式下，不仅仅可以让应用开发更加顺滑，而且在应用一些技术方式时将变得更加简单。

以 SSR 的使用流程为例，在传统模式下，如果希望应用 SSR 能力：

而在一体化的研发模式下，开发者仅仅只需要在工程配置文件中开启一个配置项：ssr: true 便可以获得上述流程中的所有能力，包括工程构建上需要进行的处理。

通过一体化框架的能力，大大降低了技术方案的应用成本和复杂度，几乎以零上手成本的方式呈现给开发者。

除了 CSR、SSR 的一键切换之外，诸如 SSG（Server Static Generate）的技术方案也能变得开箱即用。

开发与部署

一体化的开发模式下，仅需要一个命令便能开始应用的开发调试：

借助框架 vite 模式和 Node 代码的运行时编译，给开发者带来流程的开发体验，开发调试速度得到极大提升。

对于应用部署同样通过统一的构建命令完成整个应用的构建，结合基于 Serverless 的平台服务完成一键部署，享受 Serverless 的技术红利带来的低运维甚至零运维。

在不增加技术运维成本的基础上不断拓展前端开发的边界，向着应用开发升级。

未来

借助 Serverless 带来的运维成本降低，让前端开发者专注开发的基础上更加大胆自信地去掌控整个应用的逻辑。不断拓展自己在业务上的能力边界，逐步从前端开发转向应用开发。

一体化应用的开发模式，以其高效开发、便捷部署的特点将会占据应用开发的一席之地，而针对特定领域的解决方案，在配合平台服务能力的基础上会有更大的想象空间。在未来的研发模式中，框架仅仅只是提供了开发过程的研发提效，面向应用开发的全链路，必定是工具、框架、平台等多个维度相互结合，共同打造极致研发体验的过程。

如果对于一体化的研发模式感兴趣欢迎关注相关的项目：

• 基于 React 的一体化研发解决方案 ICE：https://github.com/alibaba/ice
  
• 云端一体 Node.js 框架 Midway：https://github.com/midwayjs/midway
  
• 多端应用研发方案 Rax：https://github.com/alibaba/rax
  

研发模式体验

2021.10.19 - 10.22 云栖大会期间，我们在云栖小镇 D3 馆的云起实验室布置了云端一体化研发的体验区，大家可以抢先接触和体验面向未来的云端一体研发模式，体验项目包括专注中后台以及面向跨端开发的一体化研发，同时现场将有精美小礼品赠送，欢迎大家前来现场探讨和体验。