在那个还不算遥远的刀耕火种时代,Java Web 项目中的前端开发者写好页面模板,然后丢给后台哥们完事。这过程中后台开发人员需要写一些蹩脚的 js 交互代码,如果模板需要调整,还要求前端er在别人电脑上面修改。 这样不仅开发效率低,更主要的是,将我们前端开发人员置于何处,切图仔、网页制作?不想当厨子的士兵不是好司机,我们当然要自己主宰产品的展现,也要拒绝低效的工作环境,因此探索前后端分离的方案,从来就没有停止过。
之所以说没有停止,一方面为了赞扬广大一线 WEB 开发者勇于探索的精神(呵呵),另一方面也是因为现有的解决方案还有待完善。目前来说比较流行的前后端分离的解决方案有两种:
1. 前端使用动态模板,后端只提供接口
这种方案主要针对包含大量交互功能的应用类系统,比如后台管理。前端采用 MV* (angular, react) 框架,或者直接简单粗暴使用 ajax ,利用模板引擎完成完整的页面效果,后台根据事先的数据交互约定,提供相应的 RESTful 接口。项目前期,前后端分别独立开发,数据联调阶段,前端可以使用 Nginx 反向代理(现在特别流行的 webpack 已经内置了该功能),静态请求由 Nginx 处理,动态的请求转发给后端服务。
这种方式也有一些缺点,MV* 框架由于需要在前端渲染模板,这对于 SEO 来说简直是灾难;angular, react 需要更高级的浏览器(IE9 +)支持,这并不能满足所有用户的需求;angular, react 多数采用单页面形式,除了首屏加载慢以外,某些模块的加载失败甚至可能影响整个系统的功能。
2. 使用 Node 作为中间层
对于内容展现类应用,注重浏览效果和交互体验,可以采用这种方案。在前端和后台之间加入 Node 中间层,此时浏览器负责 CSS 渲染和 DOM 操作,Node 层进行数据请求、路由和页面渲染等任务,服务器提供数据接口。这种方式一定程度上增加了前端开发人员的工作量,也对其能力提出更高的要求,因为 Node 层也需要他们来编写。具体实现可以参考淘宝的”中途岛”项目。
除了上述的两种方案,这两年出现了前后端通吃的”全栈工程师”这样的高端工种,分分钟鄙视掉前端后台,分离神马的问题也就不存在了。还有一点也想提一下,那就是 node.js 的出现使得前端er成功插足后台领域,node + mongodb + ejs 这样的组合照样可以撸出一套完整的系统。