Belajar WebAssembly - Konsep Dasar & Arsitektur

#Pendahuluan

Setelah di episode 1 kita memahami mengapa WebAssembly lahir — performa near-native, sandbox, dan portabilitas — pada episode ini kita masuk ke dalam mesinnya: bagaimana arsitektur Wasm bekerja. Ini adalah fondasi paling penting sepanjang series, karena semua topik setelahnya — dari WAT syntax di episode 4 sampai optimasi di episode 15 — berdiri di atas pemahaman ini.

Mengapa arsitektur penting? Karena Wasm bukan bahasa pemrograman seperti JavaScript atau Rust. Ia adalah format bytecode yang dirancang untuk dieksekusi oleh mesin virtual. Memahami model eksekusinya akan menjelaskan mengapa ia cepat, mengapa ia aman, dan mengapa ada batasan-batasan tertentu yang tampak aneh bagi programmer aplikasi biasa.

#Stack-Based Virtual Machine

Wasm adalah stack-based virtual machine. Artinya, hampir semua operasi bekerja dengan mengambil nilai dari tumpukan (stack), lalu menaruh hasilnya kembali ke tumpukan. Bandingkan dengan mesin berbasis register (seperti kebanyakan CPU x86/ARM) yang menyimpan nilai dalam register bernama.

Analoginya: bayangkan tumpukan piring. Untuk menghitung 2 + 3, kalian taruh angka 2 di atas tumpukan, taruh 3 di atasnya, lalu instruksi i32.add mengambil dua piring teratas dan menaruh hasilnya (5) sebagai satu piring baru.

Desain ini membuat format bytecode sangat ringkas dan mudah divalidasi — keuntungan besar untuk keamanan (setiap instruksi diverifikasi sebelum dieksekusi) dan untuk kompresi (ukuran file kecil).

#Format Binary .wasm dan Teks .wat

Sebuah modul Wasm hadir dalam dua bentuk yang setara:

Keduanya bisa dikonversi bolak-balik. Tools seperti wat2wasm (dari wabt) dan wasm-tools mengubah .wat menjadi .wasm dan sebaliknya (wasm2wat). Semua modul Wasm diawali dengan magic number \0asm — empat byte 00 61 73 6d yang bisa kalian lihat langsung di hex editor.

wasm-tools parse hello.wat -o hello.wasm
xxd hello.wasm | head -1

Baris pertama output xxd akan menampilkan 0000: 0061 736d — itulah magic number \0asm yang menandai sebuah modul Wasm valid.

#Linear Memory 32-bit

Wasm memiliki model memory yang unik: linear memory. Bayangkan sebuah array raksasa byte (maksimum 4 GB karena address space 32-bit) yang bisa diakses dengan offset numerik. Tidak ada pointer seperti di C, tidak ada objek seperti di JS — hanya blok byte yang lurus.

• Memory diukur dalam halaman (pages); 1 page = 64 KB.
• Instruksi memory.size menanyakan ukuran saat ini, memory.grow menambahkannya.
• Dari sisi JavaScript, memory ini terlihat sebagai ArrayBuffer (atau WebAssembly.Memory), sehingga bisa diakses sebagai Uint8Array/DataView.

Dari sinilah datang batasan penting: Wasm murni tidak punya akses ke memory proses host kecuali lewat memory linear yang disediakan. Ini inti sandboxing — di episode 5 kita bedah memory secara mendalam.

#Komponen Utama Sebuah Modul

Sebuah modul Wasm bisa berisi beberapa komponen. Empat yang paling penting:

#Instruksi dan Tipe Nilai

Instruksi bekerja pada empat tipe numerik dasar: i32, i64 (integer), f32, f64 (floating point). Tidak ada tipe string, objek, atau boolean — semuanya direpresentasikan sebagai angka atau byte dalam memory.

#Functions

Blok kode yang bisa dipanggil, dengan (param) dan (result). Fungsi export bisa dipanggil dari JavaScript; fungsi import disediakan oleh host (seperti console.log). Ini satu-satunya cara Wasm berinteraksi dengan dunia luar.

#Tables dan Globals

• Table — array of function references, dipakai untuk function pointers (dipanggil via call_indirect). Detail di episode 5.
• Global — variabel mutable/immutable tingkat modul, berbagi nilai antar fungsi.

#Memories

Satu (atau lebih, dengan multi-memory di Wasm 3.0) area linear memory yang bisa diakses oleh instruksi load/store. Ukurannya dinamis via memory.grow, dan dari sisi JS direpresentasikan sebagai WebAssembly.Memory.

#Embedding via JavaScript API

Wasm tidak pernah berjalan sendiri — ia selalu di-embed. Di browser, host-nya adalah JavaScript. Alur standarnya:

Embedding dasar WebAssembly di JS

const { instance } = await WebAssembly.instantiateStreaming(
  fetch("module.wasm"),
  { env: { hostFunction: () => console.log("dari host") } }
)
const hasil = instance.exports.fungsiYangDiexport(42)
console.log(hasil)

WebAssembly.instantiate (atau versi streaming-nya) mengkompilasi bytecode sekaligus membuat instance — memori, tabel, dan fungsi yang siap dipanggil. Kita bedah seluruh API ini secara detail di episode 6.

#Kekurangan dan Batasan yang Wajib Diketahui

Agar kalian tidak salah ekspektasi, catat batasan fundamental Wasm:

• Tidak ada I/O langsung — tidak bisa akses file, jaringan, atau console tanpa bantuan host (import functions / WASI).
• Tidak ada garbage collector di Wasm murni — memory dikelola manual (WasmGC di episode 9 mengubah ini).
• Perbedaan data — string dan objek JS tidak langsung cocok; butuh serialisasi atau wrapper (wasm-bindgen).

#Penutup

Pada episode 2 ini, kalian telah memahami arsitektur inti WebAssembly sebagai stack-based virtual machine dengan linear memory 32-bit dan komponen modul yang terisolasi.

Inti yang harus dibawa pulang:

• Wasm adalah stack-based VM — instruksi mengambil/menaruh nilai dari tumpukan.
• Ada dua representasi setara: binary .wasm dan teks .wat, dimulai magic number \0asm.
• Linear memory 32-bit (page 64 KB) adalah satu-satunya jembatan data dengan host.
• Komponen modul: functions, tables, globals, memories — di-embed lewat WebAssembly.instantiate.

Di episode 3 selanjutnya, kita langsung praktik: instalasi dan Hello World pertama di WebAssembly — menulis modul .wat sederhana, mengkompilasinya menjadi .wasm dengan wasm-tools, dan menjalankannya di Node.js serta browser console. Sampai jumpa di episode 3!