共计 3808 个字符，预计需要花费 10 分钟才能阅读完成。
简介： 本文对 Web 开发的历史倒退的理解很有裨益，举荐给大家。本文尝试从历史倒退角度，说说各种研发模式的优劣。一、简略明快的晚期时代，二、后端为主的 MVC 时代，三、Ajax 带来的 SPA 时代，四、前端为主的 MV* 时代，五、Node 带来的全栈时代
本文对 Web 开发的历史倒退的理解很有裨益，举荐给大家。
本文尝试从历史倒退角度，说说各种研发模式的优劣。
一、简略明快的晚期时代
可称之为 Web 1.0 时代，非常适合守业型小我的项目，不分前后端，常常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成，浏览器负责展示。基本上是服务端给什么浏览器就展示什么，展示的管制在 Web Server 层。
这种模式的益处是：简略明快，本地起一个 Tomcat 或 Apache 就能开发，调试什么的都还好，只有业务不太简单。
然而业务总会变简单，这是好事件，否则很可能就意味着守业失败了。业务的简单会让 Service 越来越多，参加开发的人员也很可能从几个人疾速扩招到几十人。在这种状况下，会遇到一些典型问题：
1、Service 越来越多，调用关系变简单，前端搭建本地环境不再是一件简略的事。思考团队合作，往往会思考搭建集中式的开发服务器来解决。这种解决方案对编译型的后端开发来说兴许还好，但对前端开发来说并不敌对。天哪，我只是想调整下按钮款式，却要本地开发、代码上传、验证失效等好几个步骤。兴许习惯了也还好，但开发服务器总是不那么稳固，出问题时往往须要依赖后端开发搞定。看似仅仅是前端开发难以本地化，但这对研发效率的影响其实蛮大。
2、JSP 等代码的可维护性越来越差。JSP 十分弱小，能够内嵌 Java 代码。这种弱小使得前后端的职责不清晰，JSP 变成了一个灰色地带。常常为了赶我的项目，为了各种紧急需要，会在 JSP 里揉杂大量业务代码。积攒到肯定阶段时，往往会带来大量保护老本。
这个期间，为了进步可维护性，能够通过上面的形式实现前端的组件化：
实践上，如果大家都能依照最佳实际去书写代码，那么无论是 JSP 还是 PHP，可维护性都不会差。但可维护性更多是工程含意，有时候须要通过限度带来自在，须要某种约定，使得即使是老手也不会写出太蹩脚的代码。
如何让前后端分工更正当高效，如何进步代码的可维护性，在 Web 开发中很重要。上面咱们持续来看，技术架构的演变如何解决这两个问题。
二、后端为主的 MVC 时代
为了升高复杂度，当前端为出发点，有了 Web Server 层的架构降级，比方 Structs、Spring MVC 等，这是后端的 MVC 时代。
代码可维护性失去明显好转，MVC 是个十分好的合作模式，从架构层面让开发者懂得什么代码应该写在什么中央。为了让 View 层更简略罗唆，还能够抉择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是性能变弱了，但正是这种限度使得前后端分工更清晰。然而仍旧并不是那么清晰，这个阶段的典型问题是：
1、前端开发重度依赖开发环境。这种架构下，前后端合作有两种模式：一种是前端写 demo，写好后，让后端去套模板。淘宝晚期包含当初仍旧有大量业务线是这种模式。益处很显著，demo 能够本地开发，很高效。有余是还须要后端套模板，有可能套错，套完后还须要前端确定，来回沟通调整的老本比拟大。另一种合作模式是前端负责浏览器端的所有开发和服务器端的 View 层模板开发，支付宝是这种模式。益处是 UI 相干的代码都是前端去写就好，后端不必太关注，有余就是前端开发重度绑定后端环境，环境成为影响前端开发效率的重要因素。
2、前后端职责仍旧纠缠不清。Velocity 模板还是蛮弱小的，变量、逻辑、宏等个性，仍旧能够通过拿到的上下文变量来实现各种业务逻辑。这样，只有前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。还有一个很大的灰色地带是 Controller，页面路由等性能本应该是前端最关注的，但却是由后端来实现。Controller 自身与 Model 往往也会纠缠不清，看了让人咬牙的代码常常会呈现在 Controller 层。这些问题不能全归纳于程序员的素养，否则 JSP 就够了。
常常会有人吐槽 Java，但 Java 在工程化开发方面真的做了大量思考和架构尝试。Java 蛮合乎马云的一句话：让平凡人做不凡事。
三、Ajax 带来的 SPA 时代
历史滚滚往前，2004 年 Gmail 像风一样的男子来到世间，很快 2005 年 Ajax 正式提出，加上 CDN 开始大量用于动态资源存储，于是呈现了 JavaScript 王者归来的 SPA（Single Page Application 单页面利用）时代。
这种模式下，前后端的分工十分清晰，前后端的要害合作点是 Ajax 接口。看起来是如此美好，但回过头来看看的话，这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript，浏览器端变得很简单。相似 Spring MVC，这个时代开始呈现浏览器端的分层架构：
对于 SPA 利用，有几个很重要的挑战：
1、前后端接口的约定。如果后端的接口一塌糊涂，如果后端的业务模型不够稳固，那么前端开发会很苦楚。这一块在业界有 API Blueprint 等计划来约定和积淀接口，在阿里，不少团队也有相似尝试，通过接口规定、接口平台等形式来做。有了和后端一起积淀的接口规定，还能够用来模仿数据，使得前后端能够在约定接口后实现高效并行开发。置信这一块会越做越好。
2、前端开发的复杂度管制。SPA 利用大多以性能交互型为主，JavaScript 代码过十万行很失常。大量 JS 代码的组织，与 View 层的绑定等，都不是容易的事件。典型的解决方案是业界的 Backbone，但 Backbone 做的事还很无限，仍旧存在大量空白区域须要挑战。
SPA 让前端看到了一丝绿色，但仍旧是在荒漠中行走。
四、前端为主的 MV* 时代
为了升高前端开发复杂度，除了 Backbone，还有大量框架涌现，比方 EmberJS、KnockoutJS、AngularJS 等等。这些框架总的准则是先按类型分层，比方 Templates、Controllers、Models，而后再在层内做切分，如下图：
益处很显著：
1、前后端职责很清晰。前端工作在浏览器端，后端工作在服务端。清晰的分工，能够让开发并行，测试数据的模仿不难，前端能够本地开发。后端则能够专一于业务逻辑的解决，输入 RESTful 等接口。
2、前端开发的复杂度可控。前端代码很重，但正当的分层，让前端代码能各司其职。这一块蛮有意思的，简略如模板个性的抉择，就有很多很多考究。并非越弱小越好，限度什么，留下哪些自在，代码应该如何组织，所有这所有设计，得花一本的厚度去阐明。
3、部署绝对独立，产品体验能够疾速改良。
但仍旧有不足之处：
代码不能复用。比方后端仍旧须要对数据做各种校验，校验逻辑无奈复用浏览器端的代码。如果能够复用，那么后端的数据校验能够绝对简单化。
全异步，对 SEO 不利。往往还须要服务端做同步渲染的降级计划。
性能并非最佳，特地是挪动互联网环境下。
SPA 不能满足所有需要，仍旧存在大量多页面利用。URL Design 须要后端配合，前端无奈齐全掌控。
五、Node 带来的全栈时代
前端为主的 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 的场景能够在服务端同步渲染，因为异步申请太多导致的性能问题也能够通过服务端来缓解。前一种模式的有余，通过这种模式简直都能完满解决掉。
与 JSP 模式相比，全栈模式看起来是一种回归，也确实是一种向原始开发模式的回归，不过是一种螺旋回升式的回归。
基于 Node 的全栈模式，仍旧面临很多挑战：
须要前端对服务端编程有更进一步的意识。比方 network/tcp、PE 等常识的把握。
Node 层与 Java 层的高效通信。Node 模式下，都在服务器端，RESTful HTTP 通信未必高效，通过 SOAP 等形式通信更高效。所有须要在验证中前行。
对部署、运维层面的纯熟理解，须要更多知识点和实操教训。
大量历史遗留问题如何过渡。这可能是最大最大的阻力。
六、小结
回顾历史总是让人感叹，展望未来则让人兴奋。下面讲到的研发模式，除了最初一种还在探索期，其余各种在各大公司都已有大量实际。几点小结：
模式没有好坏高下之分，只有合不适合。
Ajax 给前端开发带来了一次质的飞跃，Node 很可能是第二次。
SoC（关注度拆散）是一条平凡的准则。下面种种模式，都是让前后端的职责更清晰，分工更正当高效。
还有个准则，让适合的人做适合的事。比方 Web Server 层的 UI Layer 开发，前端是更适合的人选。