WebAssembly - Modul

Hai, para programer pemula! Hari ini, kita akan memulai perjalanan menarik ke dunia modul WebAssembly. Jangan khawatir jika Anda baru dalam programming - saya akan menjadi panduan ramah Anda, dan kita akan mengambil ini secara bertahap. Pada akhir pelajaran ini, Anda akan memiliki pengertian kuat tentang modul WebAssembly dan bagaimana mereka bekerja. Ayo masuk ke dalamnya!

WebAssembly - Modules

Apa Itu WebAssembly?

Sebelum kita membahas modul, mari kita singkatkan apa itu WebAssembly. Bayangkan Anda sedang membangun benteng pasir. WebAssembly seperti memiliki ember khusus yang memungkinkan Anda membangun benteng lebih cepat dan kuat daripada sebelumnya. Dalam dunia pengembangan web, WebAssembly adalah bahasa tingkat rendah yang berjalan di browser, memungkinkan performansi mendekati asli.

Langkah 1: Mengerti Modul WebAssembly

Modul WebAssembly adalah blok bangunan aplikasi WebAssembly. Bayangkan mereka sebagai potongan LEGO - setiap modul adalah unit tersendiri yang dapat digabungkan dengan yang lain untuk menciptakan sesuatu yang menakjubkan.

Konsep Utama

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

Langkah 2: Membuat dan Menggunakan Modul WebAssembly

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

2.1 Menulis Modul WebAssembly

Pertama, kita perlu menulis modul kita. Kita akan menggunakan fungsi C sederhana sebagai contoh:

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

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

2.2 Mengkompilasi ke WebAssembly

Untuk mengkompilasi ini ke WebAssembly, kita menggunakan alat yang disebut Emscripten. Ini adalah perintahnya:

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

Perintah ini menciptakan dua file:

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

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 kita rongrong apa yang terjadi dalam kode ini:

Kita menyertakan file add.js, yang memuat modul WebAssembly kita.
Kita menggunakan Module.onRuntimeInitialized untuk memastikan modul terisi penuh sebelum kita menggunakannya.
Kita memanggil fungsi add 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 dari sebuah angka.

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

Kompilasinya sama seperti itu:

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

Sekarang, mari kita gunakan itu di HTML:

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly Factorial Calculator</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 angka. Menekan tombol "Calculate" akan menampilkan faktorial dari angka itu, semua dihitung menggunakan modul WebAssembly kita!

Kesimpulan

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

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

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

Ingat, belajar WebAssembly seperti mempelajari menunggang sepeda - mungkin agak sulit pada awalnya, tapi dengan latihan, Anda akan berjalan dengan cepat dalam waktu singkat. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

WebAssembly - "Halo Dunia"

Tutorial Selanjutnya:

WebAssembly - Validasi