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

蔚落 2023-06-02 09:30 51阅读 0赞

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

您可能感兴趣的相关文章

*  [10款唯美浪漫的婚礼 & 结婚纪念网站模板][10_ _]
 *  [那些让人惊叹的的国外创意404错误页面设计][404]
 *  [10大流行的 Metro UI 风格 Bootstrap 主题][10_ Metro UI _ Bootstrap]
 *  [推荐35款精致的 CSS3 和 HTML5 网页模板][35_ CSS3 _ HTML5]
 *  [10款最新流行的 jQuery 插件，值得你收藏][10_ jQuery]

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

## 一、简单明快的早期时代 ##

[![1][]][1 1]

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

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

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

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

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

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

[![2][]][2 1]

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

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

## 二、后端为主的 MVC 时代 ##

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

[![3][]][3 1]

代码可维护性得到明显好转，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][]][4 1]

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

[![5][]][5 1]

对于 SPA 应用，有几个很重要的挑战：

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

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

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

## 四、前端为主的 MV\* 时代 ##

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

[![6][]][6 1]

好处很明显：

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

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

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

但依旧有不足之处：

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

## 五、Node 带来的全栈时代 ##

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

[![7][]][7 1]

在这种研发模式下，前后端的职责很清晰。对前端来说，两个 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 应用程序图标素材][Web 1]
 *  [赞！10套精美的免费网站后台管理系统模板][10]
 *  [精选12款优秀 jQuery Ajax 分页插件和教程][12_ jQuery Ajax]
 *  [16个扁平化设计的 HTML5 & CSS3 网站模板][16_ HTML5 _ CSS3]
 *  [经典设计：17个最有效的学习着陆页设计的例子][17]

原文链接：[前端文摘：Web 研发模式演变历史和趋势][Web 2][  
][Link 1]

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

本文出处【[http://www.cnblogs.com/lhb25/][_ _ _]】

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[10_ _]: http://www.cnblogs.com/lhb25/p/10-beautiful-wedding-invitation-websites-template.html
[404]: http://www.cnblogs.com/lhb25/archive/2012/08/04/really-cool-and-creative-404-error-pages.html
[10_ Metro UI _ Bootstrap]: http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html
[35_ CSS3 _ HTML5]: http://www.cnblogs.com/lhb25/archive/2012/08/03/5-creative-html5-and-css3-templates.html
[10_ jQuery]: http://www.cnblogs.com/lhb25/p/10-new-popular-jquery-plugins-check.html
[Web]: http://goo.gl/DKNX6z
[1]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/d7a7fffa53c51db10f42f623652324e0.gif
[1 1]: https://github-camo.global.ssl.fastly.net/90850e93b917cd3c958dff1c7d0197f819167343/687474703a2f2f696d672e68622e616963646e2e636f6d2f63333639616163633864613338616638653432326664323935313438633537643162353831376666666335362d4f636250646c5f6677363538
[2]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/6f638a13bf1ab4e5f7bd69583cc80211.gif
[2 1]: https://github-camo.global.ssl.fastly.net/bbbf666300ccea8dc4f5deb3f22773195555d3ac/687474703a2f2f696d672e68622e616963646e2e636f6d2f3835393365623736663966353163613735333933333234333131303933623731356235373637316531313466342d6e61677936445f6677363538
[3]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/f4013d3550334a8c5d44b635325a2bc2.gif
[3 1]: https://github-camo.global.ssl.fastly.net/b9e16b0b3ff3361a481badaca7d408e8fa6b404f/687474703a2f2f696d672e68622e616963646e2e636f6d2f3961366266353237646162626462396237393563353862306237616636633761313864653963653331316136312d3975697578545f6677363538
[4]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/27b9b180047d11723a1c177cc868024b.gif
[4 1]: https://github-camo.global.ssl.fastly.net/d0098546c9fa01b443c16ff1953c90aa9056955b/687474703a2f2f696d672e68622e616963646e2e636f6d2f3932393766646337336438336632373764343439633932313933613361663432386464633064343431316366392d6e31445936465f6677363538
[5]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/616b2707d5af6cec8980895e09df53e8.gif
[5 1]: https://github-camo.global.ssl.fastly.net/f064bc7a5b06ea9a39cf039a5dec0ca6675141ff/687474703a2f2f696d672e68622e616963646e2e636f6d2f3135383839323134336263363430333364323264643865643765373533366537316530373063346131336335372d6850673150635f6677363538
[6]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/f466c389f2fc63a7357b62a07b927995.gif
[6 1]: https://github-camo.global.ssl.fastly.net/2ab0e0e247dfae7b74760b7d57056a680204874d/687474703a2f2f696d672e68622e616963646e2e636f6d2f3536663463656530653663376166363165323464626633316534626531376631343264353930326331313039612d42637852696d5f6677363538
[7]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/49/f22742b5836203053f8dce30bd379899.gif
[7 1]: https://github-camo.global.ssl.fastly.net/ed895cf7561cb3ec07ef74aa2dea573b57dbe219/687474703a2f2f696d672e68622e616963646e2e636f6d2f3430303931653637316230626465653236653531366163303530633663616563383038383562386131326238372d374a676646685f6677363538
[Web 1]: http://www.cnblogs.com/lhb25/archive/2012/08/31/free-application-icon-sets.html
[10]: http://www.cnblogs.com/lhb25/archive/2012/10/19/10-free-html-admin-templates.html
[12_ jQuery Ajax]: http://www.cnblogs.com/lhb25/archive/2012/08/08/ajax-jquery-pagination-plugin-tutorial.html
[16_ HTML5 _ CSS3]: http://www.cnblogs.com/lhb25/p/flat-portfolio-website-templates-html5-css3.html
[17]: http://www.cnblogs.com/lhb25/p/effective-examples-of-startup-landing-pages.html
[Web 2]: https://github.com/lifesinger/lifesinger.github.com/issues/184
[Link 1]: http://www.cnblogs.com/lhb25/p/smarter-sticky-elements-with-jquery.html
[_ _ _]: http://www.cnblogs.com/lhb25/