前后端分离实践（一）—— 基础理论篇

一、什么是前后端分离？

前后端分离既是一种开发模式，又是一种架构模式。在开发阶段，前后端开发人员约定好数据交互接口，实现并行开发与测试；在运行阶段，前后端采用分离部署，使用HTTP或其他通讯协议进行交互请求。前端人员主要负责从后端获取数据进行展示并进行页面的路由，后端人员主要为前端人员提供数据模型以及进行业务逻辑处理。

二、为什么需要前后端分离？

1、前后端职责不清

在传统的业务系统中，由于没有约束，前后端代码耦合在一起，日期月累，导致系统的可维护性会越来越差。Web开发人员可能既需要掌握前端开发技术，又要掌握后端开发技术，人才招聘成本也大幅度提高。

2、开发效率不高

三、前后端分离究竟分离了什么？

1、开发职责的分离

前端负责数据展示和页面路由，后端负责提供数据模型和业务逻辑处理。前后端开发人员各司其职，做到并行开发。

2、交互方式的分离

前端通过HTTP请求获取数据，后端按约定的数据格式提供接口，一般为REST风格的接口。

3、代码组织方式的分离

前端代码与后端代码在不同的工程目录或不同的代码库，前端不需要知道后端的技术架构，后端也不需要知道前端的技术架构，前后端都有充分的自由采用各种技术来进行系统的性能优化。

4、应用部署的分离

前后端项目可以部署在不同的服务器上，提高系统的可维护性以及容灾能力。

四、为什么要加入Node中间层来实现前后端分离？

1、反思前后端的定义

当我们把工作从服务器端(Java)抽出来到浏览器端(Js)的时候，我们的目的只是明确前后端的职责划分，并不是非浏览器渲染不可。只是因为在传统的开发模式中，一般认为出了服务器就到了浏览器，所以前端的工作内容只能被限定在浏览器端，也因此很多人认为后端 = 服务器端、前端 = 浏览器端。如下图：

但在实际的前端工作中，并不是所有的事情都要在浏览器端来处理，还有一些任务在服务器端处理更好，比如渲染逻辑，但前端开发不可能去做后端开发的事情。因此，这个时候，前端可以构建一个与浏览器互通的Nodejs层，来处理一些前端工作内容中不必在浏览器中处理的任务，更清晰的完成了前后端分离的工作。在这里，前后端分离就是更明确的按照工作职责进行的划分，而并非按照硬件环境（浏览器&服务器）去划分。如下图：

2、加入Node中间层之后的系统架构图

3、加入Node中间层之后的前后端职责划分

Front-End Browser UI layer 处理浏览器层的展现逻辑，通过 CSS 渲染样式，通过 JavaScript 添加交互功能，专注于交互和用户体验。

Front-End Server UI layer 处理路由、模板、数据获取、cookie 等。通过路由，前端可以自主把控URL Design，并专注于控制逻辑、渲染逻辑。

Back-End Server Javaer 处理业务逻辑、提供数据接口或数据模型，专注于业务逻辑和数据的开发。

从上面的职责划分可以看出来，实行这种模式的前后端分离之后，前端的工作量在增加，而后端的工作量则在减少，这也会引发人才需求结构的变化。

4、加入Node中间层的优缺点

优点：

1) 有利于SEO；

2) 解决浏览器渲染时异步请求太多导致的性能问题；

3) 消除白屏渲染的时间，优化用户体验；

4) 共享渲染模版，在不同的渲染环境可以渲染出一样的结果；

5) 更精细的控制路由。

缺点：

1) 需要前端开发人员对Node服务端开发有一定的技术储备；

2) 多增加一层，如果实现不当，反而有性能损耗；

3) 对项目的搭建、部署、运维层面都需要更多的知识点和实操经验；

4) 大量的历史遗留问题过渡，这可能是最大的挑战。

1、

2、

3、