Rust WebAssembly: wasm-bindgen, wasm-pack và ứng dụng

Rust WebAssembly: wasm-bindgen, wasm-pack và ứng dụng thực tế

WebAssembly (Wasm) cho phép chạy code hiệu năng cao trực tiếp trong trình duyệt. Rust là ngôn ngữ được hỗ trợ tốt nhất cho Wasm nhờ hệ sinh thái công cụ mạnh mẽ như wasm-bindgen và wasm-pack. Bài viết này khám phá cách xây dựng, tối ưu và triển khai ứng dụng Rust WebAssembly.

Phần 1: Tại sao chọn Rust cho WebAssembly?

Ưu điểm của Rust WASM

Hiệu năng gần native: Rust compile thành Wasm chạy với tốc độ gần code native, vượt trội so với JavaScript cho tính toán nặng
Bộ nhớ an toàn: Không có garbage collector, quản lý bộ nhớ xác định – quan trọng cho Wasm có bộ nhớ tuyến tính
Kích thước nhỏ: Binary Wasm tối ưu có thể nhỏ hơn 100KB cho logic phức tạp
Tương tác JavaScript mượt mà: wasm-bindgen tạo glue code tự động, hỗ trợ Promise, async/await
Toolchain mạnh mẽ: wasm-pack, cargo-generate, wasm-opt hỗ trợ toàn bộ vòng đời phát triển

Khi nào nên dùng Rust WASM?

Xử lý hình ảnh/video trong trình duyệt (image processing, computer vision)
Game engine, physics simulation
Cryptography, hashing, blockchain verification
Data processing, parsing lớn (CSV, JSON, XML)
Machine learning inference (ONNX, TensorFlow Lite)
Thư viện tính toán dùng chung cho web và server

Phần 2: Công cụ cốt lõi – wasm-bindgen và wasm-pack

wasm-bindgen: Cầu nối Rust & JavaScript

wasm-bindgen là thư viện và CLI tạo glue code hai chiều:

Export hàm Rust sang JavaScript: #[wasm_bindgen]
Import hàm JavaScript vào Rust: #[wasm_bindgen(module = "...", extern)]
Hỗ trợ kiểu dữ liệu phức tạp: String, Array, Object, Promise, JsValue
Tự động generate TypeScript definitions (.d.ts)

Ví dụ cơ bản

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Xin chào, {}!", name)
}

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

wasm-pack: Build, test, publish

wasm-pack là công cụ CLI chính thức cho quy trình phát triển Wasm:

wasm-pack build: Biên dịch sang Wasm, generate JS glue, tối ưu
wasm-pack test: Chạy test trong Node.js hoặc browser (headless)
wasm-pack pack: Tạo npm package sẵn sàng publish
wasm-pack publish: Đăng lên npm registry

Cấu hình Cargo.toml

[package]
name = "my-wasm-lib"
version = "0.1.0"
edition = "2021"

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

[dependencies]
wasm-bindgen = "0.2"

[profile.release]
opt-level = "s"
lto = true

Phần 3: Pipeline phát triển WebAssembly

1. Khởi tạo project

# Tạo library crate
cargo new --lib my-wasm-lib
cd my-wasm-lib

# Cấu hình Cargo.toml như trên
# Thêm wasm-bindgen dependency

# Build lần đầu
wasm-pack build --target web

2. Cấu trúc output

pkg/
├── package.json          # npm package config
├── my_wasm_lib.js        # JS glue code (ES modules)
├── my_wasm_lib.d.ts      # TypeScript definitions
├── my_wasm_lib_bg.wasm   # WebAssembly binary
├── my_wasm_lib_bg.wasm.d.ts
└── README.md

3. Tích hợp vào JavaScript/TypeScript project

// Với ES modules
import init, { greet, fibonacci } from './pkg/my_wasm_lib.js';

await init(); // Khởi tạo Wasm instance
console.log(greet("Rust")); // "Xin chào, Rust!"
console.log(fibonacci(10)); // 55

4. Tối ưu kích thước và hiệu năng

wasm-pack build --release --target web: Build release với tối ưu
wasm-opt -Oz --enable-bulk-memory: Tối ưu thêm với wasm-opt (từ binaryen)
Sử dụng wee_alloc allocator nhẹ thay vì default allocator
Bật lto = true và opt-level = "s" trong Cargo.toml
Xóa panic hook không cần thiết trong production

Phần 4: Các mẫu sử dụng thực tế

1. Xử lý hình ảnh (Image Processing)

Rust WASM vượt trội cho pixel manipulation, filters, compression:

#[wasm_bindgen]
pub fn grayscale(image_data: &mut [u8]) {
    for chunk in image_data.chunks_exact_mut(4) {
        let r = chunk[0] as f32;
        let g = chunk[1] as f32;
        let b = chunk[2] as f32;
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
        chunk[0] = gray;
        chunk[1] = gray;
        chunk[2] = gray;
    }
}

2. Cryptography và Hashing

Sử dụng các crate crypto đã được audit:

[dependencies]
sha2 = "0.10"
blake3 = "1.0"

#[wasm_bindgen]
pub fn blake3_hash(data: &[u8]) -> Vec {
    blake3::hash(data).as_bytes().to_vec()
}

3. Parsing và Data Processing

Xử lý JSON, CSV, XML nhanh hơn JavaScript:

[dependencies]
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
csv = "1.0"

#[wasm_bindgen]
pub fn parse_csv(csv_text: &str) -> JsValue {
    let mut rdr = csv::Reader::from_reader(csv_text.as_bytes());
    let mut records = Vec::new();
    for result in rdr.deserialize() {
        let record: serde_json::Value = result.unwrap();
        records.push(record);
    }
    JsValue::from_serde(&records).unwrap()
}

4. Machine Learning Inference

Chạy mô hình ONNX/TFLite trong trình duyệt:

ort (ONNX Runtime Web) – Rust bindings
burn – Deep learning framework pure Rust
tch-rs – LibTorch bindings (cần C++ backend)

Phần 5: Tích hợp với Framework Frontend

React + Vite

// vite.config.ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
import topLevelAwait from 'vite-plugin-top-level-await';

export default defineConfig({
  plugins: [wasm(), topLevelAwait()],
  build: { target: 'esnext' }
});

Next.js

// next.config.js
module.exports = {
  webpack: (config) => {
    config.experiments = { asyncWebAssembly: true };
    return config;
  }
};

Svelte / Vue / Plain HTML

Tất cả đều hỗ trợ qua ES modules. Chỉ cần import và await init().

Phần 6: Debug, Test và Triển khai

Debugging WebAssembly

Chrome DevTools: Sources tab -> Wasm -> breakpoint trong .wasm
console.log từ Rust qua web_sys::console::log_1
wasm-pack build --dev giữ debug symbols
Source maps được generate tự động

Testing

wasm-pack test --headless --firefox: Chạy trong browser headless
wasm-pack test --node: Chạy trong Node.js
Viết test trong #[cfg(test)] module bình thường

Triển khai Production

Publish lên npm: wasm-pack publish
Hoặc serve trực tiếp file .wasm và .js từ CDN
Cấu hình CORS headers cho file .wasm
Sử dụng wasm-bindgen-rayon cho multi-threading (SharedArrayBuffer)

Phần 7: Các thư viện hệ sinh thái Wasm phổ biến

Thư viện	Mục đích	Đặc điểm
wasm-bindgen	Rust & JS binding	Cốt lõi, hỗ trợ mọi kiểu dữ liệu
wasm-pack	Build tool	CLI chính thức, npm integration
web-sys	Web API bindings	DOM, Canvas, WebGL, Fetch, WebCrypto
js-sys	JS built-in bindings	Array, Object, Promise, Math, JSON
gloo	High-level utils	Events, timers, storage, console, net
yew	Frontend framework	React-like, pure Rust WASM
leptos	Full-stack framework	SSR, hydration, fine-grained reactivity
dioxus	Cross-platform UI	Web, desktop, mobile, WASM

Kết luận

Rust WebAssembly với wasm-bindgen và wasm-pack cung cấp nền tảng mạnh mẽ để mang hiệu năng native vào trình duyệt. Với hệ sinh thái ngày càng trưởng thành (yew, leptos, dioxus cho frontend; ort, burn cho ML), Rust WASM đang trở thành lựa chọn hàng đầu cho các ứng dụng web yêu cầu hiệu năng cao.

Các bước tiếp theo khuyến nghị:

Thử nghiệm wasm-pack new để tạo project mẫu
Khám phá web-sys để truy cập Web APIs trực tiếp từ Rust
Học yew hoặc leptos nếu muốn xây dựng toàn bộ frontend bằng Rust
Đọc Rust and WebAssembly Book tài liệu chính thức

Nguồn tham khảo:

Rust and WebAssembly Book: https://rustwasm.github.io/docs/book/
wasm-bindgen Guide: https://rustwasm.github.io/wasm-bindgen/
wasm-pack Documentation: https://rustwasm.github.io/wasm-pack/
web-sys Crate: https://rustwasm.github.io/wasm-bindgen/api/web_sys/
yew Framework: https://yew.rs/
leptos Framework: https://leptos.dev/