WebAssembly — Chạy Code Tốc Độ Native Trên Browser

JavaScript:   Viết → Parse → Compile JIT → Run
WebAssembly:  Viết (Rust/C++) → Compile → .wasm → Run (gần native)

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

# Tạo project
cargo new --lib wasm-hello

[package]
name = "wasm-hello"
version = "0.1.0"

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

[dependencies]
wasm-bindgen = "0.2"

use wasm_bindgen::prelude::*;

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

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}! From WebAssembly", name)
}

wasm-pack build --target web

import init, { fibonacci, greet } from './pkg/wasm_hello.js';

async function main() {
  await init(); // Load .wasm file

  console.log(greet('Alice')); // Hello, Alice! From WebAssembly
  console.log(fibonacci(40));  // 102334155 — nhanh hơn JS rất nhiều
}

main();

// JavaScript
function fibJS(n: number): number {
  if (n <= 1) return n;
  return fibJS(n - 1) + fibJS(n - 2);
}

// fib(45): JS ≈ 15s, WASM ≈ 1.2s — WASM nhanh hơn ~12x

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn grayscale(data: &mut [u8]) {
    for chunk in data.chunks_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;
    }
}

import { FFmpeg } from '@ffmpeg/ffmpeg';

const ffmpeg = new FFmpeg();
await ffmpeg.load();

await ffmpeg.exec(['-i', 'input.mp4', '-vf', 'scale=1280:720', 'output.mp4']);
const data = await ffmpeg.readFile('output.mp4');

import sqlInit, { Database } from 'sql.js';

const SQL = await sqlInit();
const db = new SQL.Database();

db.run('CREATE TABLE users (id INT, name TEXT)');
db.run('INSERT INTO users VALUES (?, ?)', [1, 'Alice']);
const result = db.exec('SELECT * FROM users');

package main

import "syscall/js"

func add(this js.Value, args []js.Value) any {
    return args[0].Int() + args[1].Int()
}

func main() {
    js.Global().Set("addWasm", js.FuncOf(add))
    select {} // Keep running
}

GOOS=js GOARCH=wasm go build -o main.wasm

import wasm from './module.wasm';

export default {
  async fetch(request: Request): Promise<Response> {
    const instance = await WebAssembly.instantiate(wasm);
    const result = instance.exports.fibonacci(40);
    return new Response(`fib(40) = ${result}`);
  },
};

Browser:  WASM + JS API
Server:   WASM + WASI (filesystem, network, clock)