# Perbedaan antara WASM dan Native Binding (C++)

kunci untuk mengerti *mengapa TensorFlow.js bisa jalan di browser, tapi juga bisa jauh lebih cepat di Node.js*.

Kita akan bahas dengan analogi sederhana dulu, baru lanjut ke teknis 👇

---

## 🧩 Analogi Sederhana

Bayangkan kamu punya **otot (CPU/GPU)** dan **otak (JavaScript)**:

* JavaScript itu otak yang pintar tapi pelan (interpreted, garbage-collected).
    
* Otot bisa disuruh kerja cepat kalau kamu bisa “berbicara” dalam bahasa mesin mereka.  
    Nah, untuk berkomunikasi dengan otot ini, ada dua cara:
    

| Cara | Bahasa komunikasi | Performa | Portabilitas |
| --- | --- | --- | --- |
| **Native Binding (C++)** | Bahasa asli mesin (binary native) | ⚡ Sangat cepat | ⚠️ Terikat OS & arsitektur |
| **WebAssembly (WASM)** | Bahasa mesin universal (virtual) | ⚡ Cepat tapi di bawah native | ✅ Bisa jalan di mana saja (browser, server, mobile) |

---

## ⚙️ 1. Apa Itu Native Binding (C++)

**Native Binding (C++)** artinya kita menghubungkan kode JavaScript langsung dengan library native (biasanya C atau C++).  
Jadi JavaScript “memanggil” fungsi yang sebenarnya berjalan di level sistem operasi.

🔧 Contohnya:

```cpp
// C++
double multiply(double a, double b) {
  return a * b;
}
```

JavaScript memanggilnya melalui binding:

```js
const addon = require('./binding.node');
console.log(addon.multiply(5, 10)); // 50
```

📌 Ciri-ciri:

* Berjalan langsung di CPU (native binary).
    
* Harus dikompilasi untuk sistem operasi tertentu (Windows, Linux, macOS).
    
* Performa maksimal (mendekati C++ murni).
    
* Tidak bisa dijalankan di browser tanpa server.
    

🧠 Contoh library yang pakai native binding:

* `@tensorflow/tfjs-node`
    
* `sharp` (image processing)
    
* `sqlite3`
    
* `bcrypt`
    

---

## 🌍 2. Apa Itu WebAssembly (WASM)

**WebAssembly (WASM)** adalah **format biner lintas platform** yang bisa dijalankan oleh browser atau runtime mana pun yang mendukung mesin WASM.  
WASM dibuat agar kode **C, C++, Rust, dll.** bisa dijalankan di browser **tanpa perlu akses langsung ke OS.**

🔧 Contoh (konsepnya):

```c
// C
int add(int a, int b) { return a + b; }
```

Dikompilasi menjadi `.wasm`, lalu dijalankan di JavaScript:

```js
const wasm = await WebAssembly.instantiateStreaming(fetch('add.wasm'));
console.log(wasm.instance.exports.add(5, 7)); // 12
```

📌 Ciri-ciri:

* Tidak terikat sistem operasi atau CPU tertentu.
    
* Aman, sandboxed (tidak bisa mengakses file system langsung).
    
* Bisa jalan di browser, Node.js, Deno, Bun.
    
* Biasanya **lebih lambat sedikit** dibanding native C++ karena dijalankan lewat virtual machine (WASM VM).
    

🧠 Contoh library berbasis WASM:

* `@tensorflow/tfjs` (browser mode → backend WebGL/WASM)
    
* `wasm-vips` (image processing di browser)
    
* `ffmpeg.wasm` (video encoder di browser)
    

---

## ⚖️ 3. Perbandingan Langsung

| Aspek | Native Binding (C++) | WebAssembly (WASM) |
| --- | --- | --- |
| **Lokasi eksekusi** | Server / OS langsung | Browser / runtime universal |
| **Performa** | ⚡ Tercepat (native CPU) | ⚡ Cepat tapi 10–30% lebih lambat |
| **Keamanan** | Bisa akses file system, jaringan, dll. | Sandbox, aman dari OS |
| **Portabilitas** | Tergantung OS (harus compile ulang) | Portabel ke mana saja |
| **Distribusi** | Butuh binary `.node` atau `.dll` | Cukup kirim file `.wasm` |
| **Akses GPU** | Bisa (CUDA, Metal, dll.) | Terbatas (via WebGPU/WebGL) |
| **Contoh runtime** | Node.js, Bun, Python bindings | Browser, Node, Deno, Bun |
| **Cocok untuk** | Backend AI, server processing | Frontend inference, sandboxed apps |

---

## 🚀 4. Studi Kasus: TensorFlow.js

TensorFlow.js punya dua mode utama:

| Mode | Backend | Teknologi | Kelebihan |
| --- | --- | --- | --- |
| **Browser Mode** | `@tensorflow/tfjs` | WebGL / WASM | Bisa jalan tanpa server |
| **Server Mode** | `@tensorflow/tfjs-node` | Native Binding (C++) | Performa setara TensorFlow Python |

🔹 Jadi:

* Kalau kamu mau **model AI langsung di browser** → pakai **WASM** (portabel, aman).
    
* Kalau kamu mau **AI di server untuk API inference cepat** → pakai **C++ Native Binding**.
    

---

## 🧭 5. Kesimpulan

| Tujuan | Pilihan Tepat | Alasan |
| --- | --- | --- |
| Aplikasi web interaktif | WASM | Portabel & ringan |
| Backend AI server | Native C++ | Akses penuh ke hardware |
| Edge device (IoT, mini AI) | WASM | Aman & lintas platform |
| Training model besar | Native C++ | Butuh GPU & performa tinggi |

---

## 📘 Ringkasan

* **WASM** → Mesin virtual lintas platform, sandboxed, cocok untuk browser.
    
* **Native Binding (C++)** → Akses langsung ke sistem, super cepat, tapi tergantung OS.
    
* **Keduanya bisa berjalan di Node.js/Bun**, tergantung use case.
    
* TensorFlow.js memanfaatkan **WASM di browser** dan **C++ native binding di server**.
    

---

Kalimat kuncinya:

> “WASM adalah jembatan lintas dunia, sedangkan Native Binding adalah jalan tol ke performa puncak.”