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

Posted on by

介绍

你有没有发现自己对 JavaScript 的性能限制感到沮丧？你并不孤单。随着 Web 应用程序变得越来越复杂，对高性能解决方案的需求也变得更加明显。进入 Rust 和 WebAssembly——这两种技术不仅保证了性能，还保证了安全性和效率。在本文中，我们将介绍使用 Rust 和 WebAssembly 构建简单 Web 应用程序的过程。

为什么选择 Rust 和 WebAssembly？

什么是 Rust？

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

Rust 的优点

  • 内存安全：Rust 的所有权模型确保变量具有单一所有者，从而防止内存泄漏和未经授权的数据访问。
  • 性能：Rust 专为速度而设计，与 C 和 C++ 等语言竞争激烈。
  • 并发性：Rust 的语言设计使编写并发代码变得更加容易，使其具有高度可扩展性。
  • 丰富的生态系统：Rust 拥有不断增长的包存储库 Cargo，为 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

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

安装 wasm-pack

wasm-pack是一个用于组装和打包针对 WebAssembly 的 Rust crate 的工具。

  1. 安装 wasm-pack：打开终端并运行以下命令：
    curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
  2. 验证安装：通过运行以下命令检查是否已安装：wasm-pack
    wasm-pack --version

安装 Node.js 和 npm

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

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

设置 IDE

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

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

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

创建一个简单的 Rust 程序

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

初始化 Rust 项目

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

编写阶乘函数

打开 文件：在文本编辑器或 IDE 中导航到该文件。lib.rssrc/lib.rs

实现阶乘函数：添加以下 Rust 代码来实现阶乘函数。

#[no_mangle]
pub extern "C" fn factorial(n: u32) -> u32 {
    if n == 0 {
        1
    } else {
        n * factorial(n - 1)
    }
}

在这里，我们定义了一个函数，该函数将一个（无符号 32 位整数）作为参数并返回一个 .该函数使用递归来计算给定数字的阶乘。factorialu32u32

编译为 WebAssembly

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

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

将 WebAssembly 集成到 Web 应用程序中

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

HTML 和 JavaScript 设置

1.创建 HTML 文件：在项目目录中创建一个名为的新文件，并添加以下 HTML 代码：index.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>

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

2.创建 JavaScript 文件：创建一个名为 JavaScript 的新文件，并添加以下 JavaScript 代码：bootstrap.js

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 模块并定义一个名为 .这个函数从输入字段中读取数字，从我们的 WebAssembly 模块调用该函数并显示结果。calculateFactorialfactorial

运行 Web 应用程序

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

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

结论

在本文中，我们探讨了 Rust 和 WebAssembly 在 Web 开发中的强大组合。我们从设置开发环境开始，然后继续创建一个计算数字阶乘的 Rust 程序。最后，我们将该程序集成到一个简单的 Web 应用程序中。

Rust 和 WebAssembly 之间的协同作用为构建高性能、安全和高效的 Web 应用程序提供了大量机会。无论您是想优化现有项目还是开始新项目，这些技术都提供了值得考虑的强大解决方案。

随着 Web 技术的不断发展，保持领先地位至关重要。Rust 和 WebAssembly 不仅仅是现代趋势;它们是下一代 Web 应用程序的构建块。

感谢你和我一起踏上这段旅程，我鼓励你更深入地了解 Rust 和 WebAssembly 的世界。请继续关注我们即将发表的文章，我们将深入探讨构建更复杂的功能并探索实际应用。

其他资源

推荐阅读：