Rust ke WASM dengan wasm-pack dan React

Alur kerja standar dari Rust ke WASM menggunakan dua alat: wasm-pack mengatur proses pembangunan (mengompilasi Rust ke WASM, menjalankan wasm-bindgen, dan menghasilkan paket npm), sedangkan wasm-bindgen menghasilkan pengikatan JavaScript yang membuat fungsi Rust dapat dipanggil sebagai fungsi JavaScript biasa dengan penanganan tipe yang tepat.

Atribut #[wasm_bindgen] menandai fungsi, struktur, dan metode Rust untuk diekspor ke JavaScript. Tanpa atribut tersebut, fungsi dikompilasi ke WASM tetapi tidak dapat diakses dari JavaScript. Saat Anda memberi anotasi #[wasm_bindgen] pada suatu fungsi, wasm-bindgen menghasilkan kode penghubung JavaScript yang menangani konversi argumen dan nilai hasil.

Fungsi Rust yang diekspor secara minimal: use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn add(a: u32, b: u32) -> u32 { a + b }. Fungsi tersebut menerima dua bilangan bulat tak bertanda 32-bit dan mengembalikan satu bilangan. wasm-bindgen menghasilkan JavaScript yang memanggil fungsi ini dengan argumen angka dan mengembalikan hasil berupa angka.

Jalankan wasm-pack build --target web di direktori proyek Rust. Perintah ini mengompilasi kode Rust ke WASM, menjalankan wasm-bindgen untuk menghasilkan pengikatan JavaScript, dan menghasilkan direktori pkg/ yang berisi biner .wasm, modul penghubung JavaScript, dan definisi tipe TypeScript.

Impor modul yang dihasilkan dalam komponen React Anda: import init, { add } from '../pkg/my_lib'. Fungsi init memuat dan menginstansiasikan biner WASM (panggil sekali dalam useEffect). Setelah inisialisasi, panggil fungsi yang diekspor secara langsung: const result = add(2, 3).

Untuk data kompleks di luar angka primitif, wasm-bindgen menyediakan js_sys::Array (larik JavaScript), js_sys::Object (objek JavaScript), dan wasm_bindgen::JsValue (nilai JavaScript apa pun). Jenis-jenis ini memungkinkan fungsi Rust menerima dan mengembalikan larik serta objek JavaScript, meskipun dengan beban tambahan serialisasi yang lebih besar daripada tipe primitif.

Prinsip kinerja utamanya adalah mempertahankan data di memori WASM dan melakukan seluruh komputasi di sana. Kirim data sekali, lakukan komputasi, lalu kembalikan hanya hasil akhirnya. Hindari pola yang berulang kali memindahkan data melintasi batas WASM pada setiap langkah. Beban tambahan setiap kali melintasi batas memang kecil, tetapi akan terakumulasi dalam perulangan yang ketat.

Crate serde-wasm-bindgen memungkinkan Anda melakukan serialisasi struktur Rust ke dan dari objek JavaScript menggunakan Serde. Beri anotasi pada struktur dengan #[derive(Serialize, Deserialize)], lalu gunakan serde_wasm_bindgen::to_value() dan from_value(). Ini merupakan pendekatan standar untuk meneruskan data terstruktur yang kompleks.

Komputasi WASM yang berlangsung lama akan memblokir utas tempat komputasi tersebut berjalan. Tempatkan WASM di Pekerja Web agar utas utama React tetap bebas. Buat berkas pekerja yang menginisialisasi modul WASM dan menangani pesan. Kirim data ke pekerja melalui postMessage, terima hasil melalui peristiwa message, lalu perbarui status React dengan hasil tersebut.

wasm-pack secara otomatis membuat berkas deklarasi TypeScript (.d.ts) untuk semua fungsi dan tipe yang diekspor. Dengan demikian, proyek React TypeScript Anda memperoleh keamanan tipe penuh saat memanggil fungsi Rust. Tipe yang dibuat mencerminkan tanda tangan fungsi Rust — add(a: number, b: number): number — sehingga pelengkapan otomatis di IDE berfungsi dengan benar.

Biner WASM biasanya berukuran 100kb-2MB setelah dioptimalkan. Aktifkan wasm-opt dalam kompilasi wasm-pack dengan menetapkan opt-level = "z" di profil rilis Cargo.toml untuk mengoptimalkan ukuran secara agresif. Sajikan berkas WASM dengan Content-Type: application/wasm dan aktifkan HTTP/2 agar peramban dapat mengalirkan biner secara efisien.

Apa tujuan atribut #[wasm_bindgen] dalam kode Rust?

wasm-pack build --target web mengompilasi Rust menjadi WASM dan membuat binding JavaScript melalui wasm-bindgen. Beri anotasi pada fungsi yang diekspor dengan #[wasm_bindgen]. Impor init dan fungsi yang diekspor di React, panggil init() dalam useEffect, lalu panggil fungsi tersebut seperti JavaScript biasa. Gunakan serde-wasm-bindgen untuk serialisasi struktur yang kompleks. Jalankan WASM di Pekerja Web untuk komputasi yang berlangsung lama agar utas utama React tetap bebas.