14,235 讀數

使用 Rust 和 WebAssembly 构建简单的 Web 应用程序：分步指南

经过 Max Zhuk8m2023/10/26

太長; 讀書

学习使用 Rust 和 WebAssembly 构建高性能 Web 应用程序。

featured image - 使用 Rust 和 WebAssembly 构建简单的 Web 应用程序：分步指南

介绍

您是否曾对 JavaScript 的性能限制感到沮丧？你不是一个人。随着 Web 应用程序变得越来越复杂，对高性能解决方案的需求也变得更加明显。 Rust 和 WebAssembly 是这两种技术，不仅保证性能，而且保证安全性和效率。在本文中，我们将逐步介绍使用Rust和 WebAssembly 构建简单 Web 应用程序的过程。

为什么选择 Rust 和 WebAssembly？

什么是铁锈？

Rust 是一种系统编程语言，旨在提供内存安全、并发性和性能。凭借其强大的类型系统和所有权模型，它旨在消除由空指针、缓冲区溢出和数据竞争引起的常见错误。这使得 Rust 成为构建可靠且高效的软件的理想选择。

铁锈的优点

内存安全：Rust 的所有权模型确保变量具有单一所有者，从而防止内存泄漏和未经授权的数据访问。
性能：Rust 专为速度而设计，可与 C 和 C++ 等语言紧密竞争。
并发性：Rust 的语言设计使得编写并发代码变得更加容易，使其具有高度的可扩展性。
丰富的生态系统：凭借不断增长的包存储库 Cargo，Rust 为 Web 开发、数据操作等提供了广泛的库和框架。

什么是 WebAssembly？

WebAssembly（通常缩写为 wasm）是一种二进制指令格式，可用作 C、C++ 和 Rust 等高级语言的编译目标。它被设计为一种可移植、高效的代码格式，可在 Web 浏览器上实现接近本机的性能。

WebAssembly 的优点

性能：WebAssembly 代码利用通用硬件功能以接近本机的速度执行。
安全性：WebAssembly 被设计为安全和沙箱，在与主机系统分开的受保护环境中执行。
可移植性：WebAssembly 是平台无关的，这意味着它可以在任何具有兼容 Web 浏览器的计算机上运行。
互操作性：WebAssembly 模块可以轻松集成到 JavaScript 应用程序中，从而允许您利用现有的 Web 技术。

Rust 和 WebAssembly 的协同作用

将 Rust 的性能和安全功能与 WebAssembly 的速度和可移植性相结合，为 Web 开发创建了强大的二人组。这就是他们合作得如此顺利的原因：

优化的性能：Rust 专注于零成本抽象，确保您的 WebAssembly 模块精简且快速。
安全性：Rust 和 WebAssembly 都优先考虑安全执行，使您的 Web 应用程序更加可靠。
易于集成：Rust 对 WebAssembly 具有一流的支持，可以轻松地将 Rust 代码编译为 wasm 并将其集成到您的 Web 应用程序中。

通过利用 Rust 和 WebAssembly，您不仅可以跟上现代 Web 开发趋势，而且还可以跟上。您始终处于领先地位。

设置您的开发环境

在深入研究代码之前，设置适合 Rust 和 WebAssembly 的开发环境至关重要。这将确保您拥有所有必要的工具和库可供使用，从而简化开发过程。

安装 Rust

下载 Rust 安装程序：访问Rust 官方网站并下载适合您操作系统的安装程序。
运行安装程序：打开终端并运行以下命令来安装 Rust 及其包管理器 Cargo。
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
验证安装：要确保 Rust 已正确安装，请打开一个新的终端窗口并运行：
```
 rustc --version
```
您应该会看到 Rust 编译器版本作为输出。

安装 wasm-pack

wasm-pack是一个用于组装和打包面向 WebAssembly 的 Rust 箱子的工具。

安装 wasm-pack ：打开终端并运行以下命令：

 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

验证安装：通过运行以下命令检查wasm-pack是否已安装：
```
 wasm-pack --version
```

安装 Node.js 和 npm

Node.js 和 npm 对于管理依赖项和运行 Web 服务器至关重要。

下载 Node.js ：访问Node.js 官方网站并下载适合您的操作系统的安装程序。
运行安装程序：按照安装提示安装 Node.js 和 npm。
验证安装：打开终端并运行以下命令来检查 Node.js 和 npm 是否已安装：
```
 node --version npm --version
```

设置您的 IDE

虽然您可以使用任何文本编辑器进行 Rust 和 WebAssembly 开发，但Visual Studio Code等 IDE 提供 Rust 扩展，提供代码完成、linting 和调试等功能。

安装Visual Studio Code ：从官方网站下载并安装。
安装 Rust 扩展：打开 Visual Studio Code，转到扩展市场并通过 rust-lang 搜索“Rust”扩展。安装它以增强 Rust 支持。

macOS 用户注意：本指南中提供的安装命令与 macOS 兼容。如果您遇到任何问题，请参阅相应的官方文档以获取特定于平台的说明。

创建一个简单的 Rust 程序

在本节中，我们将创建一个 Rust 程序来计算给定数字的阶乘。这将使我们有机会探索 Rust 的一些功能，例如函数、循环和条件语句，同时创建计算密集型程序。

初始化 Rust 项目

创建新的 Rust 库：打开终端并运行以下命令来创建新的 Rust 库项目。
```
 cargo new --lib factorial_calculator
```
导航到项目目录：
```
 cd factorial_calculator
```

编写阶乘函数

打开lib.rs文件：在文本编辑器或 IDE 中导航到src/lib.rs文件。
实现阶乘函数：添加以下 Rust 代码来实现阶乘函数。
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
在这里，我们定义了一个名为factorial函数，它接受u32 （无符号 32 位整数）作为参数并返回u32 。该函数使用递归来计算给定数字的阶乘。

编译为 WebAssembly

编译 Rust 代码：现在我们有了阶乘函数，让我们将其编译成 WebAssembly 模块。在终端中运行以下命令：
```
 wasm-pack build
```
验证构建：运行命令后，您应该在项目文件夹中看到一个pkg目录。在其中，您将找到 WebAssembly 模块 ( factorial_calculator_bg.wasm ) 和生成的 JavaScript 绑定 ( factorial_calculator.js )。

现在你就得到了它！您刚刚创建了一个 Rust 程序，用于计算数字的阶乘并将其编译到 WebAssembly 模块中。这不仅展示了 Rust 的功能，还为将此逻辑集成到 Web 应用程序中奠定了基础。

将 WebAssembly 集成到 Web 应用程序中

现在我们有了一个用于计算阶乘的 WebAssembly 模块，让我们将其集成到一个简单的 Web 应用程序中。我们将创建一个基本的 HTML 界面，用户可以在其中输入数字，然后使用 Rust 生成的 WebAssembly 模块显示该数字的阶乘。

HTML 和 JavaScript 设置

创建 HTML 文件：在项目目录中创建一个名为index.html的新文件，并添加以下 HTML 代码：

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

在这里，我们创建一个简单的界面，其中包含数字输入字段、触发计算的按钮以及显示结果的段落。

创建 JavaScript 文件：创建一个名为bootstrap.js的新文件并添加以下 JavaScript 代码：
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
在此脚本中，我们动态导入 WebAssembly 模块并定义一个名为calculateFactorial的函数。该函数从输入字段读取数字，从我们的 WebAssembly 模块调用factorial函数并显示结果。

运行网络应用程序

安装 Web 服务器：如果您没有本地 Web 服务器，可以使用 npm 安装一个：
```
 npm install -g http-server
```
运行 Web 服务器：导航到终端中的项目目录并运行：
```
 http-server .
```
打开 Web 应用程序：打开 Web 浏览器并导航到http://localhost:8080 。您应该会看到阶乘计算器 Web 应用程序。输入一个数字，单击“计算”，就会显示该数字的阶乘。

就是这样！您已成功将 Rust 生成的 WebAssembly 模块集成到简单的 Web 应用程序中。这展示了将 Rust 与 WebAssembly 相结合来创建高性能 Web 应用程序的强大功能和灵活性。