一：前言
因为接到学校网络中心的任务，老师提出了java 作为后台提供api，返回json文件，node负责前端渲染页面。以前一直都是一个人做整站或者后台，单独用node来接收后台数据渲染页面真的是第一次听说。于是去google了下类似的架构，结果竟然出乎意料的发现了不少相同想法的。尤其是淘宝的UED团队，从他们博客里发现阿里正在使用的就是这样的架构。并且发现这样的架构使得前后端得到真正的分离。
二：为何分离
- 1、开发体系：架构体系决定了后端重于前端，前端做好静态页后，要转为php或vm等，开发要用eclipce等后端环境工作，一大堆让前端迷糊的配置，一旦java人员更新了错误的文件，会导致所有人的环境启动不了，束手无策，只能等待救援。
- 2、难维护：页面总是会有php\jsp等非前端代码，相互干扰、无法优化，时间越久问题越突出。
- 3、前后端职责不清晰。
从我接触web以来，mvc一直被反复提及。毫无以问mvc模式使得前后端得到一定程度的分离。但在学习实践过程中，我发现在mvc中前端在完成界面开发后，后端依然需要来套模板，并且在后期维护过程中，非前端代码带来的干扰使得维护变得越来越复杂。
前后端分类
- 前端：负责所有和用户有交互的产品，包括 WEB以及手机客户端
- 后端：负责各种业务 API 的开发，以及服务器端其他系统的开发
为了降低复杂度，以后端为出发点，有了 Web Server 层的架构升级，比如 Structs、Spring MVC 等，这是后端的 MVC 时代。
代码可维护性得到明显好转，MVC 是个非常好的协作模式，从架构层面让开发者懂得什么代码应该写在什么地方。为了让 View 层更简单干脆，还可以选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这种限制使得前后端分工更清晰。然而依旧并不是那么清晰，这个阶段的典型问题是：
1、前端开发重度依赖开发环境。这种架构下，前后端协作有两种模式：一种是前端写 demo，写好后，让后端去套模板。淘宝早期包括现在依旧有大量业务线是这种模式。好处很明显，demo 可以本地开发，很高效。不足是还需要后端套模板，有可能套错，套完后还需要前端确定，来回沟通调整的成本比较大。另一种协作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发，支付宝是这种模式。好处是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。
2、前后端职责依旧纠缠不清。Velocity 模板还是蛮强大的，变量、逻辑、宏等特性，依旧可以通过拿到的上下文变量来实现各种业务逻辑。这样，只要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的，但却是由后端来实现。Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的代码经常会出现在 Controller 层。这些问题不能全归结于程序员的素养，否则 JSP 就够了。
淘宝中途岛 Midway
在中途岛项目中，前后端分界的那条线，从浏览器端移回到了服务器端。
藉由一个由前端 轻松掌控 且 与浏览器共通 的Nodejs层，可以更清晰的完成了前后端分离。
也可以让前端开发针对不同的情况，自行决定 最适当的解决方案 。而不是所有事情 都在浏览器端来处理 。
职责划分
中途岛并不是前端试图抢后端饭碗的项目，目的只是把 模版 这个模糊地带切割清楚，取得更明确的职责划分。
后端 (JAVA)，专注于
- 服务层
- 数据格式、数据稳定
- 业务逻辑
前端，专注于
- UI层
- 控制逻辑、渲染逻辑
- 交互、用户体验
而不再拘泥于服务端或浏览器端的差异。
模版共享
在传统的开发模式中，浏览器端与服务器端是由不同的前后端两个团队开发，但是模版却又在这两者中间的模糊地带。因此模版上面总不可避免的越来越多复杂逻辑，最终难以维护。
有了NodeJS，后端同学可以在JAVA层专注于业务逻辑与数据的开发。而前端同学则专注于控制逻辑与渲染的开发。并且自行选择这些模版是要在 服务端 (NodeJS) 或是 浏览器端 做渲染。
用著一样的模版语言 XTemplate ，一样的渲染引擎 JavaScript
在 不同的渲染环境 （Server-side、PC Browser、Mobile Browser、Web View、etc.） 渲染出 一样的结果 。
路由共享
也因为有了NodeJS这一层，可以更细致的控制路由。
假如需要在前端做浏览器端路由时，可以同时配置服务器端的路由，使其在 浏览器端换页 或是 服务端换页 ，都可以得到一致的渲染效果。
同时也处理了SEO的问题。
前端为主的 MV* 模式解决了很多很多问题，但如上所述，依旧存在不少不足之处。随着 Node.js 的兴起，JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式：
在这种研发模式下，前后端的职责很清晰。对前端来说，两个 UI 层各司其职：
1、Front-end UI layer 处理浏览器层的展现逻辑。通过 CSS 渲染样式，通过 JavaScript 添加交互功能，HTML 的生成也可以放在这层，具体看应用场景。
2、Back-end UI layer 处理路由、模板、数据获取、cookie 等。通过路由，前端终于可以自主把控 URL Design，这样无论是单页面应用还是多页面应用，前端都可以自由调控。后端也终于可以摆脱对展现的强关注，转而可以专心于业务逻辑层的开发。
通过 Node，Web Server 层也是 JavaScript 代码，这意味着部分代码可前后复用，需要 SEO 的场景可以在服务端同步渲染，由于异步请求太多导致的性能问题也可以通过服务端来缓解。前一种模式的不足，通过这种模式几乎都能完美解决掉。
三、如何做分离
- 1、产品设计确定后，前后端人员共同制定开发接口，为方便接口的制定、显示、测试，使用nodejs+mongodb开发了接口平台。
- 2、从前端角度考虑系统架构图如下：
- 前后端分离架构图
四、分离结果如何
- 1、开发效率更高，在联调之前，互不干扰，前端开发完成后就是实际可用的代码，不需要再转换成后台编译环境，永远不会被java / php 启动不成功所困扰。
- 2、部分需要前后端共同开发的功能，如文件上传，通常需要页面端与接收端都进行相关的开发配置，之前较难定位是谁配置错误，现在全部由前端完成，开发、测试都容易定位，上传成功后，只要向java发送文件保存的路径即可。
- 3、完全分清了前后端开发人员的职责，任一方开发完成后都可以提测，实现同步开发、测试。
- 4、联调非常简单，若双方接口一致，正常情况下只要修改要接口请求IP即可完成切换。
- 5、问题责任清晰，联调、测试、预发、上线，每个过程都难免会产生问题，前端、后端、运维三方责任边界清晰，日志中记录nodejs的请求发出，nginx请求接收与转发、java端请求接收与返回，三处任何一处断点，都能马上定位是哪方的问题。
- 6、前端人员有更高的权限，页面端的展示几乎全由前端实现，但之前一些配置却受制于后台，比如常见的模板功能，纯html页面虽可以通过angularjs实现模板，但实际效果却并不理想，网速差时经常会出现include部分显示后置、甚至加载不成功的情况，nodejs的ejs框架可以很好的实现这个功能。
- 另外，据浏览器加载不同的css以便实现浏览器兼容，之前处理通常是页面加载后，通过js判断浏览器类型，再去加载不同的css文件，影响渲染效率，并且js判断浏览器类型本身就存在兼容问题，用nodejs则可以在render前就完成该判断，直接用相应的浏览器样式做渲染
- 7、代码复用，验证模块，页面端与nodejs端可以直接复用
五、注意事项：
- 1、前端开发人员不仅需要有扎实的nodejs知识，还要有一定的服务端、运维知识，对http通信有更深层次的理解，nginx、redis、socket、buffer等技术也要掌握，多多益善。
- 2、开发之初对功能充分、宽裕的评估，使用初期不要用nodejs过多开发新功能。初次使用，难免会遇到很多意想不同的问题，前端开发人员本身对服务端知识有限，java人员又对nodejs语法不熟，若处理不好会导致项目延期。
六、总结：
- 待续
