Rust Web 全棧開發之編寫 WebAssembly 應用

MDN Web Docs：https://developer.mozilla.org/zh-CN/docs/WebAssembly

官網：https://webassembly.org/

項目結構 和 功能

Web App 教師註冊 <-> WebService <-> WebAssembly App 課程管理

什麼是 WebAssembly

• WebAssembly 是一種新的編碼方式，可以在現代瀏覽器中運行
  • 它是一種低級的類彙編語言
  • 具有緊湊的二進位格式
  • 可以接近原生的性能運行
  • 併為 C/C ++ 、 C# 、 Rust 等語言提供一個編譯目標，以便它們可以在 Web上運行
  • 它也被設計為可以與 JavaScript 共存，允許兩者一起工作。

機器碼

• 機器碼是電腦可直接執行的語言
• 彙編語言比較接近機器碼

ASSEMBLY -> ASSEMBLER -> MACHINE CODE

機器碼與 CPU 架構

• 不同的 CPU 架構需要不同的機器碼和彙編
• 高級語言可以“翻譯”成機器碼，以便在 CPU 上運行
• SOURCE CODE
  • x64
  • x86
  • ARM

WebAssembly

• WebAssembly 其實不是彙編語言，它不針對特定的機器，而是針對瀏覽器的。
• WebAssembly 是中間編譯器目標
• SOURCE CODE
  • WASM
    • x64
    • x86
    • ARM

WebAssembly 是什麼樣的？

• 文本格式 .wat
• 二進位格式： .wasm

WebAssembly 能做什麼

• 可以把你編寫 C/C++ 、 C# 、 Rust 等語言的代碼編譯成 WebAssembly 模塊
• 你可以在 Web 應用中載入該模塊，並通過 JavaScript 調用它
• 它並不是為了替代 JS ，而是與 JS 一起工作
• 仍然需要 HTML 和 JS ，因為WebAssembly 無法訪問平臺 API ，例如 DOM ， WebGL...

WebAssembly 如何工作

• 這是 C/C++ 的例子

Hello.c -> EMSCRIPTEN（編譯器） -> hello.wasm hello.js hello.html

WebAssembly 的優點

• 快速、高效、可移植
  • 通過利用常見的硬體能力， WebAssembly 代碼在不同平臺上能夠以接近本地速度運行。
• 可讀、可調試
  • WebAssembly 是一門低階語言，但是它有確實有一種人類可讀的文本格式（其標準最終版本目前仍在編製），這允許通過手工來寫代碼，看代碼以及調試代碼。
• 保持安全
  • WebAssembly 被限制運行在一個安全的沙箱執行環境中。像其他網路代碼一樣，它遵循瀏覽器的同源策略和授權策略。
• 不破壞網路
  • WebAssembly 的設計原則是與其他網路技術和諧共處並保持向後相容。

Rust WebAssembly 部分相關 crate

• wasm-bindgen
• wasm-bindgen-future
• web-sys
• js-sys

搭建環境

Rust 官網：https://www.rust-lang.org/zh-CN/what/wasm

Rust and WebAssembly：https://rustwasm.github.io/docs/book/

Rust和WebAssembly中文文檔：https://rustwasm.wasmdev.cn/docs/book/

安裝

wasm-pack

下載安裝地址：https://rustwasm.github.io/wasm-pack/installer/

Install wasm-pack

You appear to be running a *nix system (Unix, Linux, MacOS). Install by running:

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

If you're not on *nix, or you don't like installing from curl, follow the alternate instructions below.

cargo-generate

cargo-generate helps you get up and running quickly with a new Rust project by leveraging a pre-existing git repository as a template.

Install cargo-generate with this command:

cargo install cargo-generate

~ via