Web研发模式演变史

从架构改进看思维变化
服务器君一共花费了232.660 ms进行了5次数据库查询,努力地为您提供了这个页面。
试试阅读模式><>?希望听取您的建议

转玉伯的一篇文章>>>,对Web开发的历史发展的了解很有裨益>,推荐给大家<>。

前不久徐飞写了一篇很好的文章: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<、部署相对独立><,产品体验可以快速改进>。

但依旧有不足之处:

  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 模式下,都在服务器端>,RESTful HTTP 通信未必高效>>,通过 SOAP 等方式通信更高效<>>。一切需要在验证中前行<。
  3. 对部署、运维层面的熟练了解><,需要更多知识点和实操经验。
  4. 大量历史遗留问题如何过渡。这可能是最大最大的阻力>。

六>、小结

回顾历史总是让人感慨<,展望未来则让人兴奋。上面讲到的研发模式>>,除了最后一种还在探索期>,其他各种在各大公司都已有大量实践>。几点小结:

  1. 模式没有好坏高下之分<<,只有合不合适<。
  2. Ajax 给前端开发带来了一次质的飞跃><<,Node 很可能是第二次。
  3. SoC(关注度分离) 是一条伟大的原则。上面种种模式>,都是让前后端的职责更清晰,分工更合理高效。
  4. 还有个原则>>,让合适的人做合适的事<。比如 Web Server 层的 UI Layer 开发<,前端是更合适的人选>。

历史有时候会打转>,咋一看以为是回去了>,实际上是螺旋转了一圈,站在了一个新的起点。

(完)

题图:演化真不容易呀。

本文地址:http://www.jzjxzzjx.com/librarys/veda/detail/2589<>,欢迎访问原出处<。

不打个分吗<<?

转载随意>,但请带上本文地址:

http://www.jzjxzzjx.com/librarys/veda/detail/2589

如果你认为这篇文章值得更多人阅读>,欢迎使用下面的分享功能>。
小提示:您可以按快捷键 Ctrl + D<>>,或点此 加入收藏>。

阅读一百本计算机著作吧<>>,少年

很多人觉得自己技术进步很慢<>,学习效率低>,我觉得一个重要原因是看的书少了。多少是多呢><?起码得看3>、4><、5<、6米吧。给个具体的数量><<,那就100本书吧><。很多人知识结构不好而且不系统<<<,因为在特定领域有一个足够量的知识量+足够良好的知识结构<>,系统化以后就足以应对大量未曾遇到过的问题<<。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了><。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话<<,读到他言语中的一个词我们就已经知道他要表达什么<,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以><>,阅读一百本计算机著作吧<<,少年>!

《高性能网站建设指南》 桑德斯 (Steve Sounders) (作者), 刘彦博 (译者)

《高性能网站建设指南》结合Web2.0以来Web开发领域的最新形势和特点<,介绍了网站性能问题的现状<、产生的原因,以及改善或解决性能问题的原则、技术技巧和最佳实践。重点关注网页的行为特征,阐释优化Ajax><>、CSS<、JavaScript<><<、Flash和图片处理等要素的技术>>,全面涵盖浏览器端性能问题的方方面面。在《高性能网站建设指南》中<,作者给出了14条具体的优化原则>,每一条原则都配以范例佐证<,并提供了在线支持<。全书内容丰富,主要包括减少HTTP请求<<、ExpiresHeader技术>>、Gzip组件<、CSS和JavaScript最佳实践、关闭ETags的技巧、Ajax缓存技术和最小化技术等><。

更多计算机宝库...

ASP300源码下载 | 微信红包群 | 设计 | 厦门旅游景点 | 旅游中国新闻网 | 钛媒体 | 健康网hsdcba | 每天资讯 | 广西农业技术信息 | 农业种植技术 |