paint-brush
使用 Rust 和 WebAssembly 构建简单的 Web 应用程序:分步指南经过@zhukmax
16,736 讀數
16,736 讀數

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

经过 Max Zhuk
Max Zhuk HackerNoon profile picture

Max Zhuk

@zhukmax

Web-developer, tech writer

8 分钟 read2023/10/26
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript

太長; 讀書

学习使用 Rust 和 WebAssembly 构建高性能 Web 应用程序。
featured image - 使用 Rust 和 WebAssembly 构建简单的 Web 应用程序:分步指南
Max Zhuk HackerNoon profile picture
Max Zhuk

Max Zhuk

@zhukmax

Web-developer, tech writer

0-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

介绍

您是否曾对 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

  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 箱子的工具。

  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

编写阶乘函数

  1. 打开lib.rs文件:在文本编辑器或 IDE 中导航到src/lib.rs文件。

  2. 实现阶乘函数:添加以下 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

  1. 编译 Rust 代码:现在我们有了阶乘函数,让我们将其编译成 WebAssembly 模块。在终端中运行以下命令:

     wasm-pack build
  2. 验证构建:运行命令后,您应该在项目文件夹中看到一个pkg目录。在其中,您将找到 WebAssembly 模块 ( factorial_calculator_bg.wasm ) 和生成的 JavaScript 绑定 ( factorial_calculator.js )。


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


将 WebAssembly 集成到 Web 应用程序中

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

HTML 和 JavaScript 设置

  1. 创建 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>

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

  2. 创建 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函数并显示结果。

运行网络应用程序

  1. 安装 Web 服务器:如果您没有本地 Web 服务器,可以使用 npm 安装一个:

     npm install -g http-server
  2. 运行 Web 服务器:导航到终端中的项目目录并运行:

     http-server .
  3. 打开 Web 应用程序:打开 Web 浏览器并导航到http://localhost:8080 。您应该会看到阶乘计算器 Web 应用程序。输入一个数字,单击“计算”,就会显示该数字的阶乘。


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


结论

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


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


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


感谢您加入我的这段旅程,我鼓励您更深入地了解 Rust 和 WebAssembly 的世界。请继续关注我们即将发布的文章,我们将深入探讨构建更复杂的功能并探索现实世界的应用程序。

其他资源


照片由SpaceXUnsplash上拍摄

L O A D I N G
. . . comments & more!

About Author

Max Zhuk HackerNoon profile picture
Max Zhuk@zhukmax
Web-developer, tech writer

標籤

这篇文章刊登在...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD