作者| 罗宾·威尔奇

译者| 核子可乐

策划|丁晓云

从个人角度来看，我觉得过去几年（2016 年至2021 年）Web 开发前景一直停滞不前，但在过去的2022 年肯定会飙升。在这篇文章中，我想谈谈我所看到的最新的Web 开发趋势。我认为这波浪潮将继续吸引网络开发者的关注，我期待2023 年一切都会更新。我们直接进入正题吧。

（元）框架

单页应用程序(SPA) 和各种相关框架（React.js、Vue.js、Svelte.js 等）或多或少经历了特定的炒作周期，并且它们的实力随着多年的经验而不断增强。证明了这一点。活力。然而，基于这些解决方案的元框架的迅速崛起，导致应用程序从客户端渲染（CSR）到服务器端渲染（SSR）的明显转变。如今，无论你使用什么JavaScript 框架，总会有一些SSR 的影子。

最流行的Next.js 元框架之一基于React.js。 React 核心开发人员Andrew Clark 将2022 年发布的新版本称为“真正的React 18”。这是因为它包含了React 团队为底层库的基本构建块（悬念、流SSR 等）构建的所有电池。 Vercel（Next.js 背后的公司）还与React.js 核心团队密切合作，以创造出色的开发人员体验。

尽管许多开发者批评Next.js 和React.js 之间的关系“太密切”，但React.js 并不是不可替代的。最近被Shopify 收购的Remix 采用不同的方法（例如优先考虑Web 标准）将React.js 转换为元框架。除了冲突之外，两个框架之间还存在一些功能集成（例如嵌套路由）。

除了现代SSR领域最强大的玩家Next.js并帮助许多前端开发人员成为全栈开发人员之外，其他重要框架也值得一提。 SvelteKit（基于svelte.js 构建）和最新的1.0 版本由Vercel 和SolidStart（基于Solid.js 构建）提供支持，并且具有比React.js 更好的开发人员体验。

应用程序与渲染模式

尽管过去十年（2010-2020），网络世界一直由单页应用程序（SPA）及其客户端渲染模式（CSR）主导。React.js 和Vue.js 都是——。然而，在过去的几年里，人们对使用元框架的服务器端渲染（SSR）越来越感兴趣。在多页面应用程序(MPA) 中使用SSR 和JavaScript（jQuery、MooTools、Dojo.js 等）的历史可以追溯到2005 年到2010 年，因此从外部看，这似乎只是又一个历史循环。你可能会看到它。一时间很受欢迎。但这波浪潮的意义不仅仅在于SSR中包含了Java（例如JSP）和后来的Ruby on Rails，还在于对JavaScript的依赖增加。几年来，Next.js 一直是这一变化的核心驱动力，SvelteKit 等其他元框架也加入了这场竞争，以促进这一历史性转变。

许多云服务提供商（Cloudflare 和Cloudflare Workers、Vercel 及其边缘网络、Deno 及其Deno Deploy 等）已经在这个领域展开竞争，每个提供商都试图为最终用户提供最佳的交互时间(TTI) 体验我正在努力这样做。用户。边缘功能不仅可以加快SSG/SSR 内容的交付速度（由于到最终用户的线路较短），而且还可以将结果缓存到离用户更近的地方。

但除了性能之外，边缘计算在其他重要因素上也具有优势，例如成本。例如，利用边缘功能，客户端和服务器之间发送的大部分数据不需要在主数据中心进行处理。在物联网场景中，存在大量不相关的数据（例如内容没有变化的视频录制帧），这些数据没有实际意义，可以直接在边缘进行过滤。这节省了大量由数据传输和中央处理设施引起的日常开销。

边缘无服务器

随着无服务器（边缘位置）的出现，数据库也正在经历复兴。在使用无服务器功能时，开发人员很快就会遇到打开的数据库连接过多的问题。这是因为在新的边缘基础设施格式中，每个无服务器功能一次连接一个数据库，而不是每个服务器维护一个固定的开放连接。连接池可以很好地解决这个问题，但是用户必须自己构建连接池或者由第三方服务提供商提供。

无服务器数据库领域的热门竞争对手包括PlanetScale (MySQL)、Neon (PostgreSQL) 和Xata (PostgreSQL)。它们具有数据库分叉、模式比较和强大的搜索/分析/洞察功能。世界各地的无服务器设施仅提供边缘缓存或分布式只读数据库，以确保数据尽可能靠近用户位置，从而最大限度地减少延迟。

如果第三方服务需要分发应用程序和数据库，Fly.io 可以将所有内容打包到一个平台中。此类应用程序超越了传统数据库并推动了新的技术变革。 Railway 通常被认为是Heroku 的继任者，提供将技术堆栈部署为平台即服务(PaaS) 所需的一切。如果您正在考虑将服务链迁移到后端即服务(BaaS)，则可以使用Supabase，它是Firebase 的开源替代品，可提供应用/数据库托管、身份验证和边缘功能等功能。

数据库复兴

这一切都始于Ryan Dahl 在2009 年的一次会议上宣布Node.js。最初，Node.js 的目标只是尝试将JavaScript 与浏览器分离并在服务器端运行。但后来JavaScript 成为过去十年中最成功的Web 开发引擎。基本上，Ryan Dahl 为Node.js 开发了一个名为V8 的JavaScript 引擎（由Chrome 实现），它不需要浏览器。因此，Chrome 和Node.js 使用完全相同的JavaScript 引擎，但都有自己的JavaScript 运行时（例如Browser API 和Node API）用于彼此交互。

十年后，Ryan Dahl 宣布Deno 成为Node 的继任者，承诺为开发人员提供一个更安全、更快速的环境，其中还包括浏览器API、TypeScript 和即用型标准库。 Deno 也运行在V8 引擎上，但目前只是众多JavaScript 运行时之一。

在边缘能力的竞争领域，各个云服务提供商也在实现自己的JavaScript运行时，例如Cloudflare Workers，它专门针对自己的Cloudflare基础设施进行了优化。因此，Deno 的商业模式也开始向云服务提供商转型，创建了Deno Deploy 及其即时边缘渲染SSR 框架（最初只是概念验证）Deno Fresh。此外，像Bun 这样的独立解决方案（以在JavaScriptCore 引擎上运行而闻名，但依赖Zig 实现）也在这场JavaScript 运行时竞赛中获得了一些关注，其中速度是我收集的一个关键因素。

面对如此多的运行时选项，我相信热心的读者一定已经感受到了技术碎片化的趋势。如果没有适当的调整，它将很难支持JavaScript，就像当时的各种浏览器一样。但幸运的是，这场竞争的焦点在服务器端，不同的云服务提供商对不同的JavaScript 运行时关注点不同。为了保持我们在世界上的地位，Deno、Vercel 和Cloudflare 等各方加入了WinterCG，并宣布他们打算在JavaScript 运行时的API 互操作性方面进行合作。

JavaScript 运行时

以前，Monorepo 策略主要用于大型应用程序，其中每个项目仅包含单个版本控制存储库中的一小部分。这些小型项目单元可以是独立应用程序（例如SPA、MPA）或可重用包（例如功能、组件、服务等）。这种拆分和合并项目的做法可以追溯到2000 年代初，当时称为共享代码库。

然而，如今Monorepos 不仅仅针对大规模应用，也开始服务于中小型企业和开源项目。例如，公司可以在Monorepos 中包含不同的包，例如共享UI 组件、共享设计系统（例如可重用协作设计）以及不同领域的日常实用功能。

这些包可以直接导入到各种应用程序中。使用所有共享包的真实应用程序（例如app.mywebsite.com 客户端渲染），仅使用考虑到SEO 需求的共享设计系统包的主页/产品/登陆页面（例如服务器端渲染或静态mywebsite.com ）。 com）、使用共享UI 组件和共享设计系统包的技术文档页面（例如docs.mywebsite.com）。

Turborepo 被Vercel 收购，现在致力于在JavaScript/TypeScript 中推广Monorepo 方法。 Turborepo 帮助开发团队为Monorepo 中的所有应用程序和包创建构建管道。它最大的亮点是能够在本地机器或云中实现跨团队管道构建缓存。

Turborepo 与其他重要的Monorepo 工具（例如npm/yarn/pnpm 工作区（依赖管理）和变更集（版本控制））相结合，使开发生态系统的这一部分引起了全球Web 社区的关注。

Turborepo 的竞争对手包括Nx、Rush 和Lerna（曾一度停止维护，后来被Nx 开发商Nrwl 收购）。

Monorepo

有些人真的很喜欢这个趋势，有些人真的不喜欢它。 Tailwind CSS 是实用优先CSS 的缩影。虽然开发人员讨厌它让他们的UI 代码看起来多余，但他们喜欢它提供的出色的开发体验。作为直接消费者，开发人员可以在项目中配置一次，并立即在HTML 中使用预定义的CSS。

然而，最近服务器端渲染(SSR) 的兴起有望消除这种关于实用程序优先CSS 的爱恨分明。多年来，CSS-in-JS 解决方案（例如Styled Components (SC) 和Emotion）在现代基于组件的Web 应用程序样式中发挥了主导作用。然而，如果性能始终是SSR 领域的最高目标，那么CSS-in-JS 的存在本身就会对性能产生不利影响。这些包甚至更大（SC 为12.7 kB，Emotion 为7.9 kB）。将DOM 注入CSS 序列化也会产生额外的运行时开销。

因此，开发人员可以将实用性优先的CSS（Tailwind CSS、UnoCSS 等）与预定义的UI 组件（DaisyUI 等）结合起来，或者使用CSS 模块，其他同样流行的替代方案可能会转向更适合SSR 的解决方案，例如。作为选择运行时间/编译时间为零的CSS-in-JS 方法（例如vanilla-extract、linaria、astroturf、complied 等）。

实用工具优先的 CSS

从JavaScript 到TypeScript 的演变是不可阻挡的。毫无疑问，全栈应用程序的端到端类型安全是席卷Web 开发世界的巨大转变的核心驱动力。这个概念的实现与通信层（API）密切相关。这是因为通信层需要将类型实体（用户类型、BlogPost 类型等）从服务器桥接到客户端应用程序。

对于使用client-0 服务器通信的Web 开发，流行的选项是REST 和GraphQL。两者都可以与OpenAPI for REST 和GraphQL Code Generator for GraphQL 一起使用，为前端应用程序生成类型化架构文件。

除此之外，还有一个名为tRPC 的类型安全API 的后起之秀，它已证明自己具有作为REST/GraphQL 替代品的巨大潜力。如果您已经在使用前端和后端共享代码的TypeScript Monorepo，则tRPC 允许您将所有类型从后端导出到前端应用程序，而无需生成类型化模式。然后，前端只需使用在后台通过HTTP 连接的类型化函数来调用后端API，以进行客户端/服务器通信。未来全栈应用的整体趋势肯定会转向此类安全解决方案。代表性的有tRPC、Zod 和PrismatTanStack Router 可以在应用程序边缘提供类型安全保证。

配合 TypeScript 实现端到端类型安全

在React-land中，create-react-app（CRA）多年来一直是主流。这是当时一场小革命的开始。初学者现在有了一个随时可用的React 入门项目，不再需要在React 中配置自定义Webpack。然而，仅仅一年的时间，Webpack 很快就过时了。

尽管Vite 对于单页应用程序(SPA) 领域来说是新事物，但它可用于使用所有流行框架（例如React.js）构建入门项目。 Vite是Vue.js创始人尤玉溪的又一力作，定位为下一代前端工具。在内部，它继承了esbuild 的强大功能，并且与其他JavaScript 捆绑器相比是用GO 编写的，允许您比竞争对手（例如Webpack）更快地捆绑依赖项10-100 倍。

Vite 生态系统正在蓬勃发展，其中包括Vitest（Jest 的替代测试）等新功能以及Vercel 的Turbopack 等最近的竞争解决方案。 Turbopack 被称为Webpack 的继承者，因为它是由Webpack 的创建者Tobias Koppers 开发的。 Next.js 是Webpack 的当前用户，也是Turbopack 的开发者，因此我们期望Next.js 和Turbopack 在未来成为紧密相关的Web 组合。

构建工具

人工智能最终会消除开发人员的工作吗？这个问题仍然没有答案，但人工智能驱动的开发肯定会在2022 年成为现实。随着GitHub Copilot 的发布，开发人员现在可以在他们最喜欢的IDE 中与AI 助手配对。使用过程与常规编码或注释没有什么不同。 GitHub Copilot 自动完成详细信息以最大限度地提高代码质量。

此外，OpenAI 的ChatGPT 是一种高度通用的语言模型，在编程领域也表现良好。是的，ChatGPT 可以回答各种免费问题并产生非常可靠的开发结果。许多开发者不知不觉地减少了对Stack Overflow 的访问，转而在ChatGPT 上讨论技术问题。在大多数情况下，ChatGPT 提供了一个非常有用（尽管并不完美）的答案作为搜索引擎的替代方案。尽管存在大量SEO垃圾，甚至与开发无关的广告内容，但使用ChatGPT的体验相比传统搜索引擎有显着提升。

然而，请注意，这些短期收益可能会产生深远的影响。从宏观角度来看，人工智能创建的内容可以而且将会损害整个互联网。过去，手动创建SEO 促销内容是一个大问题。未来，没有什么可以阻止ChatGPT 以非人的效率自动生成更多SEO 垃圾。如果ChatGPT 本身继续在训练中使用这些垃圾邮件，后果将是可怕的。

还有一些我认为很重要但未进入前10 名的重要趋势。首先，Tauri 开始扩展到JavaScript/CSS/HTML 实现的桌面应用程序，作为Electron 的继承者。

的 E2E 测试替代品；Warp 与 Fig 有望成为下一代终端；CSS 容器查询则作为 CSS 媒体查询的响应式设计替代方案；最后，htmx 作为富 HTML 格式，能够不借助 JavaScript 创建出交互式用户界面。总之，以上只是我的个人整理，感兴趣的朋友不妨自行探究更多细节。
希望这次的文章能帮大家更好地了解 Web 开发生态系统的发展现状。Web 开发无界，江湖有缘再见！

原文链接：

https://www.robinwieruch.de/web-development-trends/

相关阅读：

你可以错过Web3，但不要错过Web5
云原生 AI 的资源调度和 AI 工作流引擎设计分享
TypeScript 前端工程最佳实践
复习前端：CSS
本文转载来源：
https://www.infoq.cn/article/PoZLOO8QEf98GoDzV7Nr