001 Rust和WebAssembly初體驗

linghuyichong發表於2021-07-11
RustWeb

影片地址：www.bilibili.com/video/BV1eg411g7c...
相關原始碼：github.com/anonymousGiga/Rust-and-...

  • 低水平控制與高水平的人體工程學
    JavaScript Web應用程式很難獲得和保持可靠的效能。
    Rust為程式設計師提供了低階別的控制和可靠的效能。

  • 較小的.wasm
    程式碼大小非常重要，因為 .wasm必須透過網路下載。Rust沒有執行時，因此支援較小的.Wasm。

  • 不用全部重寫
    使用Rust並不是將現有的程式碼扔掉，我們可以將部分js函式轉換成Rust程式碼。

  • 和其它的和善相處
    Rust和WebAssembly與現有JavaScript工具整合，支援ECMAScript模組，你可以繼續使用之前的工具，如npm、Webpack。

  • 便利的基礎設施
    Rust中擁有開發者所期望的便利的工具，如：
    Cargo、零成本抽象、開放熱情的社群。

WebAssembly（wasm）是一種簡單的機器模型和具有廣泛規範的可執行格式。它被設計成可移植的、緊湊的，並且以或接近本機速度執行。

WebAssembly有兩種表示相同結構的格式：

  • .wat 文字格式（WebAssembly Text）使用S表示式，和Lisp家族的語言有些類似；
  • .wasm二進位制格式，級別較低，直接供wasm虛擬機器使用，它在概念上類似於ELF和Mach-O。

2.1 線性儲存器

WebAssembly有一個非常簡單的記憶體模型。wasm模組可以訪問單個的線性記憶體（本質就是陣列），此記憶體可以按照頁大小（64K）的倍數增長，但是不能縮小。

2.2 WebAssembly是不是隻為Web使用

wasm並沒有對其宿主環境做出任何假設，但是到目前為止，主要還是與js相關。

  • 安裝Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  • 安裝wasm-pack
cargo install wasm-pack

  • 建立工程

    cargo new --lib mywasm

  • 編寫程式碼

在src/lib.rs中新增如下程式碼：

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

修改Cargo.toml配置檔案，新增如下：

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"
  • 編譯package
wasm-pack build --target web
  • 使用package

在mywasm根目錄下建立index.html，程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
  </head>
  <body>
    <script type="module">
      import init, {greet} from "./pkg/hello_wasm.js";
      init()
        .then(() => {
          greet("WebAssembly")
        });
      </script>
  </body>
</html>
  • 執行server
python3 -m http.server
  • 測試

在瀏覽器中輸入： localhost:8000

本作品採用《CC 協議》，轉載必須註明作者和本文連結
令狐一衝

相關文章