Lập trình WebAssembly với Rust và wasm-bindgen

Bài thứ tư trong Phần 3: Advanced Systems & Production Rust. WebAssembly (Wasm) là chuẩn định dạng nhị phân giúp bạn thực thi mã nguồn với tốc độ gần như native ngay bên trong trình duyệt web hoặc các môi trường serverless tại Edge (Cloudflare Workers, Fastly).

Rust được công nhận rộng rãi là ngôn ngữ tuyệt vời nhất để biên dịch sang WebAssembly nhờ dung lượng runtime bằng 0 (không cần bộ gom rác Garbage Collector) và hệ sinh thái công cụ hỗ trợ hàng đầu (wasm-bindgen, wasm-pack).

graph TD
    A["Mã nguồn Rust (.rs)"] --> B["Biên dịch sang Target wasm32-unknown-unknown"]
    B --> C["wasm-bindgen & wasm-pack"]
    C --> D["Module WebAssembly (.wasm)"]
    C --> E["JavaScript Glue Code & TypeScript Definitions (.d.ts)"]
    D & E --> F["Trình duyệt Web / Cloudflare Workers / Node.js"]

Giải thích đơn giản (ELI5): Chiếc động cơ tên lửa gắn vào xe đạp#

JavaScript thuần túy: Giống như chiếc xe đạp thể thao linh hoạt trong thành phố. Rất tiện lợi để tương tác giao diện người dùng (DOM, UI). Nhưng khi phải leo dốc hiểm trở (xử lý video, giải nén dữ liệu, render 3D, mã hóa mật mã), xe đạp sẽ bị kiệt sức.
Rust + WebAssembly: Giống như bạn lắp thêm một động cơ phản lực vào khung xe đạp. JavaScript chỉ việc bấm nút kích hoạt, phần tính toán siêu nặng sẽ do module Rust Wasm xử lý trong chớp mắt và trả kết quả về cho UI hiển thị mượt mà!

1. Thiết lập dự án với `wasm-bindgen`#

Thêm wasm-bindgen vào file Cargo.toml:

Cargo.toml

[package]
name = "rust-wasm-demo"
version = "0.1.0"
edition = "2021"

[lib]
crate-type = ["cdylib"] # Tạo thư viện động tương thích C ABI cho Wasm

[dependencies]
wasm-bindgen = "0.2"

toml

2. Viết hàm Rust giao tiếp hai chiều với JavaScript#

Thuộc tính #[wasm_bindgen] tự động sinh mã cầu nối (JS glue code) và kiểu dữ liệu TypeScript:

src/lib.rs

use wasm_bindgen::prelude::*;

// 1. Nhập (Import) hàm `alert` từ JavaScript để gọi từ Rust
#[wasm_bindgen]
extern "C" {
    fn alert(s: &str);
}

// 2. Xuất (Export) hàm Rust ra để JavaScript gọi
#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Xin chào {name} từ WebAssembly Rust!"));
}

// 3. Tính toán nặng không làm giật lag giao diện
#[wasm_bindgen]
pub fn calculate_fibonacci(n: u32) -> u64 {
    match n {
        0 => 0,
        1 => 1,
        _ => {
            let mut a = 0;
            let mut b = 1;
            for _ in 2..=n {
                let c = a + b;
                a = b;
                b = c;
            }
            b
        }
    }
}

rust

3. Đóng gói và biên dịch với `wasm-pack`#

Cài đặt công cụ đóng gói chính thức của Rust:

cargo install wasm-pack
wasm-pack build --target web

bash

Thư mục pkg/ sẽ chứa:

rust_wasm_demo_bg.wasm: File nhị phân WebAssembly siêu nhẹ.
rust_wasm_demo.js: Wrapper JavaScript tự động tải và khởi tạo Wasm.
rust_wasm_demo.d.ts: Tự động tạo TypeScript type definitions.

4. Tích hợp và gọi trong Frontend (HTML & JavaScript)#

index.html

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <title>Rust Wasm Demo</title>
</head>
<body>
    <h1>Rust + WebAssembly</h1>
    <button id="btn">Chào tôi</button>

    <script type="module">
        import init, { greet, calculate_fibonacci } from './pkg/rust_wasm_demo.js';

        async function run() {
            // Tải và khởi tạo WebAssembly module
            await init();

            document.getElementById('btn').addEventListener('click', () => {
                greet('Developer');
                console.log('Fibonacci 50:', calculate_fibonacci(50));
            });
        }

        run();
    </script>
</body>
</html>

html

5. Tối ưu hóa kích thước file Wasm cho môi trường Production#

Dung lượng file .wasm tải về trình duyệt càng nhỏ thì trang web tải càng nhanh:

Bật LTO và opt-level = ‘z’ (tối ưu kích thước) trong Cargo.toml:

[profile.release]
opt-level = "z"
lto = true
codegen-units = 1
panic = "abort"

toml

Sử dụng wasm-opt: Tự động chạy pass tối ưu nhị phân WebAssembly để giảm dung lượng thêm 20-30%.

Tóm tắt#

Rust không có Garbage Collector (GC), là ngôn ngữ lý tưởng nhất cho WebAssembly với tốc độ khởi động tức thì và dung lượng siêu nhỏ.
#[wasm_bindgen] biến việc giao tiếp giữa JavaScript và Rust thành chuyện cực kỳ đơn giản và an toàn kiểu.
wasm-pack giúp tự động hóa toàn bộ quy trình biên dịch, tạo package npm và sinh TypeScript types.