JS `WebAssembly` `Interface Types` (WIT) 提案：Wasm 与 JS 的高级互操作

各位观众老爷们，晚上好！今天咱们聊点有意思的，关于 WebAssembly 和 JavaScript 如何更愉快地玩耍，也就是 WebAssembly Interface Types (WIT) 这个提案。

开场白：为什么我们需要 WIT？

想象一下，你精心制作了一份美味的Wasm代码，想让JavaScript小伙伴来尝尝。结果发现，这俩家伙的语言完全不通！Wasm擅长处理数字和线性内存，而JS则更喜欢字符串和对象。如果每次都要手动翻译，这简直是场灾难！

WIT就像一个翻译官，它定义了一套标准化的接口描述，让Wasm和JS能够用同一种语言沟通，从而实现无缝的互操作。有了WIT，我们就不用再为数据类型转换、内存管理这些琐事烦恼了，可以把更多精力放在业务逻辑上。

WIT 的核心概念

WIT 的核心目标是定义模块之间的接口。它主要包含以下几个关键概念：

• Interfaces (接口): 描述模块的功能和数据类型。接口定义了模块可以接受和返回的数据类型，以及可以调用的函数。
• Types (类型): WIT 定义了一套丰富的类型系统，包括基本类型（如 i32, f64, string），以及复合类型（如 record, variant, list）。这些类型可以用来描述 JS 和 Wasm 之间传递的数据。
• Worlds (世界): 代表一个独立的执行环境，例如浏览器或 Node.js。World 定义了模块之间的依赖关系和交互方式。
• Adapters (适配器): 在 Wasm 模块和 host 环境（例如 JS）之间进行数据类型转换和函数调用的桥梁。

WIT 的语法结构

WIT 使用一种类似 IDL（Interface Definition Language）的语法来描述接口。它具有清晰、简洁的结构，易于阅读和编写。

下面是一个简单的 WIT 接口示例：

interface greeting {
  greet: func(name: string) -> string
}

这个接口定义了一个名为 greeting 的接口，其中包含一个名为 greet 的函数。该函数接受一个 string 类型的参数 name，并返回一个 string 类型的值。

WIT 的类型系统

WIT 的类型系统非常强大，可以用来描述各种复杂的数据结构。它支持以下几种基本类型：

类型	描述
bool	布尔值 (true 或 false)
s8	8 位有符号整数
u8	8 位无符号整数
s16	16 位有符号整数
u16	16 位无符号整数
s32	32 位有符号整数
u32	32 位无符号整数
s64	64 位有符号整数
u64	64 位无符号整数
float32	32 位浮点数 (IEEE 754 单精度)
float64	64 位浮点数 (IEEE 754 双精度)
string	UTF-8 编码的字符串
char	Unicode 字符

除了基本类型，WIT 还支持以下几种复合类型：

• Record (记录): 类似于结构体或对象，包含一组命名字段，每个字段都有一个特定的类型。

  record Person {
    name: string,
    age: u32
  }

• Variant (变体): 类似于枚举或联合体，可以表示多种不同的类型。

  variant Result {
    ok(string),
    error(string)
  }

• List (列表): 类似于数组，包含一组相同类型的元素。

  list<string>  // 字符串列表

• Tuple (元组): 类似于记录，但是字段没有名称。

  tuple<string, u32> // 包含一个字符串和一个 u32 值的元组

WIT 如何工作：一个简单的例子

咱们来举个例子，看看 WIT 是如何让 Wasm 和 JS 愉快地合作的。

假设我们有一个 Wasm 模块，它提供一个函数 add，用于计算两个整数的和。我们希望在 JS 中调用这个函数。

首先，我们需要定义一个 WIT 接口来描述这个函数：

interface adder {
  add: func(a: i32, b: i32) -> i32
}

接下来，我们需要使用 WIT 工具链将这个接口编译成 Wasm 和 JS 可以理解的代码。这个过程通常会生成以下几个部分：

• Wasm Adapter: 一个 Wasm 模块，负责将 JS 传递过来的数据转换为 Wasm 可以理解的格式，并将 Wasm 的结果转换为 JS 可以理解的格式。
• JS Binding: 一个 JS 模块，提供一些辅助函数，用于加载 Wasm 模块并调用其中的函数。

有了这些代码，我们就可以在 JS 中轻松地调用 Wasm 的 add 函数了：

// 假设我们已经加载了 Wasm 模块和 JS Binding
import { add } from './adder.js';

const result = add(10, 20);
console.log(result); // 输出 30

更复杂的例子：处理字符串和对象

上面的例子很简单，只涉及整数的传递。但实际上，WIT 可以处理更复杂的数据类型，例如字符串和对象。

假设我们的 Wasm 模块需要接受一个包含姓名和年龄的对象，并返回一个包含问候语的字符串。

首先，我们需要定义 WIT 接口：

record Person {
  name: string,
  age: u32
}

interface greeter {
  greet: func(person: Person) -> string
}

在这个接口中，我们定义了一个 Person 记录类型，包含 name 和 age 两个字段。greet 函数接受一个 Person 类型的参数，并返回一个 string 类型的值。

接下来，我们需要使用 WIT 工具链生成 Wasm Adapter 和 JS Binding。

在 JS 中，我们可以这样调用 greet 函数：

import { greet } from './greeter.js';

const person = {
  name: "Alice",
  age: 30
};

const greeting = greet(person);
console.log(greeting); // 输出 "Hello, Alice! You are 30 years old."

在这个例子中，JS Binding 会将 JS 对象 person 转换为 Wasm Adapter 可以理解的格式，Wasm Adapter 会将数据传递给 Wasm 模块，Wasm 模块会生成问候语，Wasm Adapter 会将问候语转换为 JS 字符串，最后 JS Binding 会将字符串返回给 JS 代码。

WIT 的优势

使用 WIT 有很多好处：

• 类型安全: WIT 的类型系统可以帮助我们避免类型错误，提高代码的可靠性。
• 性能优化: WIT 可以减少数据类型转换的开销，提高程序的性能。
• 代码重用: WIT 可以让我们更容易地在不同的语言之间共享代码。
• 更好的开发体验: WIT 可以让 Wasm 和 JS 的互操作更加简单和直观。

WIT 的现状和未来

虽然 WIT 提案还在不断发展中，但已经有一些工具和库开始支持 WIT。例如，wasm-bindgen 和 wit-bindgen 都是流行的 WIT 工具链。

未来，随着 WIT 的不断完善和普及，我们可以期待 Wasm 和 JS 之间的互操作会变得更加无缝和高效。

实际例子：使用 wit-bindgen

咱们用 wit-bindgen 这个工具，实际操作一下。

1. 安装 wit-bindgen:

   首先，你需要安装 Rust 和 cargo。然后，使用 cargo 安装 wit-bindgen:

   cargo install wit-bindgen-cli

2. 定义 WIT 接口:

   创建一个名为 greeter.wit 的文件，内容如下：

   package my-org:greeter;
   
   interface greeter {
       greet: func(name: string) -> string
   }
   
   world example {
       export greeter;
   }

3. 创建 Rust 项目:

   创建一个新的 Rust 项目：

   cargo new greeter-wasm --lib
   cd greeter-wasm

4. 配置 Cargo.toml:

   修改 Cargo.toml 文件，添加 wit-bindgen 依赖，并指定 crate 类型为 cdylib：

   [package]
   name = "greeter-wasm"
   version = "0.1.0"
   edition = "2021"
   
   [lib]
   crate-type = ["cdylib"]
   
   [dependencies]
   wit-bindgen = "0.18.0"  # 确保版本是最新的

5. 编写 Rust 代码:

   修改 src/lib.rs 文件，使用 wit-bindgen 生成的代码，并实现 greet 函数：

   wit_bindgen::generate!({
       path: "../greeter.wit",
       world: "example",
   });
   
   struct Greeter;
   
   impl Greeter {
       fn new() -> Self {
           Greeter
       }
   }
   
   impl greeter::Greeter for Greeter {
       fn greet(name: String) -> String {
           format!("Hello, {}!", name)
       }
   }
   
   export_greeter!(Greeter);

6. 构建 Wasm 模块:

   使用以下命令构建 Wasm 模块：

   cargo build --release --target wasm32-wasi

7. 生成 JS 绑定:

   使用 wit-bindgen 生成 JS 绑定：

   wit-bindgen greeter.wit --out-dir . --no-typescript --world example

   这会生成 greeter.js 文件。 注意： --no-typescript 参数，是因为我们这里主要是讲JS，生成TS会增加复杂性。 如果你需要TypeScript，可以去掉这个参数。

8. 编写 JS 代码:

   创建一个 HTML 文件 index.html，并编写 JS 代码来加载 Wasm 模块并调用 greet 函数：

   <!DOCTYPE html>
   <html>
   <head>
       <title>Greeter Example</title>
   </head>
   <body>
       <script type="module">
           import { Greeter } from './greeter.js';
   
           async function run() {
               const greeter = await Greeter.instantiate();
               const greeting = greeter.greet("World");
               console.log(greeting);
           }
   
           run();
       </script>
   </body>
   </html>

9. 运行:

   用浏览器打开 index.html，你会在控制台中看到 "Hello, World!"。

一些注意事项

• 版本兼容性: wit-bindgen 的版本需要与 wit-bindgen crate 的版本兼容。建议使用最新的版本。
• WASI 目标: 构建 Wasm 模块时，需要指定 wasm32-wasi 目标。
• 错误处理: 在实际项目中，需要考虑错误处理。wit-bindgen 提供了一些机制来处理 Wasm 模块中的错误。
• 模块加载: 在 JS 中加载 Wasm 模块时，需要使用 WebAssembly.instantiateStreaming 或 WebAssembly.instantiate。

总结

WIT 是一个很有前景的提案，它为 WebAssembly 和 JavaScript 的互操作提供了一种标准化的解决方案。虽然目前 WIT 还在发展中，但已经有一些工具和库可以让我们体验到 WIT 的强大之处。希望今天的内容能帮助大家更好地理解 WIT，并在实际项目中应用 WIT 技术。

今天的分享就到这里，谢谢大家！ 祝大家早点下班！