对前后端分离的理解

近期工作以后台接口开发为主，基于目前的开发方式结合过往经验谈谈对前后端分离的理解

回顾历史，web开发经历了这样几个阶段：
1.基于servlet，后端拼接html响应给前台浏览器
2.jsp的出现，统一的模板化，如freemaker
3.ajax的使用，基于接口通信
4.前后端分离，前端工程化

从技术实现来看，前两个阶段的页面生成逻辑和动态数据获取逻辑都是在服务端完成的，这两个阶段可以说是服务器端渲染。第三阶段，基于ajax的使用，前后端可以基于轻量的数据格式（如json）异步或同步的交换数据，这个阶段将页面生成逻辑与数据获取逻辑分阶段的分离开来，即浏览器先拿到html页面，再通过ajax请求后台数据渲染页面。但由于页面间的跳转逻辑依赖于后端MVC框架，前端静态资源与后端服务代码并没有分开部署，因此这个阶段可以说是前后端半分离。第四阶段，更进一步将前端静态资源与后端服务代码分离分别部署，页面间跳转逻辑不再依赖后端MVC框架，由前端完成，自此前后端可以完全独立并行开发，前端走向模块化、系统化、工程化。

前后端分离，有多个理解的维度，如分离逻辑，分离开发，分离部署，它与服务器端渲染可以抽象为前后端协作的方式，两种方式各有优缺点，分析如下：
1.数据量：前后端分离中传递数据，传输量会小。服务器端渲染，因为有内容重复，会传输更多的数据。
2.体验：前后端分离多了一个渲染数据的过程，服务器端渲染省去了这个过程，这就是一直被提到的首屏渲染的问题。
3.解耦：前后端分离中，传输的是数据，数据怎么展示，全部交给前端来处理，后端只负责提供数据。服务器端渲染中，传输的是Html，后端传给前端的Model，通常是直接用模板技术生成（JSP、Velocity、freemaker）等。数据和展现并未分离。
4.控制：网页之间有各种跳转交互，在前后端分离中，跳转的页面控制，全部是由前端来决定，跟后端完全没有关系。在服务器端渲染的方式中，大部分是由后端来决定，少部分是由前端来决定。
5.SEO：前后端分离的方式，通常的载体是SPA，很多搜索引擎不支持SPA方式的SEO。而服务器端渲染的方式，因为生成的是网页，所以对SEO支持的很好。
6.代码质量：前后端分离遵循了单一职责原则，并解决了jsp等模板中杂糅html、css、js、java的问题，代码质量更高。

前后端分离，逻辑的分离有利于逻辑的抽象，有些逻辑既可以在前端实现也可以在后端实现，比如页面跳转控制逻辑，在前端实现就可以，没有必要多请求一次后端来实现。开发的分离，有利于团队效率的提高，这里需要考虑前后端开发人员角色、职责的划分。部署的分离，有利于项目的维护、升级、敏捷迭代，以及项目阶段的管理。