Rust กับ WASM (WebAssembly): เขียนโปรแกรมเบราว์เซอร์ที่เร็วสุดๆ

Sharing is caring!

WebAssembly หรือ WASM คือเทคโนโลยีที่เปลี่ยนโลกของเว็บแอป ด้วยการนำโค้ดระดับ system มารันในเบราว์เซอร์ได้อย่างรวดเร็ว! และ Rust คือหนึ่งในภาษาที่รองรับ WASM ได้อย่างดีเยี่ยม

บทความนี้จะพาคุณเข้าใจภาพรวมของ WebAssembly, วิธีเขียนโปรแกรม Rust สำหรับเบราว์เซอร์ และแนวทางการ deploy พร้อมตัวอย่างใช้งานจริง

WebAssembly คืออะไร?

  • WebAssembly (WASM) เป็นรูปแบบไบนารี (binary) ที่รันในเบราว์เซอร์ได้
  • ถูกออกแบบมาให้ เร็ว, ปลอดภัย และเป็น sandbox
  • รองรับโดยเบราว์เซอร์หลักทั้งหมด เช่น Chrome, Firefox, Safari, Edge
  • สามารถเขียนด้วยภาษาระดับล่าง เช่น Rust, C, C++

ทำไม Rust จึงเหมาะกับ WASM?

  • Rust ควบคุม memory ได้อย่างละเอียด
  • ไม่มี garbage collector = ประสิทธิภาพสูง
  • รองรับ toolchain อย่างเป็นทางการ เช่น wasm-bindgen และ wasm-pack

เป้าหมายของ Rust+WASM

  • เขียนส่วนที่ต้องการ performance สูงด้วย Rust
  • เชื่อมต่อกับ JavaScript ได้อย่างไร้รอยต่อ
  • รัน Rust ใน frontend ได้อย่างปลอดภัย

ติดตั้งเครื่องมือ

# ติดตั้ง target wasm
rustup target add wasm32-unknown-unknown

# ติดตั้ง wasm-pack
cargo install wasm-pack

สร้างโปรเจกต์ WASM

wasm-pack new wasm_demo
cd wasm_demo

โครงสร้างโปรเจกต์ที่ได้:

wasm_demo/
├── Cargo.toml
├── src/
│   └── lib.rs
├── pkg/
└── README.md

แก้ไข lib.rs

use wasm_bindgen::prelude::*;

/// ฟังก์ชันนี้จะถูกเรียกจาก JS
#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

Build เป็น WASM

wasm-pack build --target web

คุณจะได้โฟลเดอร์ pkg/ ที่มีไฟล์ WASM และ JS glue code

ใช้งานใน HTML/JavaScript

<!DOCTYPE html>
<html>
  <head><title>Rust + WASM</title></head>
  <body>
    <script type="module">
      import init, { add } from "./pkg/wasm_demo.js";

      async function run() {
        await init();
        console.log("1 + 2 =", add(1, 2));
      }

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

Deploy แบบ Static

  1. ใช้ basic-http-server หรือ vite เพื่อ serve ไฟล์
  2. หรือ deploy ผ่าน GitHub Pages, Cloudflare Pages ได้ทันที
npm install -g serve
serve .

กรณีต้องการเชื่อมกับ DOM

ใช้ web-sys และ wasm-bindgen

use wasm_bindgen::prelude::*;
use web_sys::console;

#[wasm_bindgen(start)]
pub fn run() {
    console::log_1(&"Hello from Rust!".into());
}

Debug Rust WASM

  • เปิด DevTools เพื่อดู log
  • สามารถใช้ console_error_panic_hook เพื่อจับ panic

ข้อดีของ Rust กับ WASM

  • Performance สูงมากเมื่อเทียบกับ JS
  • โค้ดสามารถ reuse ได้ในหลาย platform
  • ปลอดภัย เพราะไม่มี undefined behavior

ข้อเสีย

  • ต้อง build และ deploy ก่อนใช้งาน
  • ยังต้องเขียน JS ในบางส่วน เช่น DOM access

กรณีศึกษา

  • Figma ใช้ WASM เพื่อ render UI ด้วย Rust
  • Dropbox ใช้ Rust+WASM เพื่อ encode/decode ไฟล์

บทสรุป

Rust กับ WebAssembly คือการจับคู่ที่ลงตัวสำหรับการเขียนเว็บแอปที่ เร็ว, เบา, ปลอดภัย ในยุคที่ความเร็วของ frontend เป็นหัวใจหลัก

ถ้าคุณเขียน Rust อยู่แล้ว หรือมองหาวิธีดึง performance ในเบราว์เซอร์ — WASM คือเทคโนโลยีที่ไม่ควรมองข้าม

เขียน Rust หนึ่งครั้ง ใช้งานได้ทั้งบนเว็บ, native, embedded — โลกทั้งใบคือ platform ของคุณ!

Leave a Reply

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *