Tujuan Pembelajaran

Memahami konsep WASM
Mengetahui use cases WASM

Analogi

Diagram


      JavaScript = Interpreter
Baca per baris, jalankan

WASM = Binary
Compile sekali, jalankan cepat

WASM membawa performa near-native ke browser

Penjelasan Konsep

WebAssembly (WASM)

WebAssembly (WASM) adalah binary instruction format yang berjalan di browser dengan performa near-native. WASM bukan pengganti JavaScript — melainkan partner.

Kenapa WASM?

Performa. Kode compile jauh lebih cepat dari JavaScript interpreted.
Portability. Satu binary berjalan di semua browser dan platform.
Language choice. Tulis di Rust, C++, Go — compile ke WASM.

Use cases

Game browser. Unity, Unreal Engine support WASM.
Video/photo editing. Photoshop web, Figma.
ML inference. TensorFlow.js dengan WASM backend.
Cryptography. Operasi crypto yang intensif.
Scientific computing. Simulasi, rendering di browser.

Limitasi

Tidak bisa akses DOM langsung (harus via JS bridge). Tidak punya garbage collector (manual memory management). File size binary lebih besar dari JavaScript.

Inti yang Perlu Dipahami

Bagian ini berfokus pada memahami konsep WASM., dan mengetahui use cases WASM. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca WebAssembly, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

WASM membawa performa near-native ke browser. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa javascript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Fetch wasm file, instantiate dengan imports, panggil exported function. Memory dibagikan antara JS dan WASM.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

javascript

async function loadWasm() {
  const response = await fetch('/app.wasm');
  const bytes = await response.arrayBuffer();
  const module = await WebAssembly.instantiate(bytes, {
    env: {
      memory: new WebAssembly.Memory({ initial: 256 }),
      abort: () => console.log('abort')
    }
  });
  const result = module.instance.exports.add(5, 3);
  console.log(result); // 8
}

Penjelasan Kode

Fetch wasm file, instantiate dengan imports, panggil exported function. Memory dibagikan antara JS dan WASM.

Prompt AI

Jelaskan 3 use cases WASM yang cocok untuk aplikasi web.

Pertanyaan Reflektif

Kapan WASM lebih baik dari JavaScript?