2023 年 10 个前端 Web 发展趋势总结！( 三 ) _前端

JavaScript 运行时JavaScript Runtime 始于 Ryan Dahl 在 2009 年的一次会议上宣布 Node.js 。最初是一项将 JavaScript 与浏览器解耦并使其可在服务器上使用的实验，后来成为过去十年 JavaScript 成功故事的最大推动力之一。本质上，Ryan Dahl 在 Node.js 中使用了名为 V8（由 Chrome 实现）的 JavaScript 引擎，而无需浏览器本身。因此，Chrome 浏览器和 Node.js 使用相同的 JavaScript 引擎，但有自己的 JavaScript 运行时（例如浏览器 API 与 Node API）与之交互。
十年后，Ryan Dahl 宣布 Deno 作为 Node 的继任者，承诺为开发人员提供一个更安全、更快速的环境，其中包含类似浏览器 API、TypeScript 和开箱即用的标准库。Deno 也运行在 V8 上，但它只是目前众多 JavaScript 运行时之一。

文章插图

在边缘功能的竞争领域，许多云提供商实现了自己的 JavaScript 运行时（例如 Cloudflare Workers），该运行时针对自己的基础设施（例如 Cloudflare）进行了大量优化。因此，Deno 的业务模型也正在通过 Deno Deploy 及其名为 Deno Fresh 的边缘渲染 SSR 框架（最初作为概念验证）成为云提供商。像 Bun 这样的云提供商独立解决方案已然成为最近最快 JavaScript 运行时竞赛中的另一个热门产品。
curl -fsSL https://bun.sh/install | bash开发者看到由于运行时不同而导致 JavaScript 领域存在大量碎片。如果事情变得混乱，开发者最终会遇到与多年来浏览器中碎片化的 JavaScript 支持相同的情况，但这次在服务器上，当部署在不同的云提供商上时，并非所有 JavaScript 都可以在运行时之间得到平等的支持。因此，所有利益相关者（例如 Deno、Vercel、Cloudflare）都加入了 WinterCG，就其 JavaScript 运行时之间的 API 互操作性进行协作。
monorepos过去，monorepos 主要用于大型应用程序，其中一个项目在一个版本控制存储库中包含较小的项目。这些较小的项目中的每一个都可以是从单个应用程序（例如 SPA、MPA）到可重用包（例如功能、组件、服务）的任何内容。组合项目的做法可以追溯到 2000 年初，当时称为共享代码库。

monorepo 是一个版本控制的代码存储库，包含许多项目。虽然这些项目可能是相关的，但它们在逻辑上通常是独立的，并由不同的团队运行。Monorepos 可以达到巨大的尺寸。例如，谷歌理论上拥有有史以来最大的代码存储库，每天有数十个提交，超过80 TB，其他使用 Monorepos 的公司还有微软、Facebook和Twitter 。

然而，如今，monorepos 不仅适用于大型应用程序，而且也适用于小公司和开源项目。例如，公司可以在单一存储库中拥有各种包，包括共享 UI 组件、共享设计系统（例如可重用协作设计）以及各自领域的常用实用程序功能。
这些包可以导入到各种应用程序中：使用所有这些共享包的实际应用程序（例如具有客户端渲染的 App.mywebsite.com）、主页/产品/登陆页面（例如具有服务器端渲染的 mywebsite.com）或静态站点生成）考虑到 SEO 仅使用共享设计系统包，以及使用共享 UI 组件和共享设计系统包的技术文档页面（例如 docs.mywebsite.com）。

文章插图

Turborepo 被 Vercel 收购再次引发了 JavaScript/TypeScript 中的 monorepo 炒作。Turborepo 允许团队为 monorepo 中的所有应用程序和包创建构建管道，包括在本地计算机上的管道内或跨团队的云中缓存构建。Turborepo 与其他重要的 monorepo 工具（例如 npm/yarn/pnpm 工作区（依赖管理）和变更集（版本控制））相结合，使该工具链成为今年值得关注的领域。
Turborepo 的竞争对手有 Nx、Rush 和 Lerna（有一段时间没有维护，后来被 Nx 的公司 Nrwl 收购）。
UTILITY-FIRST cssTailwind CSS 是实用优先 CSS 的典型代表。虽然一方面开发人员讨厌它在 UI 代码中显得冗长，但另一方面开发人员却喜欢它出色的 DX 。作为开发人员，可以在项目中配置一次，并立即在 HTML 中使用其预定义的 CSS 。

文章插图

不过，随着最近服务器端渲染 (SSR) 的兴起，这种对实用性优先 CSS 的情况有所改变。几年来，CSS-in-JS 解决方案（例如 Styled Components (SC) 和 Emotion）已成为现代基于组件的 Web 应用程序样式设计的主流力量。然而，如果 SSR 领域的性能是主要目标之一，那么 CSS-in-JS 会带来负面影响：包大小增加（SC 为 12.7kB，Emotion 为 7.9kB），更重要的是由于 CSS 序列化之前的运行时开销将其插入到 DOM 中。比如下面的 JSS 的代码示例：