WebAssembly - Modul

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan yang menarik ke dunia modul WebAssembly. Jangan khawatir jika Anda baru dalam pemrograman – saya akan menjadi panduan ramah Anda, dan kita akan mengambil langkah ini satu per satu. Pada akhir pelajaran ini, Anda akan memiliki pemahaman yang kuat tentang modul WebAssembly dan bagaimana cara kerjanya. Ayo masuk ke dalam!

WebAssembly - Modules

Apa Itu WebAssembly?

Sebelum kita bicara tentang modul, mari kita singkatkan apa itu WebAssembly. Bayangkan Anda sedang membangun istana pasir. WebAssembly seperti memiliki sebuah wadah khusus yang memungkinkan Anda membangun istana lebih cepat dan kuat daripada sebelumnya. Dalam dunia pengembangan web, WebAssembly adalah bahasa tingkat rendah yang berjalan di browser, memungkinkan performa hampir native.

Langkah 1: Mengerti Modul WebAssembly

Modul WebAssembly adalah blok bangunan dari aplikasi WebAssembly. Bayangkan mereka sebagai potongan LEGO – setiap modul adalah unit yang mandiri dan dapat dikombinasikan dengan yang lain untuk menciptakan sesuatu yang menakjubkan.

Konsep Utama

Format Binari: Modul biasanya didistribusikan dalam format binari (.wasm files).
Kompilasi: Modul ini dikompilasi dari bahasa seperti C, C++, atau Rust.
Impor dan Ekspor: Modul dapat mengimpor fungsionalitas dan mengekspor fungsi mereka sendiri.

Langkah 2: Membuat dan Menggunakan Modul WebAssembly

Sekarang, mari kita jelajahi proses membuat dan menggunakan modul WebAssembly.

2.1 Menulis Modul WebAssembly

Pertama, kita perlu menulis modul kami. mari kita gunakan fungsi C sederhana sebagai contoh:

// add.c
int add(int a, int b) {
return a + b;
}

Fungsi ini menambahkan dua angka. Sederhana, kan? Tetapi bagaimana kitaubah ini menjadi modul WebAssembly?

2.2 Mengkompilasi ke WebAssembly

Untuk mengkompilasi ini ke WebAssembly, kita gunakan alat yang disebut Emscripten. Ini adalah perintah:

emcc add.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -o add.js

Perintah ini menciptakan dua file:

add.wasm: Modul WebAssembly kami
add.js: Kode lem glue JavaScript untuk memuat dan menggunakan modul kami

2.3 Memuat Modul di JavaScript

Sekarang, mari kita lihat bagaimana kita dapat menggunakan modul ini di halaman web:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Add Function</title>
</head>
<body>
<h1>WebAssembly Add Function</h1>
<p>Hasil: <span id="result"></span></p>
<script src="add.js"></script>
<script>
Module.onRuntimeInitialized = async _ => {
const result = Module._add(5, 3);
document.getElementById('result').textContent = result;
};
</script>
</body>
</html>

Penjelasan Kode

Mari kitauraikan apa yang terjadi dalam kode ini:

Kita menyertakan file add.js, yang memuat modul WebAssembly kami.
Kita menggunakan Module.onRuntimeInitialized untuk memastikan modul sepenuhnya dimuat sebelum kita menggunakannya.
Kita memanggil fungsi add kita menggunakan Module._add(5, 3).
Hasilnya ditampilkan di halaman.

Contoh: Modul Lebih Kompleks

Sekarang kita sudah melihat contoh sederhana, mari kita coba sesuatu yang sedikit lebih kompleks. Kita akan membuat modul yang menghitung faktorial sebuah angka.

// factorial.c
int factorial(int n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}

Kompilasi dengan cara yang sama:

emcc factorial.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_factorial"]' -o factorial.js

Sekarang, mari kita gunakan ini di HTML:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial</title>
</head>
<body>
<h1>WebAssembly Factorial Calculator</h1>
<input type="number" id="input" value="5">
<button onclick="calculateFactorial()">Calculate</button>
<p>Hasil: <span id="result"></span></p>
<script src="factorial.js"></script>
<script>
function calculateFactorial() {
const n = document.getElementById('input').value;
const result = Module._factorial(n);
document.getElementById('result').textContent = result;
}

Module.onRuntimeInitialized = async _ => {
calculateFactorial();
};
</script>
</body>
</html>

Output

Ketika Anda menjalankan ini di browser, Anda akan melihat field input tempat Anda dapat memasukkan sebuah angka. Mengklik tombol "Calculate" akan menampilkan faktorial dari angka itu, semua dihitung menggunakan modul WebAssembly kami!

Kesimpulan

Selamat! Anda baru saja mengambil langkah pertama ke dunia modul WebAssembly. Kita telah melihat dasar-dasar membuat, mengkompilasi, dan menggunakan modul WebAssembly dalam aplikasi web. Ingat, ini hanya awal – WebAssembly membuka dunia baru kemungkinan bagi pengembangan web, memungkinkan Anda membawa komputasi tingkat tinggi ke browser.

Dalam perjalanan Anda selanjutnya, Anda akan menemukan bagaimana WebAssembly dapat digunakan untuk segala sesuatu dari permainan hingga pengolahan data kompleks. Terus mencoba, dan jangan takut untuk memaksakan batas apa yang mungkin dalam browser!

Metode	Deskripsi
Module.onRuntimeInitialized	Memastikan modul WebAssembly sepenuhnya dimuat sebelum digunakan
Module._functionName	Memanggil fungsi yang diekspor dari modul WebAssembly
emcc	Perintah compiler Emscripten untuk menciptakan modul WebAssembly

Ingat, belajar WebAssembly seperti belajar menunggang sepeda – mungkin terlihat sulit pada awalnya, tapi dengan latihan, Anda akan menembus batas dalam waktu singkat. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

WebAssembly - "Hai Dunia"

Tutorial Seterusnya:

WebAssembly - Pengecaman