前端文摘:Web 开发模式演变历史和趋势

简介:   今天的《前端文摘》给大家分享一篇玉伯的文章。文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获。 您可能感兴趣的相关文章 10款唯美浪漫的婚礼 & 结婚纪念网站模板 那些让人惊叹的的国外创意404错误页面设计 10大流行的 Metro UI 风格 Bootstrap 主题 推荐35款精致的 CSS3 和 HTML5 网页模板 10款最新流行的 jQuery 插件,值得你收藏     前不久徐飞写了一篇很好的文章:Web 应用的组件化开发。

  今天的《前端文摘》给大家分享一篇玉伯的文章。文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获。

您可能感兴趣的相关文章

 

  前不久徐飞写了一篇很好的文章:Web 应用的组件化开发。本文尝试从历史发展角度,说说各种研发模式的优劣。

一、简单明快的早期时代

1

  

  可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。基本上是服务端给什么浏览器就展现什么,展现的控制在 Web Server 层。

  这种模式的好处是:简单明快,本地起一个 Tomcat 或 Apache 就能开发,调试什么的都还好,只要业务不太复杂。

  然而业务总会变复杂,这是好事情,否则很可能就意味着创业失败了。业务的复杂会让 Service 越来越多,参与开发的人员也很可能从几个人快速扩招到几十人。在这种情况下,会遇到一些典型问题:

  1、Service 越来越多,调用关系变复杂,前端搭建本地环境不再是一件简单的事。考虑团队协作,往往会考虑搭建集中式的开发服务器来解决。这种解决方案对编译型的后端开发来说也许还好,但对前端开发来说并不友好。天哪,我只是想调整下按钮样式,却要本地开发、代码上传、验证生效等好几个步骤。也许习惯了也还好,但开发服务器总是不那么稳定,出问题时往往需要依赖后端开发搞定。看似仅仅是前端开发难以本地化,但这对研发效率的影响其实蛮大。

  2、JSP 等代码的可维护性越来越差。JSP 非常强大,可以内嵌 Java 代码。这种强大使得前后端的职责不清晰,JSP 变成了一个灰色地带。经常为了赶项目,为了各种紧急需求,会在 JSP 里揉杂大量业务代码。积攒到一定阶段时,往往会带来大量维护成本。

  这个时期,为了提高可维护性,可以通过下面的方式实现前端的组件化:

 

2

 

  理论上,如果大家都能按照最佳实践去书写代码,那么无论是 JSP 还是 PHP,可维护性都不会差。但可维护性更多是工程含义,有时候需要通过限制带来自由,需要某种约定,使得即便是新手也不会写出太糟糕的代码。

  如何让前后端分工更合理高效,如何提高代码的可维护性,在 Web 开发中很重要。下面我们继续来看,技术架构的演变如何解决这两个问题。

二、后端为主的 MVC 时代

  为了降低复杂度,以后端为出发点,有了 Web Server 层的架构升级,比如 Structs、Spring MVC 等,这是后端的 MVC 时代。

 

3

 

  代码可维护性得到明显好转,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 单页面应用)时代。

 

4

 

  这种模式下,前后端的分工非常清晰,前后端的关键协作点是 Ajax 接口。看起来是如此美妙,但回过头来看看的话,这与 JSP 时代区别不大。复杂度从服务端的 JSP 里移到了浏览器的 JavaScript,浏览器端变得很复杂。类似 Spring MVC,这个时代开始出现浏览器端的分层架构:

 

5

 

  对于 SPA 应用,有几个很重要的挑战:

  1、前后端接口的约定。如果后端的接口一塌糊涂,如果后端的业务模型不够稳定,那么前端开发会很痛苦。这一块在业界有 API Blueprint 等方案来约定和沉淀接口,在阿里,不少团队也有类似尝试,通过接口规则、接口平台等方式来做。有了和后端一起沉淀的接口规则,还可以用来模拟数据,使得前后端可以在约定接口后实现高效并行开发。相信这一块会越做越好。

2、前端开发的复杂度控制。SPA 应用大多以功能交互型为主,JavaScript 代码过十万行很正常。大量 JS 代码的组织,与 View 层的绑定等,都不是容易的事情。典型的解决方案是业界的 Backbone,但 Backbone 做的事还很有限,依旧存在大量空白区域需要挑战。

  SPA 让前端看到了一丝绿色,但依旧是在荒漠中行走。

四、前端为主的 MV* 时代

  为了降低前端开发复杂度,除了 Backbone,还有大量框架涌现,比如 EmberJS、KnockoutJS、AngularJS 等等。这些框架总的原则是先按类型分层,比如 Templates、Controllers、Models,然后再在层内做切分,如下图:

 

6

 

  好处很明显:

  1、前后端职责很清晰。前端工作在浏览器端,后端工作在服务端。清晰的分工,可以让开发并行,测试数据的模拟不难,前端可以本地开发。后端则可以专注于业务逻辑的处理,输出 RESTful 等接口。

  2、前端开发的复杂度可控。前端代码很重,但合理的分层,让前端代码能各司其职。这一块蛮有意思的,简单如模板特性的选择,就有很多很多讲究。并非越强大越好,限制什么,留下哪些自由,代码应该如何组织,所有这一切设计,得花一本的厚度去说明。

  3、部署相对独立,产品体验可以快速改进。

  但依旧有不足之处:

  1、代码不能复用。比如后端依旧需要对数据做各种校验,校验逻辑无法复用浏览器端的代码。如果可以复用,那么后端的数据校验可以相对简单化。
  2、全异步,对 SEO 不利。往往还需要服务端做同步渲染的降级方案。
  3、性能并非最佳,特别是移动互联网环境下。
  4、SPA 不能满足所有需求,依旧存在大量多页面应用。URL Design 需要后端配合,前端无法完全掌控。

五、Node 带来的全栈时代

  前端为主的 MV* 模式解决了很多很多问题,但如上所述,依旧存在不少不足之处。随着 Node.js 的兴起,JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式:

 

7

 

  在这种研发模式下,前后端的职责很清晰。对前端来说,两个 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 开发,前端是更合适的人选。

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

 

原文链接:前端文摘:Web 研发模式演变历史和趋势

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

相关文章
|
2天前
|
前端开发 开发者
探索前端技术的新趋势:Web组件化开发
【2月更文挑战第11天】 在这篇文章中,我们将深入探讨Web组件化开发的概念及其对前端开发领域的影响。不同于传统的摘要方式,我们通过一个故事来引入主题:想象在一个快速变化的数字世界里,有一座由各种小型、独立、可复用的建筑块构成的城市,每个建筑块都拥有独特的功能和风格,它们可以自由组合,创造出无限可能的城市景观。这座城市,就像是使用了Web组件化开发技术的前端项目。接下来,我们将详细探讨Web组件化开发的优势、实现方式以及面临的挑战,为前端开发者提供一个全面的视角来理解和应用这一重要的技术趋势。
15 5
|
9天前
|
前端开发 API 数据安全/隐私保护
Web前端开发中的跨域资源共享(CORS)解决方案
【2月更文挑战第5天】在Web前端开发中,跨域资源共享(CORS)是一个常见的挑战。本文将探讨CORS的概念和原理,并介绍一些常用的解决方案,包括服务器端配置和前端处理方法,帮助开发者更好地应对跨域请求问题。
48 4
|
12天前
|
开发框架 前端开发 JavaScript
从前端到后端——完整的Web开发指南
【2月更文挑战第1天】Web开发已经成为了现代软件开发中不可或缺的一部分。无论是前端还是后端,都扮演着重要的角色。本文将从前端到后端,介绍完整的Web开发流程和技术栈,帮助初学者快速入门Web开发。
|
7天前
|
编解码 前端开发 UED
Web前端开发中的响应式设计技巧
【2月更文挑战第6天】在当今互联网快速发展的时代,网站的响应式设计已经成为Web前端开发的重要一环。本文将介绍一些实用的响应式设计技巧,帮助开发者更好地应对不同屏幕尺寸和设备的挑战,提升用户体验。
23 1
|
1天前
|
前端开发 安全 区块链
前沿技术探索:Web3.0与前端开发的融合之路
【2月更文挑战第12天】 在数字技术快速发展的今天,Web3.0作为互联网的新阶段,不仅预示着去中心化、更加智能化的网络环境,还为前端开发带来了前所未有的挑战与机遇。本文将深入探讨Web3.0对前端开发的影响,分析其在实际应用中如何与前端技术融合,以及前端开发者如何适应这一变革,把握新时代的技术趋势。通过案例分析与技术展望,我们将一窥Web3.0与前端开发融合的未来图景,为前端开发者提供新的思考和行动指南。
61 25
|
2天前
|
前端开发 安全 搜索推荐
未来前端开发的新趋势:Web3.0与区块链技术的融合
【2月更文挑战第12天】 本文探讨了Web3.0和区块链技术对未来前端开发领域的影响。不同于传统摘要的简单概括,我们将通过一个创新的视角,深入解析这两项技术如何共同塑造前端开发的新生态,引领未来互联网的方向。文章首先介绍了Web3.0和区块链技术的基本概念,随后详细分析了它们在提高数据安全性、增强用户体验和推动去中心化应用(DApp)开发上的具体应用。最后,我们将展望这一趋势对前端开发者技能要求的变化,以及如何准备迎接这一变革。
|
2天前
|
编解码 前端开发 UED
Web前端开发中的移动端适配与响应式设计
【2月更文挑战第11天】 对于现代 Web 前端开发而言,移动端适配与响应式设计是至关重要的技术环节。移动设备的普及使得用户更多地通过手机或平板设备访问网站,因此,如何有效地适配各种屏幕尺寸并提供良好的用户体验成为了前端开发者需要面对的重要问题。本文将介绍移动端适配与响应式设计的基本原理,并结合实际案例探讨其在前端开发中的应用。
|
6天前
|
前端开发 JavaScript API
前端秘法番外篇----学完Web API,前端才能算真正的入门
前端秘法番外篇----学完Web API,前端才能算真正的入门
|
6天前
|
JSON 前端开发 安全
Web前端开发中的跨域问题及解决方案
【2月更文挑战第8天】在Web前端开发中,跨域是一个常见且具有挑战性的问题。本文将深入探讨跨域产生的原因、影响以及多种解决方案,帮助开发者更好地理解和解决跨域问题。
|
9天前
|
前端开发 JavaScript UED
Web前端开发中的关键技术趋势
【2月更文挑战第5天】 随着互联网技术的不断发展,Web前端开发也在不断演进。本文将探讨当前Web前端开发中的关键技术趋势,包括响应式设计、前端框架、PWA等方面的发展现状和未来趋势,并分析它们对Web应用开发的影响。

热门文章

最新文章

相关产品

  • 云迁移中心