WebAssembly: Era Baru Dunia Web

Logo WebAssembly

Ingin menggunakan bahasa selain JavaScript pada untuk membuat web application? WebAssembly membuat bahasa pemrograman favoritmu dapat dijalankan pada web browser.

Pengunaan web application yang semakin luas dan kebutuhan komputasi yang semakin besar menuntut performa yang lebih baik. Saat ini, web application dituntut untuk mampu melakukan berbagai hal yang semakin besar dari sisi komputasi, seperti rendering gambar ataupun image processing.

Bahasa JavaScript telah menjadi standar dalam pemrograman untuk web. Para pengembang browser seperti Google Chrome dan Mozilla Firefox berlomba-lomba untuk mengoptimasi kode yang dibuat dalam JavaScript. Namun, performa JavaScript tidak selalu cepat eksekusinya. Selain itu, sebagian kode dalam sebuah aplikasi telah dikembangkan dalam berbagai bahasa pemrograman lain seperti C++.

Apa itu WebAssembly (wasm)

Dikutip dari laman resmi WebAssembly, berikut adalah penjelasan singkatnya

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications.

Dalam bahasa yang lebih sederhana, WebAssembly (disingkat wasm) adalah bahasa mesin sebuah Conceptual Machine

Wasm menjadi target kompilasi dari bahasa pemrograman seperti C/C++/Rust yang akan dieksekusi oleh browser. Wasm tidak spesifik ke suatu arsitektur mesin, namun wasm lebih dekat ke bahasa mesin dibandingkan dengan kode JavaScript.

Proses Kompilasi WebAssembly

Diagram di atas menjelaskan proses kode dari suatu bahasa pemrograman hingga dapat dijalankan di suatu mesin. Pertama-tama, kode dikompilasi menggunakan compiler wasm (Emscripten untuk C/C++, wasm-pack untuk Rust). Kemudian, browser mengunduh kode WebAssembly dan melakukan translasi kecil dari wasm ke mesin yang menjalankan browser tersebut.

• Intermediate Representation (IR) merupakan representasi antara source code dengan target languages. Penjelasan detail dapat dilihat di sini.

Mengapa WebAssembly

• Efisien dan cepat
  WebAssembly dapat dijalankan dalam near-native speed.
• Aman
  WebAssembly menggunakan lingkungan eksekusi yang sandboxed.
• Terbuka dan mudah di-debug
  WebAssembly didesain untuk dapat diubah menjadi bentuk teks yang mudah dibaca.
• Bagian dari Open Web Platform
  WebAssembly memiliki kelebihan yang serupa dengan pengembangan dengan web, yaitu versionless, feature-tested, dan backward-compatible.

Proses Eksekusi JavaScript vs WebAssembly

JavaScript dan WebAssembly memiliki perbedaan dalam proses eksekusi. Sebagai contoh, kita akan melihat proses pada Google Chrome.

JavaScript
Kode JavaScript dijalankan oleh Ignition, yaitu sebuah interpreter dari JavaScript Engine. Ketika program dijalankan, TurboFan mengumpulkan data analytics tentang bagaimana perilaku jalannya program. Kemudian, data tersebut digunakan oleh TurboFan untuk menghasilkan kode mesin yang teroptimasi.

WebAssembly
Kode dari bahasa tingkat tinggi (C, C++, Rust) dikompilasi menjadi file .wasm, proses ini disebut Liftoff. Ketika proses kompilasi telah selesai, TurboFan akan dijalankan untuk mengoptimasi dan membuat kode mesin.

Perbedaan
Pada JavaScript, TurboFan akan membuat berbagai asumsi dari hasil observasi untuk mempercepat jalannya program. Ketika asumsi yang dibuat gagal, TurboFan akan mengembalikan proses ke interpreter. Proses ini yang disebut deoptimisasi. Sedangkan, pada wasm, TurboFan akan langsung bekerja menghasilkan kode mesin tanpa deoptimisasi.

source: https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

Performa JavaScript vs WebAssembly

Untuk membandingkan performa keduanya, kita akan mengeksekusi kode untuk merotasi sebuah gambar. Kode akan dieksekusi satu hingga dua kali, sehingga pada saat ujicoba, kode JavaScript tidak mendapat keuntungan dari optimasi kode. Berikut merupakan perbandingan eksekusi rotasi gambar sebesar 16 megapixel.

source : https://developers.google.com/web/updates/2019/02/hotpath-with-wasm

Diagram di atas bukanlah untuk membandingkan kecepatan browser. Setiap browser memiliki algoritma yang berbeda untuk mengoptimasi kode JavaScript. Hal ini menyebabkan perbedaan yang cukup signifikan antarbrowser.

JavaScript dan wasm memiliki waktu eksekusi tercepat yang relatif sama. Namun, wasm memiliki kestabilan dalam waktu eksekusi. Hal ini dikarenakan wasm melakukan optimasi hanya saat pertama kali dijalankan, berbeda dengan JavaScript interpreter yang melakukan optimasi setiap kali dijalankan.

Bahasa yang Mendukung WebAssembly

Pada saat artikel ini ditulis, terdapat 12 bahasa pemrograman yang dapat dikompilasi ke WebAssembly dan telah stabil untuk pengembangan aplikasi, di antaranya C, C++, C#, Go, dan Rust.

Jumlah ini akan semakin bertambah dengan bantuan komunitas open source. Daftar bahasa pemrograman yang telah dikompilasi ke WebAssembly dapat diakses di sini.

Saat ini, WebAssembly belum memiliki garbage collector — sebuah fitur pada bahasa pemrograman yang sangat memudahkan programmer. Oleh karena itu, disarankan untuk menggunakan bahasa pemrograman yang tidak memiliki garbage collector. Pada menggunakan bahasa yang memiliki garbage collection, hasil kompilasi WebAssembly akan jauh lebih besar karena kode garbage collector akan ikut dikompilasi.

Aplikasi yang Menggunakan WebAssembly

AutoCAD

AutoCAD merupakan perangkat lunak untuk mendesain yang pertama kali dirilis tahun 1982. Kini, AutoCAD hadir dalam bentuk web application yang dapat diakses melalui browser. WebAssembly memungkinkan interaksi di AutoCAD WebApp berjalan lancar saat digunakan.

Roundup: The AutoCAD Web App at Google I/O 2018 | AutoCAD Blog | Autodesk

Google Earth

Penggunaan WebAssembly menjawab masalah dalam pengembangan Google Earth. Dengan WebAssembly, Google Earth dapat digunakan dalam berbagai jenis browser tanpa mengorbankan performa dengan menggunakan codebase yang sama.

WebAssembly brings Google Earth to more browsers

Rust dan WebAssembly

Berdasarkan survei StackOverflow 2019, bahasa Rust merupakan bahasa yang paling dicintai oleh para developer. Tidak hanya itu, Rust didukung oleh Mozilla, yang juga merupakan pengembang WebAssembly.

Membuat Program Rust-WebAssembly

Kakas yang dibutuhkan:

• The Rust Toolchain (https://www.rust-lang.org/tools/install)

curl https://sh.rustup.rs -sSf | sh

• wasm-pack (https://rustwasm.github.io/wasm-pack/installer/)

curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh

• cargo-generate

cargo install cargo-generate

• npm (https://www.npmjs.com/get-npm)

sudo apt install npm

Membuat hello-wasm

• Gunakan template dari wasm-pack
  Clone template dengan cara:

cargo generate — git https://github.com/rustwasm/wasm-pack-template.git — name hello-wasm

Hasil dari perintah tersebut akan menghasilkan project seperti gambar di bawah.

Struktur Project

• Buat fungsi hello dengan input sebuah string dan me-return string yang telah ditambahkan kata “ world”

• Lakukan kompilasi terhadap kode Rust

wasm-pack build

• Buat halaman web dengan menggunakan template dari create-wasm-app

npm init wasm-app www

• Tambahkan dependency pada wasm-app dengan menambahkan hello-wasm pada package.json

• Panggil fungsi hello dengam mengimport hello-wasm dan cetak hasilnya pada console

• Jalankan perintah untuk mengintall dan menjalankan wasm-app

npm install
npm run start

• Voila, kode pertamamu telah berhasil dijalankan!

Referensi

• https://developers.google.com/web/updates/2019/02/hotpath-with-wasm
• https://hacks.mozilla.org/2017/02/a-crash-course-in-assembly/
• https://rustwasm.github.io/book/
• https://github.com/appcypher/awesome-wasm-langs