前后端分离

前后端分离

在B／S架构的环境中，前后端分离一直都众说纷纭，没有一个标准。我觉得打开可以分为三个阶段：

传统的分离方法

传统意义上的前后端分离，前端指的是美工、切图、设计，后端是实现代码、数据库相关的实现。美工设计和生成的前端页面，给到程序员来做集成。那么这里其实就不分什么前后端了，程序员从数据库一直搞到前端页面的样式，就是“全能型运动员“。当然，一般传统上的开发协作模式有两种：

一种是前端先写一个静态页面，写好后，让后端去套模板。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。

另一种协作模式是，前端直接去写模板，这样做的问题在于，前端编写过程中很依赖与后端环境，如果当后端没写完的情况下，前端几乎没法干活。

显然这两种方式似乎都有很多问题，但至少这还是目前为止大部分公司所采用的模式。我们公司现在也是一样，虽然用上了AngularJS这样框架，总的协作模式没有变。从物理层来区分前后端的开发，同时淡化了前端在逻辑上的色彩。由于前端所做的事情就是来实现一个页面的静态版本，所以，大多数公司又给前端工程师们找了点活干。你去看现在公司在招聘的时候前端工程师的要求，除了对页面的基本制作技能外还有额外的设计职责。

到这里原本我们还以为已经将前后端分离开来了吗？

中途岛(Midway Framework)

淘宝的前端团队真的很厉害，中途岛(Midway Framework)的架构在14年4月份就已经提出来了。

简单的说，中途岛架构是基于NodeJs的，因为Js是一门前后端通吃的语言，它可以作为一个桥梁搭建在原始的前后端模式中。具体的中途岛思想可以参考淘宝前端团队博客里发的博文：前后端分离的思考与实践。

想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。加入NodeJs还有很多好处，比如NodeJs的高并发特性，请求合并等。同时使用nodeJs做桥梁，前端可以自己决定获取什么格式的数据。

单页应用

有个名称叫SPA，全称叫Single Page Application，翻译过来就是单页应用，和用户交互时，用户点击某个链接或按键的时候不会跳转，也就是不会完全刷新页面，而是像App一样在当前页面进行跳转操作，现有的框架有：Angular、Backbone等。

接下来我们要对我们的工程做前后端分离，就是要利用好Angular架构的特性，动态加载类库、路由、资源（$resource）。SPA无需任何模板来控制输出，它的展现完全靠JavaScript控制，数据是SpringMVC通过restful的api接口提供的，所以SPA所采用的前后端的分离，已经基本分的很清楚了，后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。

我们的产品大背景：客户的需求越来越多丰富，客户的场景从原有的单屏，扩展到了多屏，对于我们的产品同样也提出了巨大的挑战，基于这个背景下，我们接下来必须进行前后端的彻底分离和前端工程化，实现对前端的部署和管理。