Logo

菜单

发布于 2026-01-06 3 阅读
0

Web 开发的第三个时代：结语

网络开发的第三个时代

结语

封面图片：查尔斯·达尔文1868年4月21日笔记本中的一幅灵长类动物起源草图

网络发展的第三个时代是指第二次浏览器战争之后的时期，即微软 Internet Explorer 失去其在网络浏览器市场的主导地位之后（2012 年至今）。

后现代主义时期与第二次浏览器战争

现代主义和后现代主义时期之间的过渡，以各种新的 Web 框架和实践层出不穷、快速发展和迅速衰落为标志。非命令式编程范式成为主流：异步、响应式、函数式……基于 JavaScript 的AngularJS被完全重写为Angular 2，一个基于TypeScript 的框架。在 2015 年至 2020 年间，由谷歌支持的这个框架发布了 9 个版本，平均每 6 个月就发布一个版本！在 2016 年至 2020 年间，Facebook 发布了其React框架的 3 个主要版本和不少于 20 个次要版本，其中 16.8 版本引入了React Hooks ，带来了重大的范式转变。2014年发布的Vue.js很快成为继 Angular 和 React 之后的第三个主要前端选择。新的框架和库几乎每天都在诞生。 Web 开发人员过去常常跟随浏览器发布新功能，而现在他们可以使用Babel等转译工具抢占先机，将尚未支持的语言特性、Web API（有时是实验性的！）以及 TypeScript 等新语言无缝转换为向后兼容的代码。

在前端，现代主义单页应用（SPA）仍然占据主导地位，然而随着其普及，这种模式的缺陷也日益凸显：SPA 强制要求客户端脚本，启动时必须下载大量资源，对于速度较慢或较旧的 Web 客户端，会出现令人头疼的“白屏死机”，不支持深度链接，无法被搜索引擎索引，而且对于低端终端（例如手机或智能电视）来说，资源消耗往往过高，更不用说在无法升级的系统上使用过时浏览器了。简而言之，SPA 模型的基本原则与 Web 的核心理念——优雅降级——直接相悖。

后现代主义时期也见证了移动网络的兴起。2007年，苹果公司发布了第一代iPhone，并搭载了基于WebKit的Safari浏览器，但当时移动网络的使用率还很低。到了2015年，随着移动网络浏览器市场份额增长至30%，谷歌宣布了“移动末日” （Mobilegeddon），对其排名算法进行了重大调整，以更有利于移动端的网站，并采用基于人体工程学和性能的新指标。性能审核成为Web开发人员的日常工作，在争夺谷歌搜索结果首页排名的竞争中，交互时间（TTI）至关重要，甚至关乎生死。

面对这种新现实，前端框架开始引入性能改进，例如提前编译（AoT） ，并以反转工作流程和稍作品牌重塑的方式重新引入了过去经典的服务器端渲染（SSR）模型（例如， Angular Universal就是Angular组件的 SSR ），同时还重新发明了自 Web 诞生之初就存在的技术：懒加载和代码分割等特性，普通网页可以免费获得，但单页应用（SPA）却需要专门设计才能实现。Web 开发兜了一个圈，旧事物变成了新事物，只是变得更加复杂了。

移动革命也对后端架构产生了重大影响。以往的单体后端难以应对新型移动应用带来的海量流量。微服务架构将单体架构拆分成职责细化​​的独立进程，分布在大型集群或云服务上，并通过专用中间件进行协调。此外，Web客户端也越来越依赖第三方服务进行社交认证或使用Firebase等Web原生数据库。

后现代主义时期激烈的竞争迫使小型浏览器厂商破产或被迫采用竞争对手的引擎，损害了网络客户端的多样性。Opera在 2013 年放弃了自家的Presto引擎，转而使用谷歌的WebKit引擎，不久后又被Blink 引擎取代。即使是拥有市面上最好的引擎之一Gecko 的Firefox也未能幸免。到了 2020 年，网络仍处于后现代主义时期，网络生态系统的关键部分如今都掌握在谷歌、苹果、Facebook 和亚马逊等大型科技公司手中：从前端框架到云服务，从移动平台到网络浏览器，每家公司都在推行各自的战略。JavaScript 已成为世界上最流行的编程语言，网络引擎的速度也达到了前所未有的高度。然而，JavaScript 生态系统的指数级增长以及后现代主义网络模型的日益复杂，使许多开发者陷入了近乎精疲力竭的状态，这种现象被称为“ JavaScript 疲劳”。

里程碑：

标志性软件：

后现代主义网络模型

后现代主义 Web 应用程序的设计目标是在海量流量和来自各种客户端的情况下进行扩展，它在现代主义 Web 模型的基础上进行了改进，同时解决了其不足之处。

后现代主义 Web 客户端专注于提升以用户为中心的指标，例如交互时间 (TTI)，尤其是在低端设备上，为此采用了诸如预编译 (AoT)之类的技术。应用程序代码使用非命令式编程范式，例如函数式编程和响应式编程。构建工具还会添加指标和预算，以限制低带宽移动客户端的打包资源大小，而延迟加载和代码分割等其他技术则有助于进一步缩短页面初始加载时间。Service Worker 则有助于在后台下载和缓存资源以供离线使用。

在服务器端，后现代主义 Web 框架重新引入了一些经典的 Web技术，例如服务器端渲染 (SSR) ，以提升搜索引擎优化 (SEO) 和网站发现度。传统 Web 服务器的许多职责被委托给独立的服务：内容分发网络 (CDN)用于静态 Web 资源，单点登录服务器 (SSO)用于身份验证等等。这些服务可以与后端服务器部署在同一位置，也可以由第三方提供。后端本身可以拆分为微服务，以实现应用程序子域之间的非对称扩展。复杂性从应用程序代码转移到了服务编排和基础设施。

核心价值：可扩展性

主要特点：

  • 支持服务器端渲染 (SSR) 和集成工具链的前端框架
  • 具有编译时优化的移动友好型单页应用程序
  • 基于 OAuth 的登录
  • 使用基于令牌的身份验证（例如 JWT）的 Web 服务
  • 模块化、分布式后端，带有编排中间件

新古典主义时期

在网络开发行业的另一端，21世纪初涌现出一些新的解决方案，旨在回归网络昔日的简洁之美。与古典时期类似，新古典主义时期以内容创作为中心，而现代主义和后现代主义时期则侧重于应用程序开发。博客成为这一复兴的主要推动力：从2003年Blogger平台被收购时寥寥无几的博客，到如今博客圈呈指数级增长，每天发布数亿篇博文，博客数量高达数亿。与此同时，WordPress和Drupal等内容管理系统（CMS）也被越来越多地用于网站建设。到2020年，大约三分之一的网站都运行在WordPress平台上。

为了应对现代主义和后现代主义网站对JavaScript 的过度依赖，许多 Web 开发者开始寻求客户端单页应用（SPA）模式和服务器端传统博客平台的替代方案。前者过度依赖客户端脚本，这与 Web 赖以构建的“优雅降级”原则背道而驰；后者在服务器端资源消耗过高，需要数据库存储和服务器端渲染（SSR）模板系统，而​​如今网络流量巨大，环保意识日益增强。

新古典主义时期是对网络最初愿景的回归，即网络浏览器既是客户端又是创作工具。网络内容创作应该面向所有人开放，而不应仅限于专业开发人员。新增功能应该易于添加。第三方库应该易于集成。工具应该简单易用，易于理解。框架不应过度设计以适应通用应用程序开发，而应专注于特定目标和功能。构建过程及其输出应该是透明且可控的。后端和网络服务应该仅在必要时使用。网站应该能够优雅降级。

Jekyll于 2008 年发布，是首个将传统网页资源生成原则与现代技术和工具相结合的现代静态网站生成器 (SSG)。只需编写一些Markdown文件（一种比 HTML 更易于编写的文本格式），用户几乎无需任何努力，即可从现成模板或自定义模板生成一个完整、现代且美观的网站，并将其托管在Netlify等价格低廉的静态网站托管服务上。这些模板易于修改，可以根据个人喜好进行调整，添加新功能，或集成评论系统等第三方服务。Web 开发人员可以利用自身技能编写模板，并将他们的 SSG 博客打造成专业的作品集。随后，其他工具也相继出现：Hugo和Eleventy等基础 SSG采用类似 Jekyll 的模型，而Gatsby、Next.js或VuePress等高级 SSG则通过从静态内容生成动态网站，弥合了 SPA 框架和 CMS 之间的鸿沟。静态网站生成器（SSG）最初只是一个带有命令行界面和 Git 工作流的开发者工具，如今已发展成为完整的发布链，能够从源内容仓库持续交付到托管服务。在线一键安装和类似 CMS 的编辑器进一步推动了这一模式的发展。

在服务器端，云计算的兴起催生了函数即服务 (FaaS) 模型，也称为无服务器计算。AWS Lambda于 2014 年推出，成为首个提供按需付费、自动扩展和支持多种运行时环境的正式版 FaaS 服务。AWS Lambda 定义了一种后端架构模型，将单体甚至微服务服务器进程拆分为无状态、生命周期短且可独立扩展的函数。无服务器模型很快成为一种低成本、便捷的方式，可将服务器端代码添加到静态网站中。

里程碑：

标志软件

新古典主义网络模型

新古典主义网络以内容创作为核心。它并不排斥现代工具和技术，而是以明智且精简的方式加以利用。它也承认网络生态系统的新现实：移动网络客户端的普及和网络流量的指数级增长。为此，它采用静态网页模型，其中网页资源要么直接由用户创作，要么由静态站点生成器 (SSG)根据模板和原始内容文件（例如Markdown文件）生成，然后存储在静态 HTTP 服务器或内容分发网络 (CDN)上。如有需要，可以添加动态功能作为客户端脚本，后端逻辑可以实现为托管在 AWS Lambda 或 Google Functions 等云端 FaaS 服务上的无服务器函数。最终生成的网站符合最新的 Web 标准和实践，甚至可以采用单页应用(SPA)的形式，尽管大多数静态网站为了获得更好的SEO效果，仍然采用传统的多页应用 (MPA)模式。

JAMStack 模型由静态站点生成、客户端 JavaScript 增强、CDN 上的静态托管、无服务器后端和第三方 API 组合而成。

核心价值：内容即代码

主要特点：

  • 源内容使用 Markdown 等平面文件格式，并使用 Git 等版本控制软件进行管理。
  • SSG 从源内容生成 Web 资产
  • 托管在静态Web服务器和CDN上的Web资产
  • 发布方式可以是手动的，也可以是借助 CI/CD 软件流水线实现的自动化。
  • 如有需要，后端将以托管在云服务上的无服务器函数的形式提供。
  • 客户端代码可以访问第三方服务和第三方API。

后现代主义时期

随着 Web 应用程序的发展壮大和复杂性的增加，前端框架虽然使这种复杂性变得可控，但自身也变得复杂起来。然而，后现代主义时期最显著的损失是可读性。Web 一直以来都是一个透明的平台。在网站由开发者手工打造的时代，其源代码对所有人开放。我们这些 Web 开发者中，又有多少人是通过阅读网站源代码来学习编程的呢？后现代主义的 Web 不再是人类可读的，而是机器可读的：它经过转译、摇树优化、压缩、打包和分发，最终变成了一堆难以理解的关键字和特殊字符。而可读性的降低也带来了学习的难度。Web 开发不再关注 Web 标准，而是要在最短的时间内掌握最流行框架的复杂细节，因为这些框架的更新迭代速度如此之快，以至于你常常不得不放弃旧版本的功能和实践，转而学习新版本。由于多个框架难以在同一个应用程序中共存，选择合适的框架已经成为一项职业选择。网络不再是一个平台，而是各种竞争技术的目标，就像中世纪的黑暗时代一样。

后现代主义网络是网络开发史上最新的迭代版本。它摒弃了框架单一化以及现代主义和后现代主义模式不可持续的发展速度，转而采用网络原生解决方案，并秉持着一个简单的理念：使用平台。网站和应用程序不应采用通用的、功能齐全的框架，而应根据需要聚合和集成特定功能的解决方案。但最重要的是，它们应该具有弹性、包容性和环境友好性，同时保持最小的资源占用、可控的复杂性和透明的依赖关系。

后现代主义承认，许多前端框架的理想特性是在Web平台缺乏原生支持的时代设计的，但此后新的标准不断涌现，随着Web的演进和功能的增强，许多常用的开发工具和实践正逐渐过时，甚至适得其反。新的ECMAScript语言特性使原生JS开发者的体验更接近TypeScript等转译语言。所有主流浏览器对ECMAScript模块（ESM）的支持，使得无需构建和打包的工作流程得以实现，其生产力与旧版开发服务器不相上下：例如，Snowpack支持实时重载、热模块替换（HMR）等功能。而Skypack、unpkg和cdnjs等服务则允许将第三方npm模块直接集成到网页脚本元素中，无需在本地安装。摆脱依赖和工具链的开发方式再次成为可能。

在客户端，随着Web Components 的出现，不再需要单体式的组件框架。像Polymer和Ionic这样的 Web Components 库可以与任何前端框架甚至纯 HTML 一起使用。微前端模型越来越受欢迎。我们不鼓励使用会重复原生 Web 功能的脚本式做法，例如 CSS-in-JS 和动画。

Service Worker API通过将备受期待的主线程中的技术代码卸载到专用线程，进一步增强了客户端模型：离线模式、缓存、预取、持久化、推送通知等功能，现在都可以更高效地实现，并遵循渐进增强原则。Web应用清单通过应用图标、安装、沙盒执行、后台和离线模式等，使 Web 应用更接近原生桌面和移动应用。这些技术的结合构成了渐进式 Web 应用 (PWA) 模型的核心。此外，随着WebAssemby (Wasm)作为 C 等系统语言的编译目标，Web 最终成为一个真正通用的应用平台。

Svelte于 2016 年发布，它融合了现代主义、后现代主义和新古典主义三种 Web 模型。Svelte 将前端框架的组件化开发模式与静态站点生成器 (SSG) 的功能相结合，以编译器的形式生成不依赖框架的静态 Web 资源，这些资源仅依赖于标准的 Web 特性。从这个意义上讲，它是第一个元现代 Web 框架。2020 年，Basecamp发布了Hotwire（HTML Over The Wire），这是一套用于为传统服务器端渲染 (SSR) 应用带来类似单页应用(SPA)增强功能的技术，例如：页面局部更新、客户端导航历史记录、AJAX、服务器推送等。Hotwire 也体现了元现代性，因为它将渐进增强技术应用于现有模型。

里程碑：

标志性软件：

元现代主义网络模型

渐进增强是元现代主义 Web 模型的核心。网页应尽可能依赖原生 Web 功能，并可根据具体情况提供 polyfill。禁止使用与原生 Web 功能重复的应用程序或第三方代码。

客户端脚本是可选的。一些关键功能可以采用客户端脚本的方式实现，但前提是这些功能必须也能通过其他方式（例如服务器端处理）提供给功能不足的客户端，例如当脚本功能被禁用或受限时。前端和后端框架也是可选的。对第三方软件的依赖必须尽可能少。Service Worker是实现非必要功能和性能增强的理想选择，它不会阻塞主客户端线程。

理想的工作流程是无需构建的。复杂的构建流程和工具链是可选的，即使需要，也必须做到透明、可复现且具有弹性。使用代码生成工具时，生成的代码最好是易于阅读的，但这仅仅是为了便于学习。

应用程序必须具有包容性。并非所有浏览器都是常青浏览器。并非所有应用程序都需要大规模扩展。对于许多应用程序来说，服务端渲染 (SSR)是一个完全合适的模型。核心功能应该对所有客户端可用，无论其性能和功能如何。非必要功能的实现应遵循渐进增强原则。

核心价值观：可持续性

主要特点：

  • 如果可能的话，采用无需构建、无需打包的前端开发方式。
  • 适用于 NoScript 客户端的 SSG 或 SSR
  • 没有前端框架
  • 用于动态增强的 Web 组件或微前端
  • 客户端代码是原生 JavaScript 或转译为 ES 模块。
  • 依赖项可以自行托管，也可以直接从 CDN 加载。
  • Service Worker 用于非必要增强功能：离线/后台模式、缓存、预取、弹性等。
  • PWA 模式的应用程序清单

结语

Web 开发的历史丰富而复杂，有时甚至充满冲突和争议。这里介绍的所有 Web 开发模型，没有哪一种可以自诩比其他模型更“原生于 Web”，即使某些模型更接近最初的愿景，Web 平台也足够强大，能够容纳所有模型。每种模型都有其优势、劣势、支持者、狂热拥护者和反对者。Web 开发没有唯一的“真理”，只有工具箱里的各种工具。选择合适的工具来完成合适的工作。

PS：如果您还没有阅读过本系列的其他文章，请不要忘记阅读！

文章来源：https://dev.to/fredericbonnet/the-third-age-of-web-development-kgj
将文件复制到正在运行的 Docke...
Kafdrop - 开源 Kafk...