# ⚙️ Bagaimana TensorFlow.js Memilih Backend: WASM, WebGL, dan C++

TensorFlow.js sebenarnya bukan hanya library JavaScript untuk AI, tapi juga **lapisan abstraksi** di atas berbagai *backend engine* yang bisa menjalankan operasi matematika (tensor ops).  
Jadi, saat kamu menulis:

```js
const y = tf.matMul(a, b);
```

TensorFlow.js **tidak langsung menghitung di JavaScript**, tapi **mengoper ke backend** (WASM, WebGL, atau C++) yang paling cocok dan cepat di lingkungan tersebut.

---

## 🧩 1. Arsitektur Umum TensorFlow.js

```typescript
+---------------------------+
|   Your Code (JavaScript)  |
+---------------------------+
            ↓
+---------------------------+
|   TensorFlow.js Core API  |
+---------------------------+
            ↓
+---------------------------+
|   Backend:                |
|   • WebGL (GPU Browser)   |
|   • WASM (CPU Browser)    |
|   • Node (C++)            |
|   • WebGPU (eksperimen)   |
+---------------------------+
```

---

## ⚙️ 2. Jenis Backend dan Karakteristiknya

| Backend | Lingkungan | Engine | Performa | Kelebihan |
| --- | --- | --- | --- | --- |
| `webgl` | Browser | GPU (via WebGL shader) | ⚡⚡ Cepat | Memanfaatkan GPU browser |
| `wasm` | Browser / Node | WebAssembly (CPU) | ⚡ Sedang | Portabel, stabil, ringan |
| `cpu` | Semua | Pure JS (fallback) | 🐢 Lambat | Pasti jalan di mana saja |
| `tensorflow` | Node.js | Native TensorFlow C++ | ⚡⚡⚡ Sangat cepat | Akses penuh hardware, mirip Python TF |
| `webgpu` | Browser modern | GPU (via WebGPU API) | ⚡⚡⚡ Eksperimental | Performa GPU generasi baru |

---

## 🔍 3. Bagaimana TensorFlow.js Menentukan Backend

TensorFlow.js punya mekanisme auto-detect dan fallback seperti ini:

1. **Cek environment**
    
    * Apakah sedang di browser, Node.js, Deno, atau Bun?
        
    * Apakah punya GPU/WebGL?
        
2. **Pilih backend default**
    
    * Browser modern → `webgl`
        
    * Browser ringan (tanpa GPU) → `wasm`
        
    * Node.js → `tensorflow` (C++ binding)
        
    * Kalau semuanya gagal → `cpu`
        
3. **Fallback otomatis**  
    Jika backend gagal inisialisasi (misal WebGL tidak tersedia), ia akan turun ke backend berikutnya (misal ke WASM, lalu CPU).
    

---

## 🧠 4. Kamu Bisa Memilih Manual!

TensorFlow.js juga membolehkan developer **memilih backend sendiri** untuk kontrol performa.

### ✅ Contoh di Browser:

```js
import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-wasm';

// Pilih backend WASM
await tf.setBackend('wasm');
await tf.ready();

console.log('Backend aktif:', tf.getBackend());
```

### ✅ Contoh di Node.js:

```js
import * as tf from '@tensorflow/tfjs-node';

// Akan otomatis pakai backend 'tensorflow'
console.log('Backend aktif:', tf.getBackend()); // 'tensorflow'
```

---

## ⚡ 5. Ilustrasi Alur Pemilihan Backend

```mermaid
flowchart TD
  A[Mulai] --> B{Environment?}
  B -->|Browser| C{GPU/WebGL?}
  C -->|Ya| D[Gunakan backend: WebGL]
  C -->|Tidak| E[Gunakan backend: WASM]
  B -->|Node.js| F[Gunakan backend: TensorFlow (C++)]
  B -->|Lainnya| G[Gunakan backend: CPU]
  D --> H[Selesai]
  E --> H
  F --> H
  G --> H
```

---

## 🧬 6. Benchmark Kasar

| Operasi (`matMul` 512x512) | CPU (JS) | WASM | WebGL | TensorFlow (C++) |
| --- | --- | --- | --- | --- |
| Waktu (ms) | ~800 | ~120 | ~25 | ~10 |
| Platform | Semua | Semua | Browser GPU | Node.js |

📊 Artinya:

* `webgl` & `tensorflow` paling cepat untuk GPU/Server.
    
* `wasm` stabil dan portabel.
    
* `cpu` hanya fallback terakhir.
    

---

## 🧩 7. Use Case Rekomendasi

| Use Case | Backend Disarankan | Keterangan |
| --- | --- | --- |
| Aplikasi web interaktif (AI di browser) | `webgl` atau `wasm` | Tanpa kirim data ke server |
| Server inference (API AI) | `tensorflow` | Akses hardware & multi-thread |
| IoT / Edge device | `wasm` | Portabel, ringan |
| Pengujian ringan di dev environment | `cpu` | Untuk debugging sederhana |

---

## ⚙️ 8. Bonus: Kombinasi Multi-Backend

TensorFlow.js mendukung **hot-swap backend** — kamu bisa ganti backend di runtime tanpa restart:

```js
await tf.setBackend('wasm');
// inference ringan di browser
...
await tf.setBackend('webgl');
// sekarang jalankan model lebih berat di GPU
```

Ini sangat berguna kalau kamu ingin **menyesuaikan performa dengan device pengguna.**

---

## 🧭 Kesimpulan

| Backend | Lokasi | Teknologi | Kecepatan | Kelebihan |
| --- | --- | --- | --- | --- |
| **WebGL** | Browser | GPU Shader | ⚡⚡ | Cepat, tapi tidak semua device |
| **WASM** | Browser / Node | WebAssembly CPU | ⚡ | Aman dan portabel |
| **C++ TensorFlow** | Node.js / Bun | Native TensorFlow | ⚡⚡⚡ | Super cepat, bisa akses GPU |
| **CPU JS** | Semua | JS murni | 🐢 | Fallback aman |

🧠 Jadi, TensorFlow.js memilih backend **berdasarkan environment dan ketersediaan hardware**, dan kamu bisa override pilihan itu sesuai kebutuhan project.