Belajar WebAssembly - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar WebAssembly! Series ini akan membawa kalian menguasai WebAssembly (Wasm) — format bytecode binary portabel berperforma near-native yang berjalan di browser, edge, dan server — dari konsep inti (Wasm 3.0), toolchain (Rust wasm-pack / C++ Emscripten), hingga aplikasi produksi (WASI, Component Model, plugin systems, serverless). Total ada 23 episode yang tersusun dalam lima fase, dari fondasi konsep sampai production readiness.

Tapi sebelum menulis .wat pertama, ada skill dasar dan perangkat yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena WebAssembly tidak pernah berdiri sendiri: ia selalu di-embed — dijalankan oleh JavaScript di browser, oleh runtime seperti Wasmtime di server, atau oleh platform edge seperti Cloudflare Workers. Tanpa memahami dasar JavaScript dan cara kerja browser, kalian akan kesulitan saat berurusan dengan interop di episode 6.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan toolchain, dan memverifikasi environment untuk pertama kali. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dimiliki

#Dasar JavaScript (Modul dan Promise/async)

Wasm di browser dipanggil lewat JavaScript API (WebAssembly.instantiate), jadi kalian wajib nyaman dengan modul ES, Promise/async/await, dan Uint8Array/ArrayBuffer. Instantiating sebuah modul bersifat asinkron, dan di episode 6 kita akan memakai WebAssembly.compileStreaming yang mengembalikan Promise. Kalian tidak perlu mahir frontend, tetapi harus paham dasar-dasar ini.

Sinyal kecil bahwa JS dasar sudah dikuasai

const bytes = new Uint8Array([0x00, 0x61, 0x73, 0x6d])
const wasm = await WebAssembly.instantiate(bytes)
console.log(wasm)

#Satu Bahasa Compile-to-Wasm (Rust atau C/C++)

Wasm jarang ditulis manual dalam format binary .wasm; biasanya ia dikompilasi dari bahasa tingkat tinggi. Pilih satu:

• Rust (dianjurkan) — keamanan memory, toolchain modern (wasm-pack, wasm-bindgen), dan ekosistem yang paling aktif untuk Wasm. Dipakai mulai episode 7.
• C/C++ — paling dekat dengan model memory linear Wasm, dan toolchain Emscripten sangat matang. Dipakai mulai episode 8.

Jika belum pernah memakai keduanya, jangan khawatir — kita akan memakai Rust secara intensif, jadi pastikan sintaks dasarnya (variabel, fungsi, struct, impl) sudah terasa familiar.

#Konsep Web: Browser dan HTTP

Wasm lahir untuk browser, dan kini merambah ke server serta edge. Kalian perlu memahami: bagaimana browser mengeksekusi JavaScript, apa itu HTTP request/response, dan perbedaan client-side vs server-side execution. Ini menjadi fondasi saat kita membahas edge functions di episode 12 dan networking di episode 17.

#Perangkat Software dan Hardware yang Disiapkan

#Node.js (Runtime + Host Pengujian)

Node.js bisa memuat modul Wasm secara native tanpa browser. Ini jadi host uji paling cepat sepanjang series:

node --version
npm --version

Pastikan node --version mayor 18 atau lebih tinggi. Jika belum ada, install lewat nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
nvm install 22
nvm use 22

#Rust Toolchain (rustup + cargo)

Jika kalian memilih jalur Rust, install rustup (toolchain manager resmi):

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source "$HOME/.cargo/env"
rustc --version
cargo --version

Lalu tambahkan target kompilasi ke Wasm — ini bagian yang sering terlewat:

rustup target add wasm32-unknown-unknown

Target ini menghasilkan .wasm murni tanpa runtime — dasar dari pipeline wasm-pack di episode 7. Untuk WASI (episode 10), kita juga akan butuh target wasm32-wasip2 nanti.

#wasm-tools (Toolkit Bytecode)

wasm-tools adalah toolkit resmi dari Bytecode Alliance untuk memvalidasi, mengubah, dan membedah modul Wasm. Install lewat cargo:

cargo install wasm-tools
wasm-tools --version

Kita akan memakai wasm-tools print (membaca .wat), wasm-tools validate, dan wasm-tools dump secara rutin mulai episode 3 sampai 14.

#Emscripten (Opsional, untuk Jalur C/C++)

Jika memilih C/C++, install emscripten SDK lewat emsdk. Kita detailkan di episode 8 — untuk sekarang cukup tahu bahwa tool ini akan menyediakan emcc (compiler C/C++ ke Wasm). Kalian bisa menundanya jika fokus ke Rust.

#Browser Modern dan Editor

Browser modern (Chrome, Firefox, Safari, Edge) sudah mendukung Wasm penuh dan punya devtools khusus — termasuk tab Wasm di Chrome DevTools untuk menelusuri module. Editor favorit kalian, plus ekstensi yang mendukung syntax WAT/.wat dan Rust, akan sangat membantu.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

node --version
wasm-tools --version
rustc --version && cargo --version
rustup target list --installed | grep wasm
node -e "console.log(typeof WebAssembly)"

Semua perintah harus mencetak versi tanpa error. Dua sinyal penting:

• node -e "console.log(typeof WebAssembly){:js}" harus mencetak object — berarti runtime Node mendukung WebAssembly native.
• rustup target list --installed harus menampilkan wasm32-unknown-unknown — berarti toolchain siap mengkompilasi ke Wasm.

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• Skill: dasar JavaScript (modul, Promise/async), satu bahasa compile-to-wasm (Rust dianjurkan / C/C++), dan konsep web (browser, HTTP).
• Runtime: Node.js 18+ terinstall, WebAssembly API tersedia.
• Toolchain: Rust + target wasm32-unknown-unknown, dan wasm-tools tervalidasi.
• Opsional: Emscripten SDK untuk jalur C/C++ (episode 8), browser modern untuk uji frontend.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Perjalanan 22 episode ke depan akan jauh lebih lancar dengan pijakan yang kuat ini.

#Penutup

Inti yang harus dibawa pulang:

• WebAssembly selalu di-embed: pahami dasar JavaScript dan konsep web sebelum mendalaminya.
• Siapkan Node.js 18+, Rust + target wasm32-unknown-unknown, dan wasm-tools.
• Tambahkan target Wasm lewat rustup target add — bagian yang paling sering terlupakan.
• Verifikasi dengan perintah versi dan cek ketersediaan objek WebAssembly di Node.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa kalian membutuhkan WebAssembly — dari pengumumannya pada 2015 oleh Mozilla/Google/Microsoft/Apple, rilis Wasm 1.0 sebagai W3C Recommendation pada Desember 2019, hingga alasan Wasm menjadi pilihan untuk performa near-native, sandboxing, dan portabilitas lintas bahasa. Pastikan environment kalian sudah siap, karena perjalanan Belajar WebAssembly baru saja dimulai!