WebAssembly (Wasm) – Web không còn “chậm chạp” nữa

Trong suốt hơn 20 năm, lập trình web luôn gắn liền với JavaScript – ngôn ngữ duy nhất mà trình duyệt hiểu. Nhưng điều gì sẽ xảy ra nếu bạn có thể chạy code C, C++, Rust, Go,… ngay trên trình duyệt, với hiệu năng gần như native?

Giới thiệu với bạn WebAssembly (Wasm) – một cuộc cách mạng thầm lặng, nhưng cực kỳ mạnh mẽ trong thế giới lập trình web.

WebAssembly là gì?

WebAssembly (Wasm) là một định dạng bytecode nhị phân có thể chạy trên trình duyệt. Nó không thay thế JavaScript, mà bổ sung thêm khả năng chạy các chương trình hiệu suất cao.

Bạn viết code bằng C, Rust, Go…

Biên dịch sang WebAssembly

Và chạy ngay trong trình duyệt như một ứng dụng native.

Lý do WebAssembly đang hot

Hiệu năng gần với C/C++, vượt xa JavaScript trong nhiều tác vụ tính toán nặng
Bảo mật cao, sandboxed hoàn toàn trong trình duyệt
Đa nền tảng, chạy được trên mọi trình duyệt hiện đại (Chrome, Firefox, Safari…)
Tương thích tốt với JavaScript – có thể gọi qua lại giữa Wasm và JS

Ví dụ thực tế

1. Canva, Figma

Ứng dụng thiết kế đồ hoạ trên web như Canva hoặc Figma sử dụng Wasm để xử lý đồ hoạ nhanh hơn, tránh giật lag khi người dùng kéo thả, zoom, thao tác liên tục.

2. Photoshop trên Web

Adobe đã đưa một phần của Photoshop chạy trên trình duyệt bằng cách biên dịch C++ sang WebAssembly. Giúp người dùng chỉnh sửa ảnh gần như mượt như ứng dụng desktop.

3. AutoCAD Web

AutoDesk dùng WebAssembly để đưa toàn bộ nền tảng AutoCAD (vốn rất nặng) lên web, hoạt động nhanh và chính xác như phần mềm gốc.

Dành cho dev: Dùng Wasm thế nào?

Bạn có thể:

Dùng Rust + wasm-pack để build frontend web hiệu năng cao
Dùng Go 1.21+ để build app chạy trong trình duyệt
Sử dụng thư viện WebAssembly như wasmer, wasmtime để nhúng Wasm vào backend (serverless function, plugin…)

Ví dụ: Hello WebAssembly với Go

// main.go
package main

import "syscall/js"

func main() {
  alert := js.Global().Get("alert")
  alert.Invoke("Xin chào từ Go và WebAssembly!")
}

Sau đó biên dịch:

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

Cấu trúc thư mục frontend:

.
├── index.html
├── main.wasm
└── wasm_exec.js

Copy wasm_exec.js

Go cung cấp một helper JS để khởi chạy Wasm runtime. Bạn cần copy nó về thư mục project:

cp "$(go env GOROOT)/lib/wasm/wasm_exec.js" .

Tạo index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Go WebAssembly Demo</title>
</head>
<body>
  <h1>Demo WebAssembly với Go</h1>
  <script src="wasm_exec.js"></script>
  <script>
    const go = new Go(); // từ wasm_exec.js

    WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject)
      .then((result) => {
        go.run(result.instance);
      })
      .catch(err => {
        console.error("Lỗi khởi động Wasm:", err);
      });
  </script>
</body>
</html>

Vậy là bạn đã có… Go chạy trong trình duyệt!

Tương lai WebAssembly

Game engine chạy trên web (Unity, Unreal Engine)
Machine Learning trên browser
Ứng dụng tài chính, đồ thị, xử lý video realtime
Plugin hệ thống – như cách Figma mở rộng bằng plugin viết bằng Wasm

Kết luận

WebAssembly là viên gạch nền của “Web 3.0 thật sự” – nơi mà bạn không còn bị giới hạn bởi tốc độ JavaScript.

Nếu bạn đang:

Xây dựng ứng dụng tính toán nặng (video, game, AI)
Muốn tái sử dụng code backend trên frontend (Go, Rust)
Làm plugin cho web app như Figma, Photoshop

…thì đây là lúc để học WebAssembly.