Panduan Awal WebAssembly - WASM

Hai sana, bintang coding masa depan! Saya begitu senang menjadi panduannya Anda dalam perjalanan menarik ini ke dunia WebAssembly, atau disingkat WASM. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan bersama-sama mencapai tingkat yang lebih tinggi. Jadi, ambil secangkir minuman kesukaan Anda, duduk dengan nyaman, dan mari kita masuk ke dalam!

Apa Itu WebAssembly?

WebAssembly adalah seperti bahasa rahasia yang browser web dapat memahami. Itu dirancang untuk membuat aplikasi web berjalan lebih cepat dan efisien. Bayangkan Anda mencoba memainkan permainan video yang kompleks di situs web. Tanpa WebAssembly, itu mungkin lambat dan kasar. Tetapi dengan WebAssembly, itu bisa berjalan mulus, hampir seperti Anda 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, itu didukung oleh semua browser web utama. Itu cukup cepat dalam dunia teknologi - mirip seperti kecepatan update fitur baru di aplikasi media sosial kesukaan Anda!

Model Mesin Stack

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

Apa Itu Stack?

Pikirkan stack seperti 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 ini untuk melakukan operasi. Itu seperti chef yang sangat efisien di dapur, selalu tahu tepat ingredient (atau nomor, dalam kasus ini) yang harus digunakan berikutnya.

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 tampak seperti bahasa alien untuk saat ini, tapi mari kita perobahannya:

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 kita mengambil 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 tampak 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?

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

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

Bayangkan Anda membangun benteng pasir. JavaScript adalah seperti menggunakan tangan Anda - itu fleksibel dan mudah untuk dimulai. WebAssembly adalah seperti memiliki set alat khusus - mungkin memerlukan sedikit setup lebih, tapi Anda dapat membangun benteng yang lebih kompleks dan kuat!

Program WebAssembly Pertama Anda

mari tulis program sederhana yang menambahkan dua nomor. Kita akan menggunakan bahasa yang disebut WAT (Format Teks WebAssembly) yang adalah versi yang dapat dibaca manusia 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 tampak familiar - itu sangat mirip dengan contoh sebelumnya! Ini adalah apa yang dilakukannya:

1. Mendefinisikan sebuah modul (program kita).
2. Membuat fungsi yang disebut $add yang mengambil 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 kita dapat menggunakannya 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 telah mengambil langkah pertama ke dunia WebAssembly. Kita telah membahas apa itu WebAssembly, bagaimana itu menggunakan model mesin stack, dan bahkan menulis program WebAssembly pertama kita.

Ingat, belajar mengoding adalah seperti belajar bahasa baru atau alat musik - itu memerlukan latihan dan kesabaran. Jangan frustasi jika segala sesuatu tidak langsung berjalan mulus. Terus mencoba, terus belajar, dan sebelum Anda tahu, Anda akan mulai membuat hal-hal yang menarik dengan WebAssembly!

Dalam pelajaran berikutnya, kita akan mendalami konsep WebAssembly yang lebih kompleks dan mulai membuat proyek yang sangat menarik. Sampai jumpa, coding yang menyenangkan!

Credits: Image by storyset