Dulu, browser identik dengan website sederhana: membaca artikel, mengisi formulir, menonton video, atau membuka toko online. Namun sekarang browser mampu menjalankan aplikasi yang jauh lebih kompleks, mulai dari editor desain, pengolah gambar, aplikasi 3D, hingga software produktivitas yang sebelumnya identik dengan aplikasi desktop.
Salah satu teknologi yang membantu perkembangan tersebut adalah WebAssembly atau Wasm.
WebAssembly memungkinkan kode dari bahasa seperti C, C++, dan Rust dikompilasi menjadi format biner yang dapat dijalankan browser dengan performa mendekati native. Teknologi ini sangat berguna ketika sebuah aplikasi web harus melakukan komputasi intensif yang kurang ideal jika seluruh pekerjaannya hanya dibebankan pada JavaScript.
Lantas, sebenarnya apa itu WebAssembly, bagaimana cara kerjanya, dan mengapa teknologi ini penting untuk masa depan aplikasi web?
Apa Itu WebAssembly (WASM)?
WebAssembly (Wasm) adalah format instruksi biner tingkat rendah yang dirancang sebagai target kompilasi berbagai bahasa pemrograman. Developer biasanya tidak menulis aplikasi langsung menggunakan sintaks WebAssembly. Sebaliknya, kode dari bahasa lain dikompilasi menjadi file .wasm yang kemudian dapat dimuat dan dijalankan oleh browser.
MDN menjelaskan bahwa WebAssembly dirancang untuk memberikan performa mendekati native sekaligus bekerja berdampingan dengan JavaScript. Bahasa seperti C/C++, C#, dan Rust dapat menjadikan WebAssembly sebagai target kompilasi.
Secara sederhana, alurnya dapat digambarkan sebagai berikut:
C / C++ / Rust → Compiler → WebAssembly (.wasm) → Browser
Dengan pendekatan tersebut, developer dapat membawa kode dan library berperforma tinggi ke lingkungan web tanpa harus menulis ulang semuanya dalam JavaScript.
Mengapa WebAssembly Dibutuhkan?
JavaScript telah menjadi fondasi utama aplikasi web modern dan sangat cocok untuk berbagai pekerjaan, terutama pengelolaan UI, interaksi pengguna, komunikasi dengan server, serta ekosistem framework web.
Namun, kebutuhan aplikasi web terus berkembang.
Browser sekarang digunakan untuk menjalankan pekerjaan seperti:
- pengolahan foto dan video;
- rendering grafis;
- aplikasi desain;
- game 3D;
- computer vision;
- simulasi;
- kompresi file;
- pemrosesan data dalam jumlah besar;
- aplikasi engineering.
Untuk pekerjaan komputasi intensif semacam ini, developer terkadang membutuhkan karakteristik performa dan kontrol memori yang lebih rendah levelnya.
MDN bahkan memasukkan 3D game, VR/AR, computer vision, serta image/video editing sebagai contoh area dengan tuntutan performa tinggi yang menjadi salah satu alasan WebAssembly penting bagi platform web.
Artinya, WebAssembly bukan hadir karena JavaScript “buruk”, melainkan karena aplikasi web sekarang mengerjakan jauh lebih banyak hal dibandingkan website tradisional.
WebAssembly Bukan Pengganti JavaScript
Ini merupakan salah satu kesalahpahaman yang cukup umum.
WebAssembly tidak dirancang untuk menggantikan JavaScript.
Justru keduanya dapat bekerja bersama.
JavaScript dapat digunakan untuk menangani:
UI → event → DOM → Web API → logic aplikasi
Sementara WebAssembly dapat menangani bagian tertentu seperti:
rendering → kalkulasi → decoding → image processing → algoritma berat
JavaScript dapat memanggil fungsi yang diekspor oleh modul WebAssembly. Sebaliknya, WebAssembly juga dapat mengimpor dan memanggil fungsi JavaScript tertentu.
Arsitektur aplikasinya bisa terlihat seperti:
Browser
↓
JavaScript / TypeScript
UI dan interaksi
↓
WebAssembly
Komputasi berat
↓
CPU / Memory
Pendekatan hybrid tersebut memungkinkan developer menggunakan teknologi yang paling sesuai untuk masing-masing pekerjaan.
Bagaimana C++ Bisa Berjalan di Browser?
Misalnya sebuah perusahaan telah mempunyai engine pengolah gambar yang dibuat menggunakan C++.
Daripada menulis ulang seluruh engine menjadi JavaScript, developer dapat menggunakan toolchain seperti Emscripten untuk mengompilasi C/C++ menjadi WebAssembly.
Proses sederhananya:
Source Code C++
↓
Clang / LLVM + Emscripten
↓
WebAssembly Binary (.wasm)
↓
JavaScript Glue Code
↓
Browser
Menurut dokumentasi MDN, Emscripten dapat mengambil source code C/C++ dan menghasilkan modul Wasm beserta JavaScript yang diperlukan untuk membantu memuat dan menjalankannya di aplikasi web.
Konsep serupa juga dapat diterapkan pada Rust. Rust memiliki toolchain yang memungkinkan project dikompilasi menjadi WebAssembly dan kemudian digunakan dari aplikasi web.
Mengapa WASM Bisa Cepat?
Salah satu karakteristik utama WebAssembly adalah formatnya yang compact binary.
Berbeda dengan source code JavaScript yang berupa teks, WebAssembly menggunakan bytecode tingkat rendah yang dirancang agar dapat diproses secara efisien oleh mesin.
MDN menyebut salah satu tujuan WebAssembly adalah menjadi fast, efficient, and portable, dengan kemampuan berjalan pada kecepatan mendekati native di berbagai platform.
Tetapi perlu diperhatikan bahwa:
WASM tidak otomatis membuat semua website menjadi lebih cepat.
Jika website hanya berisi artikel, landing page, dashboard sederhana, atau toko online standar, memindahkan semua logic ke WebAssembly belum tentu memberikan keuntungan.
WebAssembly lebih menarik ketika terdapat bagian aplikasi yang memang membutuhkan komputasi intensif.
Figma Menjadi Contoh Nyata Penggunaan WebAssembly
Salah satu contoh terkenal implementasi WebAssembly adalah Figma.
Figma merupakan aplikasi desain yang berjalan melalui browser, tetapi harus menangani dokumen desain kompleks, canvas besar, rendering grafis, dan interaksi real-time.
Figma menjelaskan bahwa canvas mereka dibuat menggunakan C++ dan dikompilasi menjadi WebAssembly, sementara lapisan UI menggunakan React dan TypeScript. Pendekatan teknologinya bahkan disebut lebih menyerupai stack sebuah game engine daripada stack website konvensional.
Dalam publikasi teknisnya pada 2017, Figma melaporkan bahwa perpindahan dari asm.js ke WebAssembly meningkatkan load time mereka lebih dari 3× pada pengujian saat itu.
Ini menunjukkan prinsip penting WebAssembly:
Aplikasi web tidak harus seluruhnya dibuat dengan teknologi yang sama.
UI bisa menggunakan JavaScript atau TypeScript, sementara engine yang membutuhkan performa tinggi menggunakan C++ yang dikompilasi menjadi Wasm.
Bagaimana dengan Photoshop di Browser?
Software pengolah gambar merupakan contoh workload yang cocok untuk menunjukkan kebutuhan komputasi berat di browser. Namun, perlu diluruskan bahwa kemampuan aplikasi kompleks seperti Photoshop Web tidak berasal dari WebAssembly saja.
Aplikasi semacam ini biasanya memanfaatkan kombinasi teknologi browser, rendering grafis, optimasi memori, JavaScript, WebAssembly, worker, caching, dan berbagai teknik lainnya.
Karena itu, lebih tepat mengatakan bahwa WebAssembly merupakan salah satu teknologi yang membantu memungkinkan aplikasi desktop-class hadir di web, bukan satu-satunya alasan aplikasi tersebut dapat berjalan.
7 Keuntungan WebAssembly untuk Aplikasi Web
1. Performa Mendekati Native
Keuntungan paling dikenal dari Wasm adalah performanya.
Format low-level memungkinkan WebAssembly digunakan untuk pekerjaan yang membutuhkan kalkulasi intensif. Inilah sebabnya teknologi tersebut menarik untuk aplikasi grafis, game, editor multimedia, dan komputasi kompleks.
2. Membawa C/C++ ke Web
Ada banyak library dan software berumur puluhan tahun yang dibuat menggunakan C dan C++.
WebAssembly memberikan jalur agar sebagian teknologi tersebut dapat digunakan kembali di browser.
Developer tidak selalu harus:
C++ → tulis ulang seluruh aplikasi → JavaScript
Tetapi dapat mempertimbangkan:
C++ → compile → WASM → browser
Ini dapat menjadi keuntungan besar untuk software yang mempunyai codebase native besar.
3. Mendukung Rust
Rust juga menjadi bahasa yang menarik untuk pengembangan WebAssembly.
Developer dapat menulis modul menggunakan Rust, mengompilasinya menjadi Wasm, lalu mengintegrasikannya dengan aplikasi JavaScript. MDN menyediakan jalur khusus untuk proses kompilasi Rust menuju WebAssembly.
4. Format Binary yang Ringkas
WebAssembly menggunakan representasi binary yang compact.
Karakteristik ini membantu browser memproses modul secara efisien dan menjadi salah satu alasan format tersebut cocok untuk pengiriman kode berperforma tinggi melalui web.
5. Portabel
Salah satu tujuan utama Wasm adalah portabilitas.
Developer dapat menargetkan WebAssembly sebagai format eksekusi yang tidak terikat pada satu jenis CPU tertentu. Runtime yang mendukung Wasm kemudian menangani bagaimana instruksi tersebut dijalankan pada mesin pengguna.
6. Berjalan dalam Sandbox
Performa tinggi bukan berarti modul mendapatkan akses bebas ke komputer pengguna.
WebAssembly di web dirancang berjalan dalam lingkungan sandbox dan tetap mengikuti model keamanan serta permission browser.
Ini menjadi bagian penting karena kode native yang dikompilasi menjadi Wasm tetap harus hidup dalam batas keamanan platform web.
7. Bisa Dikombinasikan dengan JavaScript
Developer tidak harus memilih salah satu.
Contohnya:
| Bagian Aplikasi | Teknologi |
|---|---|
| UI | React/JavaScript |
| DOM | JavaScript |
| API request | JavaScript |
| Kalkulasi berat | WebAssembly |
| Image processing | WebAssembly |
| Engine C++ lama | WebAssembly |
| Rendering tertentu | WASM + Web API/GPU |
Pembagian seperti ini sering lebih masuk akal daripada mencoba menggunakan Wasm untuk seluruh aplikasi.
Bagaimana WebAssembly Mengelola Memory?
WebAssembly menggunakan konsep linear memory.
Secara sederhana, modul Wasm melihat memory sebagai area byte yang berurutan. Model ini cocok untuk menerjemahkan konsep low-level dari bahasa seperti C/C++, termasuk penggunaan pointer.
Namun, berbeda dari aplikasi C++ native yang dapat bekerja pada ruang memori prosesnya, memory sebuah instance WebAssembly dibatasi ke objek WebAssembly.Memory yang diberikan kepadanya. Hal tersebut membantu menjaga isolasi antarbagian aplikasi.
Karakteristik inilah yang membuat Wasm dapat menawarkan model komputasi low-level tanpa memberikan akses bebas ke seluruh sistem pengguna.
Apakah WASM Selalu Lebih Cepat dari JavaScript?
Tidak.
Ini penting agar developer tidak salah menggunakan teknologi.
Untuk banyak pekerjaan web biasa, JavaScript sudah sangat cepat karena engine browser modern memiliki optimasi yang sangat matang.
Memindahkan fungsi sederhana ke Wasm bahkan dapat menambah kompleksitas karena aplikasi harus berkomunikasi antara JavaScript dan WebAssembly.
Wasm lebih masuk akal ketika aplikasi memiliki hot path atau bagian yang benar-benar membutuhkan performa tinggi.
Misalnya:
Kurang perlu WASM:
Website company profile, blog, landing page, dashboard CRUD sederhana, formulir, dan toko online standar.
Lebih berpotensi mendapat manfaat:
Editor foto/video, CAD, game, emulator, audio processing, compression engine, visualisasi data kompleks, computer vision, dan software engineering berbasis browser.
Jadi pertanyaannya bukan:
“Apakah WASM lebih cepat?”
Melainkan:
“Bagian mana dari aplikasi yang menjadi bottleneck dan apakah Wasm merupakan solusi terbaik?”
Kekurangan WebAssembly yang Perlu Dipertimbangkan
WebAssembly memiliki banyak keuntungan, tetapi bukan solusi tanpa kekurangan.
Pertama, development workflow menjadi lebih kompleks. Tim mungkin harus menangani beberapa bahasa sekaligus, misalnya TypeScript untuk frontend dan Rust untuk modul Wasm.
Kedua, debugging low-level code dapat lebih rumit dibandingkan aplikasi JavaScript biasa.
Ketiga, interaksi antara Wasm dan lingkungan web tetap perlu dirancang dengan baik. Wasm tidak berarti semua kemampuan browser otomatis tersedia langsung dari kode C++.
Keempat, ukuran module dan waktu startup tetap perlu diperhatikan. Modul Wasm yang besar tidak otomatis menghasilkan pengalaman pengguna yang lebih cepat.
Karena itu, implementasi WebAssembly sebaiknya selalu berdasarkan profiling dan pengukuran performa, bukan sekadar mengikuti tren teknologi.
Kapan Developer Sebaiknya Menggunakan WASM?
WebAssembly layak dipertimbangkan ketika salah satu kondisi berikut terjadi:
- aplikasi memiliki kalkulasi CPU-intensive;
- terdapat engine C/C++ yang ingin dibawa ke browser;
- developer menggunakan Rust untuk modul performa tinggi;
- aplikasi melakukan image, audio, atau video processing;
- terdapat algoritma yang menjadi bottleneck;
- software desktop ingin menghadirkan sebagian kemampuannya melalui web.
Sebelum melakukan migrasi, ukur performa aplikasi terlebih dahulu.
Browser menyediakan Performance API yang dapat digunakan developer untuk mengukur berbagai metrik performa aplikasi. Dengan data tersebut, developer dapat menentukan bagian mana yang benar-benar membutuhkan optimasi.
JavaScript vs WebAssembly
| Aspek | JavaScript | WebAssembly |
|---|---|---|
| Level | High-level | Low-level |
| Format utama | Source code teks | Binary bytecode |
| Cocok untuk UI | Sangat cocok | Bukan fokus utama |
| DOM | Akses langsung | Umumnya melalui integrasi host/JS |
| Komputasi berat | Bisa | Salah satu use case utama |
| C/C++ | Tidak langsung | Bisa dikompilasi |
| Rust | Tidak langsung | Bisa dikompilasi |
| Pengembangan web umum | Sangat cocok | Tidak selalu diperlukan |
| Tujuan | Logic & aplikasi web | Portable high-performance execution |
Keduanya bukan kompetitor langsung.
Dalam aplikasi modern, kombinasi JavaScript + WebAssembly justru dapat menghasilkan arsitektur yang lebih efektif.
WebAssembly Membuat Browser Semakin Mirip Platform Aplikasi
Perubahan terbesar yang dibawa WebAssembly sebenarnya bukan sekadar soal benchmark performa.
Teknologi ini memperluas jenis software yang realistis untuk dibawa ke web.
Dulu developer mungkin harus membuat aplikasi desktop karena membutuhkan C++, rendering kompleks, atau komputasi intensif. Sekarang sebagian logic tersebut dapat dikompilasi menjadi Wasm dan dijalankan melalui browser.
Itulah mengapa aplikasi web modern dapat berkembang jauh melampaui halaman HTML tradisional.
Browser perlahan berubah menjadi platform aplikasi universal yang mampu menggabungkan JavaScript, WebAssembly, GPU, Web APIs, dan teknologi lainnya.
WebAssembly (Wasm) adalah format binary low-level yang memungkinkan bahasa seperti C, C++, dan Rust menjadi bagian dari aplikasi web dengan performa mendekati native. WebAssembly tidak dirancang untuk menggantikan JavaScript, tetapi untuk melengkapinya pada pekerjaan yang membutuhkan komputasi lebih intensif.
Kasus Figma menunjukkan bagaimana teknologi ini dapat digunakan secara nyata: C++ menangani canvas berperforma tinggi yang dikompilasi menjadi WebAssembly, sementara React dan TypeScript menangani lapisan UI.
Namun, WASM bukan tombol ajaib untuk membuat semua website lebih cepat. Website sederhana biasanya tidak memerlukannya. Nilai terbesarnya muncul ketika developer memiliki workload berat, codebase C/C++ atau Rust, dan bottleneck performa yang memang dapat diatasi dengan komputasi low-level.
Singkatnya, WebAssembly membuat pertanyaan pengembangan web berubah dari “Bisakah software serumit ini berjalan di browser?” menjadi “Bagian mana yang sebaiknya dijalankan dengan JavaScript dan bagian mana yang lebih cocok menggunakan Wasm?”
