重新学习web后端开发-005-了解前后端分离开发模式

005-01.jp

分离是为了以后更好的相聚。- 匿名

1. 什么是前后端分离

在作者早期参加工作时，web项目开发基本上是程序员加美工的组合，那个时候还没有明确的前后端的说法。一个web项目就像一道大杂烩，包括了界面和后端业务逻辑，同时前端的页面由后端进行渲染。

早期web项目结构

随着Ajax，尤其是nodejs的发展，前端的能力大大增强，工程化也越来越成熟。很多之前需要后端去做的事情，比如页面的渲染，前端已经完全可以胜任。并且前端也不仅仅局限于pc桌面，而是发展到移动端，tv等。近年来，前后端分离开发逐渐流行开来，尤其是在互联网方向，已经成为了主流的web开发方式。

前后端分离开发

2. 前后端分离的优点

2.1 优点一：分工明确

专业的人做专业的事情。前后端分离后，前端人员可以专注于UI界面的设计开发，后端人员则可以专注于业务逻辑开发，提供前端调用的API接口。

2.2 优点二：解除耦合

将前端UI界面和后端服务数据分离，可以将后端服务接口独立出来，服务于不同的前端UI，比如传统PC桌面，移动端H5，APP等，提高了后端服务的可复用性和可维护性，同时也有利于向分布式微服务架构进行演变。

2.3 优点三：提升效率

前后端未分离web开发模式如下图：

前后端未分离web开发模式

我们可以看到，程序员要等待美工先导出html模板后，再开始整合模板，渲染页面。程序员承担了大部分的工作，包括页面的二次处理（数据渲染、页面整合等）以及后端业务逻辑的开发工作。

前后端分离后web开发模式

前后端人员可以同时进行开发，互不干扰。双方遵循统一的规范（产品原型及API接口文档），各自进行独立的开发，开发完成后进行联合测试（俗称联调）。

3. 前后端分离后产生的主要问题

3.1 沟通成本上升

前后端分离前，程序员承担了大部分前端页面渲染和后端业务逻辑的工作，基本上没有太多的沟通成本。前后端分离后，前端需要承担页面设计和数据渲染的工作，数据需要通过调用后端提供的接口服务来获取。这样一来，统一的接口文档就成为前端和后端的主要契约，随着需求的调整以及项目的快速迭代，接口也会随之出现变动，这时双方之间的沟通成本将大大增加。如果没有良好的沟通机制和统一的接口文档管理将会导致双方扯皮，互相推诿，影响产品周期和团队建设。

那么如何解决这个问题呢？简单来说就是：统一规范！也就是统一沟通机制以及接口文档管理。主要有以下几点建议：

• 接口文档由前后端中的一方进行统一管理。另外一方必须根据接口文档开展相应的工作。

  至于是由前端去管理还是后端去管理，可以综合团队前后端人员的能力、业务理解程度等方面情况来决定。

• 对接口文档的变更操作，必须要先体现在接口文档中，并通知到相应人员。切记不要事后再去更改文档！

• 定期会议沟通，可集合团队具体的沟通机制进行。

• 使用接口文档管理系统，对接口进行统一的管理。同时很多接口文档管理系统还会提供接口版本管理、mock server，接口测试等功能。

  推荐使用YAPI接口管理系统，可以为开发、产品、测试人员提供更优雅的接口管理服务。具体使用详见其官网。

3.2 前端模拟后端接口问题

前端需要有一个能够模拟接口及其数据的服务，这样前端的开发进度就不依赖于后端的开发进度，双方就可以根据统一的接口文档各自开展工作，而统一的mock server就比不可少了。上面推荐的YAPI接口管理系统，就可以提供相应的mock功能。

这里需要注意一个问题，那就是mock server很难完全覆盖到后端所有的接口业务逻辑。这也是为什么需要联调的原因。毕竟mock的环境与真实的环境还是存在一定的差异。不过只要根据规范来做，可以大大提高联调的效率，节省时间。

3.3 测试介入太晚，拉长产品周期

针对这个问题，作者的经验是只要接口文档确定好，测试就可以根据接口文档写对于的接口测试用例了，同时还可以和一些接口测试自动化工具结合在一起，而不必等到联调完成后才介入。

总的来说，在互联网、移动互联网等大部分web相关方面，可以优先考虑采用前后端分离的方式进行web项目的开发。当然，没有任何的技术、框架或者方案是银弹，能够一招走天下，我们需要综合考虑项目、团队、成本等多方面因素，采用合适的方案。

4. 小结

本节主要介绍了前后端分离的基本概念、优点、实践中存在的问题以及对应的解决思路和建议。从下一节开始，我们将结合实际的案例开始一步一步的实战探索web后端接口开发的过程及其细节。