带锈的网络组件
#javascript #typescript #rust #webassembly

这是为网络设计的通用二进制代码。

WASM使用具有线性内存的低虚拟机。它在沙箱内安全地执行。

Wasm Chain

图像来源:â1Tapadoo

我们什么时候应该使用WASM?

只要我们需要进行大量计算,我们就应该使用wASM,因为它们效率很快。

但是为什么生锈呢?

您可以选择任何想要的语言,但是Rust提供了对内存的低级控制,并且没有非确定性垃圾收集。

让我们创建我们的斐波那契wasm软件包

1.创建/初始化我们的第一个自由

确保安装生锈。您可以从here安装,如果未安装。

$  cargo new fibonacci-wasm --lib

2.在生锈中写下我们的斐波那契功能

编写功能很容易。

pub fn fibonacci(n: i64) -> i64 {
    if n == 0 {
        return 0;
    } else if n == 1 {
        return 1;
    } else {
        let mut a = 0;
        let mut b = 1;
        for _i in 2..n {
            let c = a + b;
            a = b;
            b = c;
        }
        return b;
    }
}

除此之外,您可以在浏览器中执行任何操作,例如安装,警报等。

  • 您可以使用在Rust Code中提供Web浏览器API的web_sys
  • web_sys WASM-BINDGEN 的一部分,它扩展了您可以使用Rust Code执行的功能。
  • 对于JS绑定,您可以使用js_sys,该js_sys提供了与JavaScript标准,内置对象的绑定,包括其方法和属性

您可以使用web_sysjs_sys在浏览器中做任何想法。

3.让我们用锈蚀代码创建JS绑定

这是一个困难的部分,但是我们有板条箱/库来执行此操作。

我们将使用它来促进WASM模块和JavaScript之间的高级相互作用。

借助 wasm_bindgen 宏。

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: i64) -> i64 {
    ....
}

大多数事情都完成了。

4.让我们编译并生成WASM-PAKC的WASM软件包

wasm-pack - >使用JavaScript使用Rust生成的WASM代码的一站式解决方案。

您可以使用 wasm-pack 轻松发布到 npm注册表或在 node_modules 文件夹中使用它。

您可以安装wasm-pack here

$ wasm-pack build --target web

现在您可以找到一个使用名称 pkg 的新文件夹。

您只能像导入JavaScript模块一样导入WebAssembly模块。

5.在浏览器中测试我们的软件包

  • 创建一个基本的HTML页面,并在身体中,部分添加脚本标签 type module

    <script type="module">
    
  • 导入WASM软件包。

        <script type="module">
        import init, { fibonacci } from "./pkg/fibonacci_wasm.js";
        ....
        </script>
    
  • 初始化我们的WASM代码

    <script type="module">
      import init, { fibonacci } from "./pkg/fibonacci_wasm.js";
    
      await init();
      ....
    </script>
    
  • 运行我们的fibonacci函数

    <script type="module">
      import init, { fibonacci } from "./pkg/fibonacci_wasm.js";
    
      await init();
      console.log(fibonacci(10));
    </script>
    

结果

wasm Fibonacci results

资源

  1. iJS 2021: WebAssembly, Rust, and TypeScript – a Match Made in Heaven

随时提出查询,并在Github中提出更改和建议的请求。

源代码

Github

快乐黑客

Rustaceans!