一、概述
从互联网诞生的第一天起，web从一个简单的静态页面，发展到今天五花八门、令人眼花缭乱的复杂应用，大到企业级的web应用系统，小到简单的SPA管理系统。在硬件性能提升的同时，通过各种技术实现了海量数据存储、解决了高并发的性能瓶颈、追求极致的用户体验等。从前端到后端，随着业务需求的变更和技术的更新迭代，开发模式也随之发生着改变。
二、原则
从软件工程的层面来看，开发一个系统，不仅是为了要完成业务目标。同时，还应该关注实现的过程和在实现过程中所采用的方式方法。
- 关注点分离
- 高内聚、低耦合
- 可维护性、可扩展性、可重用性
三、发展史
1、传统JSP模式
也称为web 1.0时代。基于传统的网页HTML文件，可以作为页面来浏览。同时，又兼容java代码，可以用来处理业务逻辑。对于功能单一、需求稳定的项目，可以把页面展示逻辑和业务逻辑都放到JSP中。
- 优点：编程简单，易上手，容易控制
- 缺点：前后端职责不清晰，可维护性差
2、Model1模式
可看做是对传统JSP模式的增强。加入了JavaBean或Servlet，将页面展示逻辑和业务逻辑做了分离。JSP只负责显示页面，JavaBean或者Servlet负责收集数据，以及返回处理结果。
- 优点：架构简单，适合中小型项目
- 缺点：虽然分离出业务逻辑，但是JSP中仍然包含页面展示逻辑和流程控制逻辑，不利于维护
3、Model2模式
该模式也可以看做是传统MVC模式。为了更好地进行职责划分，将流程控制逻辑也分离了出来。JSP负责页面展示，以及与用户的交互，展示逻辑；Servlet负责控制数据显示和状态更新，控制逻辑；JavaBeans负责操作和处理数据，业务逻辑。
- 优点：分工明确，层次清晰，能够更好地适应需求的变化，适合大型项目
- 缺点：相对复杂，严重依赖Servlet API，JavaBean组件类过于庞大
4、后端MVC模式
该模式是在Model2的基础上，对传统MVC模式的一种变化。涌现出很多基于MVC模式的开发框架，如Struts、SpringMVC等。再加上Spring开源框架强大的兼容特性，进而形成了可以适应绝大多数业务需求的经典框架组合，如SSH、SSM等。
- 前端开发重度依赖后端开发环境
- 前后端职责依旧纠缠不清，Controller成为灰色地带
5、前端MVC模式（SPA）
随着Ajax的推出，标志着进入了web 2.0时代。前后端分工明确，通过Ajax接口关联，浏览器端变得复杂。
- 前后端可以在约定接口后实现高效并行开发
- 前端开发的复杂度控制比较困难
6、前端为主的MV*模式
为了降低前端开发复杂度，涌现了大量的前端框架，如EmberJS、KnockoutJS、AngularJS等。原则是先按照类型分层，如Templates、Controllers、Models等，然后在层内按照业务功能切分。
好处：
- 前后端职责清晰，在各自的工作环境开发，测试容易
- 前端开发的复杂度可控，通过组件化组织结构
- 部署相对独立
不足：
- 前后端代码不能复用
- 全异步不利于SEO
- 性能并非最佳，尤其是移动互联网的环境下
- SPA不能满足所有需求
7、全栈模式
随着Node.js的兴起，标志着全栈时代的到来，如MEAN框架组合、React+Redux等。前端UI层，处理浏览器层的展现逻辑，HTML+CSS+JavaScript。后端UI层，处理路由、模板、数据获取等，前端可以自由调控。后端可以专注于业务逻辑层的开发。
好处：
- 前后端的部分代码可以复用
- 需要SEO可以在服务端同步渲染
- 请求太多导致性能问题可以通过服务端缓解
挑战：
- 需要前端对服务端编程有进一步的了解
- Node层与Java层能否高效通信尚需要验证
- 需要更多经验才能对部署、运维层面熟悉了解
- 还有许多历史遗留问题
四、总结
- 模式没有好坏高下之分，只有是否合适
- Ajax给前端开发带来了一次质的飞跃，Node很可能是第二次
- 关注点分离是一条伟大的原则，本质上都是让前后端的职责更清晰，分工更合理高效
- 让合适的人做合适的事，前端的专注前端，后端的专注后端，各司其职
参考文章：
lifesinger：Web 研发模式演变