先后端分离

发展历程

---

 

　  随着业务需求增长 复杂度的增加，网站开发愈来愈大，一个程序猿开发全站变得愈来愈难，所以网站开发逐渐分红了前端和后端两个职位。除了职位的分离，还须要代码分离，否则两拨人开发 维护同一套代码就很不方便了。项目越复杂，出现你等我，我等你的状况就会愈来愈多，这样就拖慢了总体团队的节奏。
　　先后端的分离方式分为部分分离和所有分离两种，部分分离是只把脚本和样式分离出去，而html模板还留在后端经过jsp，velocity或者freemarker来渲染；另外一种就是彻底分离，脚本样式以及模板全都放在前端来维护。
　　部分分离已经很大程度上解决了先后端开发时的协调问题，开发效率也获得了很大程度的提高。但也得认可，这种方式也仍是有问题的。当咱们要开发html模板的时候，就须要搭起一整套后端的开发环境，或者是找后端同窗来协助。
　　而彻底分离通常有两种方案，第一种就是使用velocity这种在nodejs和java下均可以编译的页面模板，在开发时放到前端项目里，但在发布时，会把模板发布到后端的模板目录下，这样，开发时就作到了彻底分离。这种方式最大的好处就是线上模板的渲染仍是由java来作的，造成的是带有动态数据的html，比较有利于SEO。但这种方式下，前端的开发环境和发布系统的复杂度都相对较高，单纯的前端改动也仍是要带着后端一块儿发布。
　　第二种彻底分离的方式，就是把纯静态的html模板彻底放在前端，数据所有经过RESTful接口来进行交互。这样先后端就彻底分开了，脱离了后端的模板，而这种方式的系统复杂度也会比第一种彻底分离的方式低。但这种方案下，全部的页面数据都是用js渲染的，没有动态模板，不太利于SEO。这个不足咱们能够经过作server render或者给蜘蛛作一套定制页面来解决。

　　先后端分离并不仅是开发模式，而是web应用的一种架构模式。在开发阶段，先后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段先后端分离模式须要对web应用进行分离部署，先后端以前使用HTTP或者其余协议进行交互请求。

　　在开发模式上，先后段分离不只仅只是工程师的分工开发，更重要的意义在于实现了先后端的并行开发，简化了开发流程。

　　在开发期间先后端共同商定好数据接口的交互形式和数据格式。而后实现先后端的并行开发，其中前端工程师再开发完成以后能够独自进行mock测试，然后端也可使用接口测试平台进行接口自测，而后先后端一块儿进行功能联调并校验格式，最终进行自动化测试。

分离好处

---

 

先后端分离模式和传统的web应用架构相比有很大的不一样，到底分仍是不分，这还真是个问题。

从目前应用软件开发的发展趋势来看，主要有两方面须要注意：

1. 愈来愈注重用户体验，随着互联网的发展，开始多终端化。

2. 大型应用架构模式正在向云化、微服务化发展。

咱们主要经过先后端分离架构，为咱们带来如下四个方面的提高：

 

• 为优质产品打造精益团队
• 提高开发效率

          先后端分离之后，能够实现先后端代码的解耦，只要先后端沟通约定好应用所需接口以及接口参数，即可以开始并行开发，无需等待对方的开发工做结束。与此同时，即便需求发生变动，只要接口与数据格式不变，后端开发人员就不须要修改代码，只要前端进行变更便可。如此一来整个应用的开发效率必然会有质的提高。

• 完美应对复杂多变的前端需求

• 加强代码可维护性

应用代码将会变得整洁清晰，不管是代码阅读仍是代码维护都会比之前轻松

使用场景

---

 

任何一项技术以及架构都不是适用于任何场景，先后端分离一样也是如此。虽然先后端分离架构能带来许多的好处，但前提是创建在开发团队合适的基础上的。

1. 页面布局复杂

2. 须要有较高的页面渲染效果

3. 前端页面中包含复杂业务逻辑

4. 页面须要渲染的数据量较大

像这种重前端的应用，适合采用先后端分离架构。

部署方案

---

 

先后端分离以后，应用在部署时也须要进行先后端分离。在进行先后端分离方案选择时，须要结合项目的实际状况和用户来考虑。

分离以前的架构

　　先后端分离以前，后端架构是Nginx服务和后端的PHP服务以及前端的静态资源都是部署在同一台服务器上。当浏览器发起访问请求时，如何请求的是静态资源，Nginx直接把静态资源返回给服务器；若是请求的是页面或后端服务，则经Nginx将请求转发到后端的PHP服务器，完成响应后经Nginx返回到浏览器。

　　这个方案比较简单，易于实现，并且能到达先后端解耦的目的。并且不少公司目前都是基于这种架构或者必定的变形来实现的web应用。

　　可是对于页面量比较大，须要有良好SEO的应用来讲，此方案缺点也较为明显。由于 Nginx只是向浏览器返回页面静态资源，而国内的搜索引擎爬虫只会抓取静态数据， 不会解析页面中的js，这使得应用得不到良好的搜索引擎支持。同时由于Nginx不会进行页面的组装渲染，须要把静态页面返回到浏览器，而后完成渲染工做，这加剧了浏览器的渲染负担。

　　另外，因为这种架构使得前端工程师的工做范围只局限在了浏览器一侧，致使在进行一些特殊的性能优化时，前端工程师没法独立完成，还须要后端开发人员的配合，这也必定程度上影响了双方的进度。

分离以后的架构

　　先后端分离以后，咱们在原先的架构只上再单独增长了一个Node Server做为中间层，将前端资源部署到Node Server中。Node Server还实现了一层数据代理服务，负责与提供数据的后端服务进行通讯。

　　而且还在这个基础上增长并使用了前端机（前端机是对全部的请求进行预处理和负载均衡，而后再转发给后端机。）的Nginx服务，浏览器发起的请求通过前端机的Nginx进行分发，URL请求统一分发到Node Server，在Node Server中根据请求类型从后端服务器上经过RPC服务请求页面的模板数据，而后进行页面的组装和渲染；API请求则直接转发到后端服务器，完成响应。

结语

---

 

　　先后端分离并不是仅仅只是先后端开发的分工，而是在开发期进行代码存放分离、先后端开发职责分离，先后端可以并行开发（先后端共同商定好数据接口的交互形式和数据格式） 独立测试（其中前端工程师再开发完成以后能够独自进行mock测试，然后端也可使用接口测试平台进行接口自测）;在运行期进行应用部署分离，先后端之间经过HTTP请求进行通信。

　　先后端分离适合在前端页面逻辑较复杂，页面渲染要求较高的重前端应用中使用。

　　先后端分离的开发模式与传统模式相比，能为咱们 提高开发效率、加强代码可维护性，打造一个先后端并重的精益开发 团队。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　整理总结自 先后端分离实践