前后端分离开发技术的一些思考

在网站开发过程中，对于前后端的分界线似乎一直是众说纷纭。从一开始完全没有前后端的概念，到后来的纠缠不清。

传统的分离方法

在我的脑海中一提到前端和后端，基本上第一个出现的区别点就是:后端是跟数据库跟服务器打交道的，前端是跟浏览器打交道的。似乎没有什么问题，大家都这么认为的。当然这没有什么错，我们一直以来都认为仅仅是以浏览器作分界，把这两部分的代码分离出来。但是前后端分离的初衷是为了分离前后端开发人员的职责，同时解决开发模式的问题。但似乎他们的职责在以前甚至于现在都并不明确，虽然前端是跟浏览器打交道，但是最终浏览器拿到的页面是服务器通过模板生成的一个临时静态页面而已。所以，实际上后端也掺和进来了，因为他要处理模板。当然，一般传统上的开发协作模式有两种：

一种是前端先写一个静态页面，写好后，让后端去套模板。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。
另一种协作模式是，前端直接去写模板，这样做的问题在于，前端编写过程中很依赖与后端环境，如果当后端没写完的情况下，前端几乎没法干活。

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

到这里原本我们以为已经将前后端分离开来了，但是在模版这个尴尬的问题上，前后端的工程师们绝对吃过不少苦头，因为在整体网站架构上，这并不是前后端的分离。

中途岛(Midway Framework)

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

简单的说，中途岛架构是基于NodeJs的，因为Js是一门前后端通吃的语言，它可以作为一个桥梁搭建在原始的前后端模式中。具体的中途岛思想可以参考淘宝前端团队博客里发的博文：前后端分离的思考与实践想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。

加入NodeJs还有很多好处，比如NodeJs的高并发特性，请求合并等。同时使用nodeJs做桥梁，前端可以自己决定获取什么格式的数据。

SPA

现在有一个在前端领域很火的名词SPA(Single Page Application)也就是所谓的单页应用，在和用户交互的时候当用户点击某个物件或者按键的时候不会跳转到其他的页面，会像app一样在当前页面进行跳转，最典型的框架是：Angular、Backbone等。

现阶段我在公司开发的移动商城就是采用Angular架构的一个SPA，切换页面或者场景的时候并不会跳转页面，只是去改变链接上的锚点，这个锚点由ui-route监听到，从而就由前端实现了对URL的掌控。SPA无需任何模板来控制输出，它的展现完全靠JavaScript控制，数据是SpringMVC通过restful的api接口提供的，所以SPA所采用的前后端的分离，已经基本分的很清楚了，后台只管数据输出和业务逻辑处理，前端负责交互逻辑和界面展示。

这样就需要前后端在接口的方面约定好，以避免不必要的麻烦。Blueprint是一个用来编写Api文档的工具包，对restful API几乎是完美兼容。