Web 研发模式演变
前不久徐飞写了一篇非常好的文章：Web 应用的组件化开发。本文尝试从历史发展角度，说说各种研发模式的优劣。
一、简单明快的早期时代
可称之为 Web 1.0 时代，很适合创业型小项目。不分前后端，常常 3-5 人搞定全部开发。页面由 JSP、PHP 等project师在服务端生成，浏览器负责展现。基本上是服务端给什么浏览器就展现什么，展现的控制在 Web Server 层。
这样的模式的优点是：简单明快，本地起一个 Tomcat 或 Apache 就能开发，调试什么的都还好，仅仅要业务不太复杂。
然而业务总会变复杂。这是好事情。否则非常可能就意味着创业失败了。业务的复杂会让 Service 越来越多。參与开发的人员也非常可能从几个人高速扩招到几十人。在这样的情况下，会遇到一些典型问题：
1、Service 越来越多，调用关系变复杂，前端搭建本地环境不再是一件简单的事。
考虑团队协作，往往会考虑搭建集中式的开发server来解决。这样的解决方式对编译型的后端开发来说或许还好，但对前端开发来说并不友好。天哪，我不过想调整下button样式，却要本地开发、代码上传、验证生效等好几个步骤。
或许习惯了也还好，但开发server总是不那么稳定，出问题时往往须要依赖后端开发搞定。
看似不过前端开发难以本地化，但这对研发效率的影响事实上蛮大。
2、JSP 等代码的可维护性越来越差。JSP 很强大。能够内嵌 Java 代码。
这样的强大使得前后端的职责不清晰，JSP 变成了一个灰色地带。
常常为了赶项目，为了各种紧急需求，会在 JSP 里揉杂大量业务代码。
积攒到一定阶段时，往往会带来大量维护成本。
这个时期，为了提高可维护性，能够通过以下的方式实现前端的组件化：
理论上。假设大家都能依照最佳实践去书写代码，那么不管是 JSP 还是 PHP，可维护性都不会差。但可维护性很多其它是project含义。有时候须要通过限制带来自由，须要某种约定，使得即便是新手也不会写出太糟糕的代码。
怎样让前后端分工更合理高效，怎样提高代码的可维护性，在 Web 开发中非常重要。以下我们继续来看，技术架构的演变怎样解决这两个问题。
二、后端为主的 MVC 时代
为了减少复杂度。以后端为出发点，有了 Web Server 层的架构升级。比方 Structs、Spring MVC 等，这是后端的 MVC 时代。
代码可维护性得到明显好转，MVC 是个很好的协作模式。从架构层面让开发人员懂得什么代码应该写在什么地方。
为了让 View 层更简单干脆。还能够选择 Velocity、Freemaker 等模板，使得模板里写不了 Java 代码。看起来是功能变弱了，但正是这样的限制使得前后端分工更清晰。然而依然并非那么清晰，这个阶段的典型问题是：
1、前端开发重度依赖开发环境。这样的架构下，前后端协作有两种模式：一种是前端写 demo。写好后。让后端去套模板。淘宝早期包含如今依然有大量业务线是这样的模式。优点非常明显。demo 能够本地开发，非常高效。
不足是还须要后端套模板，有可能套错，套完后还须要前端确定，来回沟通调整的成本比較大。还有一种协作模式是前端负责浏览器端的全部开发和server端的 View 层模板开发，支付宝是这样的模式。
优点是 UI 相关的代码都是前端去写就好，后端不用太关注，不足就是前端开发重度绑定后端环境。环境成为影响前端开发效率的重要因素。
2、前后端职责依然纠缠不清。Velocity 模板还是蛮强大的。变量、逻辑、宏等特性。依然能够通过拿到的上下文变量来实现各种业务逻辑。这样，仅仅要前端弱势一点，往往就会被后端要求在模板层写出不少业务代码。
另一个非常大的灰色地带是 Controller，页面路由等功能本应该是前端最关注的。但却是由后端来实现。Controller 本身与 Model 往往也会纠缠不清，看了让人咬牙的代码常常会出如今 Controller 层。这些问题不能全归结于程序猿的素质，否则 JSP 就够了。
常常会有人吐槽 Java。但 Java 在project化开发方面真的做了大量思考和架构尝试。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 层的绑定等。都不是easy的事情。
典型的解决方式是业界的 Backbone，但 Backbone 做的事还非常有限，依然存在大量空白区域须要挑战。
SPA 让前端看到了一丝绿色。但依然是在荒漠中行走。
四、前端为主的 MV* 时代
为了减少前端开发复杂度，除了 Backbone。还有大量框架涌现，比方 EmberJS、KnockoutJS、AngularJS 等等。这些框架总的原则是先按类型分层，比方 Templates、Controllers、Models，然后再在层内做切分。例如以下图：
优点非常明显：
1、前后端职责非常清晰。前端工作在浏览器端，后端工作在服务端。清晰的分工，能够让开发并行，測试数据的模拟不难，前端能够本地开发。后端则能够专注于业务逻辑的处理，输出 RESTful 等接口。
2、前端开发的复杂度可控。前端代码非常重，但合理的分层，让前端代码能各司其职。这一块蛮有意思的，简单如模板特性的选择，就有非常多非常多讲究。
并不是越强大越好，限制什么，留下哪些自由，代码应该怎样组织，全部这一切设计，得花一本的厚度去说明。
3、部署相对独立，产品体验能够高速改进。
但依然有不足之处：
1、代码不能复用。比方后端依然须要对数据做各种校验。校验逻辑无法复用浏览器端的代码。
假设能够复用。那么后端的数据校验能够相对简单化。
2、全异步，对 SEO 不利。往往还须要服务端做同步渲染的降级方案。
3、性能并不是最佳。特别是移动互联网环境下。
4、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 的全栈模式，依然面临非常多挑战：
1、须要前端对服务端编程有更进一步的认识。
比方 network/tcp、PE 等知识的掌握。
2、Node 层与 Java 层的高效通信。Node 模式下，都在server端，RESTful HTTP 通信未必高效，通过 SOAP 等方式通信更高效。
一切须要在验证中前行。
3、对部署、运维层面的熟练了解。须要很多其它知识点和实操经验。
4、大量历史遗留问题怎样过渡。这可能是最大最大的阻力。
六、小结
回想历史总是让人感慨，展望未来则让人兴奋。上面讲到的研发模式。除了最后一种还在探索期，其它各种在各大公司都已有大量实践。几点小结：
1、模式没有好坏高下之分。仅仅有合不合适。
2、Ajax 给前端开发带来了一次质的飞跃，Node 非常可能是第二次。
3、SoC（关注度分离） 是一条伟大的原则。
上面种种模式。都是让前后端的职责更清晰，分工更合理高效。
4、还有个原则，让合适的人做合适的事。比方 Web Server 层的 UI Layer 开发，前端是更合适的人选。
历史有时候会打转。咋一看以为是回去了，实际上是螺旋转了一圈。站在了一个新的起点。
题图：演化真不easy呀。
