WebAssembly - WASM: Panduan untuk Pemula

Hai teman, super bintang coding masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ini ke dunia WebAssembly, atau disingkat WASM. Jangan khawatir jika belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan belajar bersama-sama. Jadi, ambil secangkir minuman kesukaanmu, duduk nyaman, dan mari kita masuk ke dalam!

Apa Itu WebAssembly?

WebAssembly adalah seperti bahasa rahasia yang browser web paham. Itu dirancang untuk membuat aplikasi web berjalan lebih cepat dan efisien. Bayangkan Anda mencoba memainkan permainan video kompleks di website. Tanpa WebAssembly, itu mungkin lambat dan kasar. Tetapi dengan WebAssembly, itu bisa berjalan mulus, hampir seperti memainkannya di konsol permainan!

Sejarah Singkat

WebAssembly lahir dari keinginan untuk membuat aplikasi web lebih kuat. Itu pertama kali diumumkan pada tahun 2015, dan pada tahun 2017, semua browser web utama mendukungnya. Itu cukup cepat dalam dunia teknologi - seperti bagaimana aplikasi media sosial favoritmu memperbarui fitur baru secara cepat!

Model Mesin Stack

Sekarang, mari bicarakan sesuatu yang terdengar agak teknis tapi sebenarnya cukup sederhana jika Anda merobahnya: Model Mesin Stack. Ini adalah pusat bagaimana WebAssembly bekerja.

Apa Itu Stack?

Pertimbangkan stack seperti sebuah tumpukan piring. Anda hanya dapat menambahkan atau menghapus piring dari puncak tumpukan. Dalam istilah komputer, kita menyebut menambahkan ke stack "push" dan menghapus dari stack "pop".

Bagaimana WebAssembly Menggunakan Stack

WebAssembly menggunakan ide stack untuk melakukan operasi. Itu seperti seorang koki yang sangat efisien di dapur, selalu tahu tepat ingredient (atau nomor, dalam kasus ini) yang akan digunakan selanjutnya.

mari lihat contoh sederhana:

(module
(func $add (param $a i32) (param $b i32) (result i32)
local.get $a
local.get $b
i32.add)
(export "add" (func $add))
)

Jangan panik! Saya tahu ini terlihat seperti bahasa asing saat ini, tapi mari kita perobahnya:

1. (module): Ini seperti mengatakan "Ini adalah buku resep baru".
2. (func $add ...): Kita mendefinisikan fungsi baru (atau resep) yang disebut "add".
3. (param $a i32) (param $b i32): Fungsi ini menerima dua ingredient (parameter), keduanya adalah integer 32-bit.
4. (result i32): Hasilnya juga akan menjadi integer 32-bit.
5. local.get $a: Letakkan nomor pertama di puncak stack piring.
6. local.get $b: Letakkan nomor kedua di atas yang pertama.
7. i32.add: Tambahkan dua nomor di puncak stack dan ganti mereka dengan hasilnya.

Jadi, jika kita memanggil fungsi ini dengan 5 dan 3, stack kita akan terlihat seperti ini:

1. Mulai dengan stack kosong: []
2. Setelah local.get $a: [5]
3. Setelah local.get $b: [5, 3]
4. Setelah i32.add: [8]

Dan voila! Kita telah menambahkan dua nomor menggunakan model mesin stack WebAssembly.

Mengapa Menggunakan WebAssembly?

Mungkin Anda bertanya-tanya, "Ini tampak rumit. Mengapa tidak menggunakan JavaScript saja?" Pertanyaan bagus! WebAssembly memiliki beberapa kekuatan khusus yang membuatnya istimewa:

1. Kecepatan: WebAssembly bisa berjalan lebih cepat daripada JavaScript untuk tugas tertentu.
2. Efisiensi: Itu menggunakan lebih sedikit memori dan tenaga proses.
3. Flexibilitas Bahasa: Anda dapat menulis kode dalam bahasa seperti C++ atau Rust dan mengkonversinya ke WebAssembly.

Bayangkan Anda membangun benteng pasir. JavaScript seperti menggunakan tanganmu - itu fleksibel dan mudah dimulai. WebAssembly seperti memiliki set alat khusus - mungkin memerlukan setup lebih banyak, tapi Anda bisa membangun benteng yang lebih kompleks dan kokoh!

Program WebAssembly Pertama Anda

Mari kita tulis program sederhana yang menambahkan dua nomor. Kita akan menggunakan bahasa yang disebut WAT (WebAssembly Text Format) yang adalah versi yang dapat dibaca manusia dari WebAssembly.

(module
(func $add (param $left i32) (param $right i32) (result i32)
local.get $left
local.get $right
i32.add)
(export "add" (func $add))
)

Ini mungkin terlihat familiar - itu sangat mirip dengan contoh sebelumnya! Ini adalah apa yang dilakukannya:

1. Mendefinisikan sebuah modul (program kita).
2. Membuat fungsi $add yang menerima dua integer 32-bit dan mengembalikan satu.
3. Mendapatkan nomor pertama ($left) dan menempatkannya di stack.
4. Mendapatkan nomor kedua ($right) dan menempatkannya di atas yang pertama.
5. Menambahkan dua nomor di stack.
6. Mengekspor fungsi sehingga bisa digunakan dari JavaScript.

Untuk menggunakan ini di halaman web, kita butuh sedikit JavaScript:

fetch('add.wasm')
.then(response => response.arrayBuffer())
.then(bytes => WebAssembly.instantiate(bytes))
.then(results => {
const add = results.instance.exports.add;
console.log(add(5, 3));  // Output: 8
});

Kode ini memuat modul WebAssembly kita, membuat instance dari itu, dan kemudian memanggil fungsi add dengan nomor 5 dan 3.

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia WebAssembly. Kita telah menelusuri apa itu WebAssembly, bagaimana itu menggunakan model mesin stack, dan bahkan menulis program WebAssembly pertama kita.

Ingat, belajar mengoding seperti belajar bahasa baru atau alat musik - itu memerlukan latihan dan kesabaran. Jangan frustasi jika segala sesuatu tidak berjalan mulus segera. Tetap mencoba, terus belajar, dan sebelum Anda sadari, Anda akan mulai membangun hal-hal menarik dengan WebAssembly!

Dalam pelajaran berikutnya, kita akan masuk lebih mendalam ke konsep WebAssembly yang lebih kompleks dan mulai membuat proyek yang sangat menarik. Sampai saat itu, selamat berkoding!

Credits: Image by storyset