标题中带有 🦀 的项目，均使用 Rust 实现，与其说是下一代 Web 开发生态，倒不如说是 Rust 正在重写 Web 生态。

Web 开发主要涉及到创建和维护网站（或应用）。它通常被分为两个主要部分：

• 前端（客户端）开发：涉及到你在 Web 浏览器中直接看到和与之互动的部分。技术包括 HTML、CSS 和 JavaScript。

• 后端（服务器端）开发：这部分隐藏在幕后，包括服务器、应用程序和数据库。常用技术包括 Node.js、Ruby on Rails、Django（Python）和 Spring Boot（Java）等。

Web 技术演变

• 早期 Web：早在 20 世纪 90 年代，网站主要是静态的，只使用 HTML 进行构建。

• JavaScript 崛起：随后，JavaScript 的出现使网页变得动态，增加了互动性。

• 前端框架诞生：为了更好地组织和构建复杂的前端应用，开始出现了诸如 jQuery、AngularJS、React、Vue 等前端框架和库。

• 移动互联网：随着智能手机的普及，移动 Web 开发和响应式设计变得非常重要。这要求开发者考虑如何使应用在各种设备和屏幕尺寸上都能良好运行。

• Node.js：Node.js 的出现使得开发者可以使用 JavaScript 编写服务器端代码。

• Jamstack & Serverless：Jamstack 和 Serverless 技术成为新的开发趋势，更多的逻辑和功能被推向“边缘”。

• ...

📌 Jamstack & Serverless

Jamstack

Jamstack 是一个现代 web 开发架构的名称，由 JavaScript、APIs 和 Markup 三个词首字母组成。它主张的是一个完全分离和分层的方法来构建 web 项目：

• JavaScript：在浏览器中执行，负责所有客户端的动态交互。

• APIs：所有服务器端的操作都通过可重用的 API 进行，这些 API 可以是自定义的、第三方的或托管服务。

• Markup：静态站点生成器（如 Gatsby、Next.js 或 Hugo）用于预渲染内容。这意味着内容是在构建时而不是传统的运行时渲染，从而带来了更好的性能和安全性。

Jamstack 的主要好处是它提供了更高的性能、安全性、较低的扩展成本以及更好的开发者体验。

Serverless

Serverless 不是指没有服务器，而是指开发者不需要管理或维护服务器来运行代码。你只需要写代码并部署到 Serverless 平台，例如 AWS Lambda 或 Azure Functions，这些平台将负责运行、扩展和保障应用程序的高可用性。

在 Serverless 架构中，函数是第一公民。这意味着你的应用是由一个或多个单独的函数组成的，每个函数通常执行一个特定的任务。这些函数只在被触发时运行，并且你只为实际运行的时间付费。

Serverless 的主要优点：

• 自动扩展：根据请求量自动增加或减少资源。

• 无服务器管理：平台提供者负责所有后台基础设施。

• 成本效益：通常，只为实际使用的资源付费，而不是预先分配的资源。

总的来说，Jamstack 专注于前端，为开发者提供了一个简化和高效的方式来构建高性能、安全的 web 项目，而 Serverless 则为后端提供了一个简化的运行环境，使得开发者可以专注于代码而不是服务器或基础设施的管理。两者结合可以为开发者提供一个高效、简化的全栈开发环境。

随着 Web 生态越来越大，暴露的问题也越来越多，就导致了各种轮子层出不穷。如果让我用两个字概括的话，我认为是“更快”。更快启动，更快运行，更快开发，更快...。而一切快的前提就是从根源去解决它，下面就进入我们今天的主题，因为罗列的工具过多，所以它更像是一份工具资源清单，大家可根据项目需要自行选择（有时候选择太多也不见得是一件好事）。

构建工具链

传统的打包工具主要使用 JS 作为开发语言，因受到的限制过多，许多有能力的大牛开始尝试使用静态类型语言（如 Rust、Zig、Go 等）来重写工具链生态。在编写前端工具链方面的优势主要体现在高性能、内存安全、并发处理和跨平台能力上。

传统工具

Rollup

Rollup^[1] 是下一代 ES 模块捆绑器。可以将小块代码编译成更大、更复杂的内容，如库或应用程序。它使用标准化的 ES 模块格式的代码，而不是之前的特异性解决方案如 CommonJS 和 AMD。ES 模块让你自由且无缝地结合你最喜欢的库中最有用的单个函数。Rollup 可以为现代浏览器中更快的本地加载优化 ES 模块，或输出一个允许今天使用 ES 模块工作流的传统模块格式。

• 多格式输出：ES 模块、CommonJS、UMD、SystemJS 等。不仅为网络（Web）打包，还为许多其他平台打包（Node.js）。

• Tree-shaking：基于深入的执行路径分析，为 JavaScript 世界带来 tree-shaking，从而实现了出色的死代码消除。

• 无开销代码拆分：仅通过使用输出格式的导入机制而不是客户加载器代码，根据不同的入口点和动态导入来拆分代码。

• 强大的插件：一个易于学习的插件 API，允许你用很少的代码实现强大的代码注入和转换。被 Vite 和 WMR^[2] 采用。

• 特殊需求：Rollup 并不固执己见，许多配置选项和丰富的插件接口使它成为特殊构建流程和更高级工具的理想打包器。

• Vite 背后的打包器：在 Web 开发中，Vite 为你预配置 Rollup，提供了合理的默认设置和强大的插件，同时为你提供了一个非常快速的开发服务器。

Webpack

Webpack^[3] 是一个模块打包器。其主要目的是为浏览器使用而打包 JavaScript 文件，但它也能够转换、捆绑或打包几乎任何资源或资产。代码拆分允许按需加载应用程序的部分。通过"加载器 (loaders)"，模块可以是 CommonJs、AMD、ES6 模块、CSS、图片、JSON、Coffeescript、LESS... 以及你的自定义内容。简而言之：

• 打包 ES 模块、CommonJS 和 AMD 模块（甚至可以组合）。

• 可以创建单一的捆绑包或多个在运行时异步加载的块（以减少初始加载时间）。

• 在编译期间解决依赖关系，从而减少运行时大小。

• 加载器可以在编译时预处理文件，例如将 TypeScript 转为 JavaScript，将 Handlebars 字符串编译为函数，将图片转为 Base64 等。

• 高度模块化的插件系统，以满足你的应用程序需要做的其他任何事情。

Vite

Vite^[4] 下一代前端工具：

• 快速启动：瞬时服务器启动，基于原生 ESM 的按需文件服务，无需打包！

• HMR：闪电般的热模块替换速度，无论应用程序大小，速度始终如一。

• 开箱即用：丰富功能的支持，包括 TypeScript、JSX、CSS 等。

• 优化构建：预配置 Rollup 构建，支持多页面和库模式。

• 通用插件：Rollup-superset 插件接口在开发和构建之间共享。

• 完全类型化 API：具有完全 TypeScript 类型化的灵活程序化 API。

通过其插件 API 和带有完全类型支持的 JavaScript API，Vite 具有高度的可扩展性，它主要包括两大部分：

• 开发服务器：通过原生 ES 模块为代码源文件提供服务，拥有丰富的内置功能和惊人的快速热模块替换（HMR）。

• 构建命令：使用 Rollup 来打包代码，预先配置为输出高度优化的静态资源以用于生产。

esbuild

esbuild^[5] 是速度极快的 web 捆绑器，比传统的 web 构建工具速度要快 10-100 倍。Vite 使用 esbuild 作为其预构建依赖来提速。其主要特点：

• 不需要缓存即可达到极速

• 内置支持 JavaScript、CSS、TypeScript 和 JSX

• 针对 CLI、JS 和 Go 的简洁 API

• 打包 ESM 和 CommonJS 模块

• 打包 CSS，包括 CSS 模块

• Tree-shaking、minification^[6] 和 source maps^[7]

• 本地服务器、观察模式和插件

基于 esbuild 实现的打包工具还有 tsup^[8]，esno^[9] 等。

🦀 Turbo

Turbo^[10] 是下一代前端开发的工具链，其增量式打包器和构建系统专为 JavaScript 和 TypeScript 优化，用 Rust 编写。它包含 3 个主要部分：

• Turbopack^[11]：一个增量打包器（Webpack 的继任者）

• Turborepo^[12]：一个增量构建系统

• Turbo 引擎：低级增量计算和记忆引擎

Turbopack

凭借增量行为和适应性强的打包策略，Turbopack 为任何大小的应用程序提供了快速和灵活的开发体验。

• 增量设计：增量打包器，任务执行后不会再重复，是 Webpack 的继任者。

• 对生态系统友好：支持多种开发工具和格式，为 TypeScript、JSX、CSS 等提供开箱即用的支持。

• 极速 HMR：无论应用程序的大小如何，热模块替换（HMR）都保持快速。

• React 支持：原生支持 React 服务端组件。

• 多环境支持：能同时为多环境（如：浏览器、服务器、Edge、SSR、React 服务器组件）进行构建和优化。

• Next.js 支持：为 Next.js 的生产构建提供支持，无论是在本地还是在云中。

Turborepo

• 增量构建系统：重新构想了大公司如 Facebook 和 Google 的构建技术。

• 内容感知哈希：基于文件内容而非时间戳决定构建。

• 并行执行：最大并行性执行构建，充分利用 CPU。

• 远程缓存：与团队和 CI/CD 共享远程构建缓存以加速构建。

• 零运行时开销：不会干扰运行时代码，不触及源映射。

• 修剪子集：通过生成仅包含构建特定目标所需内容的 monorepo 的子集来加速 PaaS 部署。

• 任务管道：允许定义任务之间的关系，优化构建时机。

• Lerna 支持：你正在使用 Lerna，也可保留原本包发布工作流，并使用 Turborepo 来增强任务运行。

• 性能分析：生成构建配置文件并将其导入 Chrome 或 Edge，以了解哪些任务耗时最长。

Bun

Bun^[13] 是一个全功能的 JavaScript 工具，提供了运行时、打包器、测试运行器和与 Node.js 兼容的包管理器，旨在为 JavaScript 和 TypeScript 项目提供高速的开发、测试、运行和打包功能。

• JavaScript runtime：Bun 是一个从头开始为现代 JavaScript 生态系统打造的新 JavaScript 运行时，它有三大设计目标：

• 速度：Bun 启动迅速，运行速度快。它扩展了为 Safari 打造的以性能为中心的 JS 引擎——JavaScriptCore^[14]。随着计算转移到边缘，这点至关重要。

• 优雅的 API：Bun 为执行常见任务（如启动一个 HTTP 服务器和写文件）提供了一套高度优化的最小 API 集。

• 一站式开发体验：Bun 是一个完整的 JavaScript 应用构建工具包，包括包管理器、测试运行器和打包器。

• Node.js 的直接替代品：它原生实现了数百个 Node.js 和 Web API，包括 fs、path、Buffer 等。

• API 内置：你需要的 API 都已经内置，如启动一个 HTTP 服务器、WebSocket 服务器、读写文件、密码哈希、为浏览器打包、编写测试、文件系统路由、读取数据流、生成子进程、调用 C 语言函数等。

• 包管理器：是一个与 npm 兼容的包管理器，且安装依赖性能领先于 npm、pnpm、yarn 等。

• 极速测试：领先于其他测试框架，如：Vitest^[15]、Jest+SWC、Jest+tsjest、Jest+Babel 等。

🦀 Biome

Biome^[16] 是一个为 Web 项目设计的工具链，可以迅速格式化和纠正代码。它支持多种主流的 Web 开发语言，如 JavaScript、TypeScript、JSON 和 CSS，并且具有合理的默认设置以及简单的配置需求。Biome 将多个工具的功能集成在一起，提供连贯的代码处理、错误显示和其他体验。其目标是替代如 Babel、ESLint 和 Webpack 等主流工具。此外，Biome 在 IDE 支持上表现出色，拥有高级的解析器和错误恢复功能。

• 快速：基于 Rust 构建，并受到 rust-analyzer^[17] 启发的创新架构。

• 简单：开始时无需任何配置。当你需要时，提供丰富的选项。

• 可扩展：设计用于处理任何大小的代码库。专注于产品的增长而非工具。

• 优化：通过紧密的内部集成，我们可以复用以前的工作，任何对一个工具的改进都会改进它们所有的工具。

• 具体且信息丰富：避免模糊的错误信息，当告诉你某处有问题时，Biome 会准确地告诉你问题在哪里以及如何修复它。

• 即插即用：开箱即用，支持你今天使用的所有语言特性。对 TypeScript 和 JSX 提供一流的支持。

📌 Rome

Rome^[18] 已经在 2023.09.01 变更仓库权限为只读。Biome 作为 Rome 的官方分支，将成为 Rome 的社区继任者。

🦀 SWC

SWC^[19] (Speedy Web Compiler) 是一个用 Rust 编写的超快速 TypeScript / JavaScript 编译器。它同时支持在 Rust 和 JavaScript 中使用。也是一个用于下一代开发工具的可扩展平台，被许多流行的工具和公司采用。它可以处理现代 JavaScript 功能的代码并输出兼容所有主要浏览器的代码。

在 Vite（vite-plugin-react-swc^[20]）和 Webpack（swc-loader^[21]）中均有插件对其进行支持。它也为 Rspack 的代码解析、转换和压缩提供了支持。

📌 SWC vs Babel

SWC 在单线程上比 Babel 快 20 倍，在四核上比 Babel 快 70 倍。

🦀 Rspack

Rspack^[22] 是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生态系统的互操作性，可以被 Webpack 项目低成本集成，并提供更好的构建性能。它借鉴了众多开源项目，如 vite、esbuild、turbo 等。

• 启动速度极快: 基于 Rust 实现，构建速度极快，带给你极致的开发体验。

• 闪电般的 HMR: 内置增量编译机制，HMR 速度极快，完全胜任大型项目的开发。

• 兼容 webpack 生态: 针对 webpack 的架构和生态进行兼容，无需从头搭建生态。

• 内置常见构建能力: 对 TypeScript、JSX、CSS、CSS Modules、Sass 等提供开箱即用的支持。

• 默认生产优化: 默认内置多种优化策略，如 Tree Shaking、代码压缩等。

• 框架无关: 不和任何前端框架绑定，保证足够的灵活性。

🦀 Lightning CSS

Lightning CSS^[23] 是一个由 Rust 编写的超高速 CSS 解析器、转换器、打包器和压缩器。其特性包括：

• 极速性能，能在毫秒内完成大文件的解析和压缩。

• 提供类型化的属性值，与许多其他解析器相比，其按照 CSS 规范对所有值进行解析。

• 采用浏览器级解析器，基于 Mozilla 创造的工具构建。

• 提供高效的 CSS 压缩，包括多种优化手段，如合并属性、减少表达式、优化颜色表示等。

• 根据浏览器目标自动添加或删除厂商前缀。

• 支持 Browserslist^[24] 配置，解析现代 CSS 语法，并基于浏览器目标进行语法降级。

• 支持多种 CSS 新特性和规范，如 CSS 嵌套、自定义媒体查询、逻辑属性和多种颜色函数。

• 支持 CSS 模块，允许编译部分 CSS 模块特性。

• 提供 API，支持自定义转换插件的实现。

JS 运行时

JavaScript Runtime 是一个环境，它可以解释和执行 JavaScript 代码。当我们说“运行时”时，通常是指一个执行环境和配套的资源，这些资源可以使特定的编程语言的代码得以执行。对于 JavaScript，这个环境是如何处理 JavaScript 代码的基础。

• 解释器和编译器：JavaScript 最初是作为解释型语言设计的，意味着代码是一行一行在运行时执行的。但现代的 JavaScript 运行时，如 V8^[25]（Chrome 和 Node.js 使用）或 SpiderMonkey^[26]（Firefox 使用），使用了即时编译（JIT）技术，这意味着它们会将 JavaScript 代码转换成机器码，然后执行，以提高性能。

• 内存管理：运行时负责为变量、函数和其他结构分配内存，并在这些结构不再需要时释放内存（通常通过垃圾回收机制）。

• API 与功能集：虽然 ECMAScript^[27] 标准定义了 JavaScript 语言的核心，但实际的运行时环境通常提供了许多其他功能。例如，浏览器环境提供了操作 DOM 的方法，而 Node.js 提供了访问文件系统的方法。

• 事件循环和异步操作：JavaScript 是单线程的，但它支持事件驱动的异步编程。运行时管理一个事件循环，允许非阻塞操作（如 I/O 或定时器）在背景中运行，并在完成时调用回调。

• 宿主环境：JavaScript 可以在多种环境中运行，最常见的是 web 浏览器。但 JavaScript 运行时也可以嵌入到其他类型的应用程序中，如桌面应用程序、移动应用程序或服务器端应用程序（例如 Node.js）。

当你在浏览器中打开一个网页并运行 JavaScript 代码，或在服务器上使用 Node.js 运行脚本时，你都是在一个特定的 JavaScript Runtime 中操作。这个运行时处理了所有与代码解释、执行、内存管理和 API 访问相关的事情。

Node.js

Node.js^[28] 是一个开源的、跨平台的 JavaScript 运行时环境，允许开发者在服务器端执行 JavaScript 代码。它改变了 JavaScript 只能在浏览器中运行的观念，为开发者提供了一个高性能、可扩展的后端开发环境，并通过其丰富的模块生态系统极大地加速了开发速度。

• 基于 V8：Node.js 使用 Google Chrome 的 V8 JavaScript 引擎。这意味着它可以快速地解释和执行 JavaScript 代码。

• 事件驱动和异步 I/O：Node.js 采用事件驱动架构和非阻塞 I/O，使其在处理大量并发请求时表现得特别出色，尤其是对于 I/O 密集型任务。

• npm：Node.js 附带了 npm（Node Package Manager），这是一个包管理器，允许开发者安装、分享和分发代码。npm 提供了一个巨大的开源库生态系统，使开发者可以轻松地获取和使用第三方库。

• 模块系统：Node.js 使用 CommonJS 模块系统，让开发者可以将代码组织成可重用的模块。

• 跨平台：Node.js 可以在多种操作系统上运行，如 Windows、Linux 和 macOS。

• 广泛的应用场景：尽管 Node.js 最初是为网络应用开发而设计的，但它现在用于各种各样的应用，包括 RESTful API、实时应用、命令行工具和甚至桌面应用。

• 大型社区：Node.js 有一个庞大和活跃的社区，为其提供持续的支持和无数的第三方模块。

🦀 Deno

Deno^[29] 是下一代 JavaScript 运行时。

• 默认安全，除非明确启用，否则无文件、网络或环境访问权限。

• 提供网络平台功能和 API，例如使用 ES 模块、Web Worker 和 fetch()。

• 对 TypeScript 和 JSX 的本机支持。

• 测试、linting、格式化等开箱即用的功能。

• 使用 Rust 和 Tokio^[30] 实现高性能异步 I/O。

• 向后兼容 Node.js 和 npm。

🦀 napi-rs

napi-rs^[31] 是一个框架，用于在 Rust 中构建预编译的 Node.js 插件。这个框架利用 Rust 的性能和安全性与 Node.js 的可扩展性和生态系统相结合，提供了一个强大的工具，让开发者可以构建高效且安全的 Node.js 扩展。

它允许你完全使用 Rust/JavaScript 工具链构建插件，而不涉及 node-gyp^[32]。

node-gyp

node-gyp 是一个跨平台命令行工具，用于为 Node.js 编译原生插件模块。它是 Node.js 生态系统中用于编译和链接本地 C++ 代码扩展的主要工具。该项目之前由 Chromium 团队使用，并经过扩展以支持 Node.js 本机插件的开发（相信很多编程小白在安装依赖时，都遇到过 node-gyp 的各种报错）。

避免使用 node-gyp 可以简化和加速 Node.js 插件的开发和部署，同时还可以提供更稳定和可靠的结果。

• 简化安装：node-gyp 有一些系统依赖，如 Python 和编译工具链，这可能导致在不同的系统和环境上安装问题。避免使用它可以简化安装过程。

• 跨平台兼容性：node-gyp 需要为不同的平台（如 Windows, macOS, Linux）进行特定的配置和修补，这可能会导致跨平台的问题。直接使用 Rust 工具链可以更容易地实现跨平台兼容性。

• 更快的编译：node-gyp 会引入额外的构建步骤，可能会增加编译时间。避免使用它可以使编译更快。

• 简化工作流：如果可以完全依赖 Rust/JavaScript 工具链，那么对于那些已经熟悉这些工具的开发者来说，工作流程会更简单，更少的上手难度。

• 减少潜在的错误：每增加一个外部依赖，都可能增加错误的机会。避免使用外部构建工具如 node-gyp 可以减少出错的可能性。

• 更好的维护性：维护和更新与 node-gyp 无关的项目通常更简单，你不需要担心该工具的未来更改或与新版本的 Node.js 的兼容性问题。

构建应用

得益于 Web 生态的发展，我们的选择越来越多样化。可以使用 Web 技术构建各种在线网站，借助类似于 Electron 之类的框架构建跨平台桌面应用，或者将静态语言编译成 WebAssembly 运行在 Web 浏览器。

Electron

Electron^[33] 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用的框架。

• Web 技术：Electron 嵌入了 Chromium^[34] 和 Node.js，使 web 开发者能够创建桌面应用程序。

• 跨平台：兼容 macOS、Windows 和 Linux，Electron 应用在所有支持的架构上跨三个平台运行。

• 开源：Electron 是一个由 OpenJS 基金会维护的开源项目，并得到了一个活跃的社区贡献者的支持。

🦀 Tauri

Tauri^[35] 使用 Web 前端（HTML、CSS、JavaScript）技术构建更小、更快、更安全的桌面应用程序。因使用系统 WebView 来显示界面，所以可以做到超级小的打包体积（一般 hello world 应用在 3M 左右）。被视为是 Electron 的替代品。Tauri v2.0 支持构建移动端应用（iOS 和 Android）。了解更多 Electron vs Tauri。

lencx 建议

从我的个人使用体验来说，Tauri API 不如 Electron 丰富。如果你的应用对 UI 显示不存在强依赖关系，主要以 Rust 实现功能为主，那么 Tauri 是适合你的。如果你的应用主要侧重于界面 UI 和交互，Tauri 因 API 较少会显得比较吃力，系统 WebView 也会出现很多兼容性问题（通常比较难解决），则更推荐使用 Electron 来构建应用。有时候用打包体积来换取稳定性，在我看来是值得的。

问题不会消失，只会被转移。当你选择了小体积，就要忍受 API 不足以及 WebView 兼容性所带来的痛苦。

Astro

Astro^[36] 是专为提高速度而设计的一体化 Web 框架。它注重服务器端渲染，提供出色的默认性能，并设计得非常易于使用和扩展。

• 目标和设计：Astro 旨在为内容丰富的网站提供一个专门的框架，它不同于为 Web 应用程序设计的框架。

• 核心优势：

• 以内容为中心：主要为内容驱动的网站设计，如博客、文档站点等。

• 服务器优先：侧重于服务器端渲染，与传统框架相似，但使用了前端开发者熟悉的技术。

• 默认快速：设计使其默认具有优秀的性能，特别是在内容驱动的网站上。

• 易于使用：尽可能简单，支持多种前端框架和语言，让开发者能够选择自己熟悉的工具。

• 功能齐全且灵活：提供了构建网站所需的一切，从组件到路由到资源处理等，而且还可以很容易地扩展。

• 与其他框架对比：Astro 与为 Web 应用程序设计的框架有所不同，如 Next.js。如果你的项目更像一个应用程序，Astro 可能不是最佳选择。

• 开发友好性：被设计成对所有 Web 开发者友好，不论他们的技能水平或背景如何。此外，由于它是在服务器上渲染的，所以避免了许多常见的前端开发复杂性。

• 灵活性和集成：Astro 非常灵活，并支持 100 多种集成，从前端框架到 CMS 到托管平台。

Astro Islands

Astro 群岛（又称组件群岛）是 Astro 开创的一种新 Web 架构模式。“群岛架构”由 Etsy 前端架构工程师 Katie Sylor-Miller^[37] 于 2019 年首次提出，并由 Preact 的作者 Jason Miller 在 Islands Architecture^[38] 文章中进行了扩展。

“Astro 群岛“指的是静态 HTML 中的交互性的 UI 组件。一个页面上可以有多个岛屿，并且每个岛屿都被独立呈现。你可以将它们想象成在一片由静态（不可交互）的 HTML 页面中的动态岛屿。

在 Astro 中，你可以使用任何被支持的 UI 框架（比如 React, Svelte, Vue）来在浏览器中呈现群岛。可以在一个页面中混合或拼接许多不同的框架，或者仅仅使用自己最喜欢的。而这种架构模式依赖于 partial（局部）或 selective hydration（选择性混合）技术。

WebAssembly

WebAssembly^[39]（缩写为 Wasm）是一种为基于堆栈的虚拟机设计的二进制指令格式。Wasm 作为编程语言的便携式编译目标而设计（如：C/C ++，Rust 等），使得它可以在 web 上为客户端和服务器应用程序进行部署。

• 高效：设计为高效的二进制格式，目标是以本机速度执行。

• 安全：提供一个内存安全的、被沙盒化的执行环境，遵循浏览器的安全策略。

• 可调试：可以以文本格式显示，便于调试和手工编写。

• 兼容性：旨在与 web 保持向后兼容性，可与 JavaScript 互操作，并支持非 web 嵌入。

🦀 Yew

Yew^[40] 是一个现代的 Rust 框架，利用 WebAssembly （Rust 编译为 Wasm）创建多线程的前端 web 应用。

• 具有一个宏，用于声明带有 Rust 表达式的交互式 HTML。对于有使用 React 中 JSX 经验的开发者，使用 Yew 会感觉非常亲切。

• 通过最小化每次页面渲染的 DOM API 调用，并使其易于将处理卸载到后台的 web workers，从而实现高性能。

• 支持 JavaScript 互操作性，允许开发者利用 NPM 包并与现有的 JavaScript 应用程序集成。

结束语

以上就是我眼中的 Web 生态，在新技术的加持下，势必会带来全新的开发体验（对 Rust 感兴趣的朋友可查看 Rust 在前端）。当你把学习新技术作为一个任务去完成时，往往是痛苦的。学会用兴趣驱动学习，每天感受自己的进步，比较容易获得成就感。

References