Belajar WebAssembly - C/C++ + Emscripten

#Pendahuluan

Setelah di episode 7 kita membangun pipeline Rust + wasm-pack — pada episode ini kita menempuh jalur yang kedua: C/C++ + Emscripten. Emscripten adalah toolchain paling tua dan paling matang untuk kompilasi ke WebAssembly, dan pilihan utama saat kalian ingin me-port kode legacy berbahasa C/C++ — game engine, codec, library scientific — ke browser.

Mengapa Emscripten masih relevan? Karena ekosistem C/C++ sangat besar. Library seperti libjpeg, zlib, ffmpeg, atau Bullet Physics ditulis puluhan tahun lalu, dan Emscripten memungkinkan menggunakannya di web tanpa menulis ulang. Ia juga menyediakan emulasi POSIX yang lengkap — filesystem, threading (pthreads), bahkan OpenGL — yang tidak tersedia di jalur Rust murni.

#Instalasi emsdk

Emscripten dikelola lewat emsdk (Emscripten SDK manager):

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh
emcc --version

emcc --version harus mencetak versi tanpa error. Jangan lupa source ./emsdk_env.sh setiap kali membuka terminal baru, atau tambahkan ke ~/.zshrc.

#Hello World Pertama

Buat file hello.c:

hello.c

#include <stdio.h>
 
int main() {
    printf("Hello dari C! \\n");
    return 0;
}

Kompilasi dengan Emscripten:

emcc hello.c -o hello.html

Emscripten menghasilkan tiga file: hello.html (halaman demo), hello.js (glue code), dan hello.wasm (bytecode). Buka hello.html di browser — kalian akan melihat output printf dirender ke console dan layar.

Kenapa ini bisa bekerja? Emscripten memetakan fungsi POSIX (termasuk printf) ke implementasi JavaScript yang ditulis ke terminal virtual. Inilah yang dimaksud emulasi POSIX — kode C yang sama bisa berjalan di Linux dan di browser.

#EMSCRIPTEN_KEEPALIVE

Fungsi C yang ingin dipanggil dari JS perlu di-export. Tanpa dekorasi, compiler akan membuang fungsi yang tidak dipakai dari hasil akhir:

math.c

#include <emscripten/emscripten.h>
 
EMSCRIPTEN_KEEPALIVE
int tambah(int a, int b) {
    return a + b;
}
 
EMSCRIPTEN_KEEPALIVE
int faktorial(int n) {
    return n <= 1 ? 1 : n * faktorial(n - 1);
}

EMSCRIPTEN_KEEPALIVE memberi tahu compiler: jangan buang fungsi ini, export ke JS. Lalu compile:

emcc math.c -o math.js -s EXPORTED_FUNCTIONS="[_tambah, _faktorial]"

Perhatikan prefix underscore: fungsi C tambah muncul sebagai _tambah di sisi JS. Panggil dari Node:

const { _tambah, _faktorial } = require("./math.js")
 
console.log("tambah:", _tambah(40, 2))
console.log("faktorial:", _faktorial(5))

node panggil-math.js

tambah: 42
faktorial: 120

#Embind: Binding Class C++

Memanggil fungsi per fungsi cepat jadi membosankan untuk kode berorientasi objek. Embind otomatis menghasilkan binding untuk class C++:

#include <emscripten/bind.h>
 
class Lingkaran {
public:
    Lingkaran(double r) : radius(r) {}
    double luas() const { return 3.14159265 * radius * radius; }
    double keliling() const { return 2 * 3.14159265 * radius; }
private:
    double radius;
};
 
EMSCRIPTEN_BINDINGS(geometri) {
    class_<Lingkaran>("Lingkaran")
        .constructor<double>()
        .function("luas", &Lingkaran::luas)
        .function("keliling", &Lingkaran::keliling);
}

Compile dengan flag embind:

emcc geometri.cpp -o geometri.js --bind

Di JS, class C++ dipakai seperti class biasa:

pakai-embind.js

const { Lingkaran } = require("./geometri.js")
 
const lingkaran = new Lingkaran(7)
console.log("luas:", lingkaran.luas())
console.log("keliling:", lingkaran.keliling())
 
lingkaran.delete()

lingkaran.delete() membebaskan memori yang dialokasikan C++ — penting karena JavaScript garbage collector tidak tahu soal objek C++.

#Filesystem MEMFS

Emscripten menyediakan sistem file virtual MEMFS — filesystem di dalam memory. Kode C yang membaca/menulis file langsung bekerja:

fs.c

#include <stdio.h>
 
int main() {
    FILE *f = fopen("/data/hello.txt", "w");
    fprintf(f, "data ditulis oleh C");
    fclose(f);
 
    char buf[64];
    FILE *r = fopen("/data/hello.txt", "r");
    fgets(buf, sizeof(buf), r);
    fclose(r);
    printf("dibaca: %s \\n", buf);
    return 0;
}

Agar file /data/hello.txt tersedia, gunakan flag --preload-file:

mkdir -p data
echo "file virtual di MEMFS" > data/hello.txt
emcc fs.c -o fs.js --preload-file data

File data/hello.txt dibundel ke dalam filesystem virtual dan bisa dibaca oleh kode C seolah-olah file nyata. Ini alasan Emscripten sering dipakai untuk game — aset seperti tekstur dan level disimpan via MEMFS.

#Common Pitfalls

• printf tidak muncul di console — pastikan membuka DevTools; output Emscripten pergi ke console browser, bukan halaman.
• Lupa -s EXPORTED_FUNCTIONS — fungsi C tidak di-export akan dibuang optimizer; gunakan EMSCRIPTEN_KEEPALIVE atau daftar eksplisit.
• Prefix underscore — selalu ingat _nama_fungsi di sisi JS.
• Memory leak objek embind — selalu panggil .delete().
• File tidak ditemukan — path di kode C harus cocok dengan struktur folder yang di---preload-file.

#Penutup

Pada episode 8 ini, kalian telah menguasai jalur C/C++ ke WebAssembly: emsdk, emcc, export fungsi, embind, dan filesystem MEMFS.

Inti yang harus dibawa pulang:

• Emscripten (emcc) mengkompilasi C/C++ menjadi .html/.js/.wasm dengan emulasi POSIX.
• EMSCRIPTEN_KEEPALIVE atau EXPORTED_FUNCTIONS diperlukan agar fungsi bisa dipanggil dari JS.
• Embind menghasilkan binding class C++ yang nyaman; wajib .delete() objeknya.
• MEMFS menyediakan filesystem virtual, cocok untuk mem-port kode yang bergantung pada file.

Di episode 9 selanjutnya kita akan membahas Wasm 3.0 dan fitur-fitur modernnya — WasmGC, exception handling (exnref), tail-call, multi-memory, relaxed SIMD, flexible vectors, dan baseline Wasm 2.0. Sampai jumpa di episode 9!