Indonesia

Tutorial WebAssembly

WebAssembly - Bekerja dengan Node.js

Hai teman-teman yang sedang belajar! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia WebAssembly dan Node.js. Jangan khawatir jika istilah ini terdengar seperti bahasa asing bagi Anda - pada akhir tutorial ini, Anda akan dapat berbicara dalam bahasa ini secara lancar!

WebAssembly - Working with Nodejs

Apa Itu WebAssembly?

WebAssembly, biasa disingkat sebagai Wasm, adalah seperti superhero di dunia pemrograman. Itu adalah format perintah biner yang memungkinkan kode yang ditulis dalam bahasa seperti C, C++, dan Rust dapat berjalan di browser web dengan kecepatan mendekati native. Bayangkan dapat bermain permainan 3D yang kompleks langsung di browser Anda - itu jenis kekuatan yang WebAssembly dapatkan untuk meja!

Mengapa Node.js?

Sekarang Anda mungkin bertanya-tanya, "Apa Node.js punya hubungan dengan ini semua?" Well, Node.js adalah seperti kru di belakang panggung yang membuat keajaiban terjadi. Itu adalah runtime JavaScript yang memungkinkan kita menjalankan JavaScript di luar browser web. Ketika kita gabungkan WebAssembly dengan Node.js, kita mendapatkan kebaikan terbaik dari kedua dunia - kecepatan WebAssembly dan fleksibilitas Node.js.

Menyiapkan Lingkungan Kerja

Sebelum kita masuk ke kode, mari kita siapkan ruang kerja. Jangan khawatir, itu lebih mudah daripada mengatur ponsel baru!

  1. Instal Node.js dari situs resmi (https://nodejs.org)
  2. Buka terminal atau command prompt
  3. Buat direktori baru untuk proyek kita:
    mkdir wasm-nodejs-tutorial
cd wasm-nodejs-tutorial
  4. Inisialisasi proyek Node.js baru:
    npm init -y

Bagus! Sekarang kita siap untuk mulai mengoding.

Modul WebAssembly Pertama Anda

mari buat modul WebAssembly sederhana yang menambahkan dua angka. Kita akan menulisnya dalam C dan kompilasikan ke WebAssembly.

Langkah 1: Menulis kode C

Buat file bernama add.c dengan konten berikut:

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

Jangan panik jika ini terlihat seperti hieroglif! Mari kitauraikan ini:

  • #include <emscripten.h> menyertakan pustaka Emscripten, yang membantu kita kompilasi C ke WebAssembly.
  • EMSCRIPTEN_KEEPALIVE adalah direktif khusus yang memberitahu kompilator untuk menjaga fungsi ini dapat diakses dari JavaScript.
  • int add(int a, int b) adalah fungsi kita yang menerima dua integer dan mengembalikan penjumlahannya.

Langkah 2: Kompilasi ke WebAssembly

Untuk kompilasi kode C ini ke WebAssembly, kita perlu menginstal Emscripten. Ikuti petunjuk instalasi di situs Emscripten (https://emscripten.org/docs/getting_started/downloads.html).

Setelah diinstal, jalankan perintah ini:

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

Perintah ini kompilasi kode C kita ke WebAssembly dan membuat dua file: add.wasm dan add.js.

Menggunakan WebAssembly di Node.js

Sekarang kita masuk ke bagian yang menarik - menggunakan modul WebAssembly kita di Node.js!

Buat file bernama index.js dengan konten berikut:

const fs = require('fs');
const path = require('path');

const wasmBuffer = fs.readFileSync(path.join(__dirname, 'add.wasm'));

WebAssembly.instantiate(wasmBuffer).then(wasmModule => {
const add = wasmModule.instance.exports._add;
console.log('5 + 3 =', add(5, 3));
});

Mari kitauraikan ini:

  1. Kita import modul Node.js yang diperlukan: fs untuk operasi sistem berkas dan path untuk bekerja dengan path berkas.
  2. Kita membaca file WebAssembly ke dalam buffer.
  3. Kita menggunakan WebAssembly.instantiate() untuk memuat dan mengkompilasi modul WebAssembly kita.
  4. Setelah dimuat, kita dapat mengakses fungsi add melalui wasmModule.instance.exports._add.
  5. Akhirnya, kita memanggil fungsi kita dan mencatat hasilnya.

Jalankan skrip ini dengan:

node index.js

Jika semuanya berjalan dengan baik, Anda seharusnya melihat: 5 + 3 = 8

Selamat! Anda baru saja menjalankan modul WebAssembly pertama Anda di Node.js!

Perbandingan Performa

Sekarang, mari kita bandingkan performa fungsi WebAssembly kita dengan fungsi JavaScript native.

Tambahkan ini ke index.js Anda:

function jsAdd(a, b) {
return a + b;
}

const iterations = 1000000;

console.time('WebAssembly');
for (let i = 0; i < iterations; i++) {
add(5, 3);
}
console.timeEnd('WebAssembly');

console.time('JavaScript');
for (let i = 0; i < iterations; i++) {
jsAdd(5, 3);
}
console.timeEnd('JavaScript');

Kode ini menjalankan kedua fungsi add dan jsAdd sebanyak satu juta kali dan mengukur berapa lama masing-masing memerlukan.

Jalankan skrip lagi, dan Anda kemungkinan melihat bahwa versi WebAssembly lebih cepat!

Kesimpulan

Kami hanya menggesek permukaan dari apa yang mungkin dilakukan dengan WebAssembly dan Node.js. Bayangkan kemungkinan - Anda dapat menggunakan algoritma kompleks yang ditulis dalam C atau Rust, mesin permainan, atau bahkan aplikasi penuh, semua berjalan dengan kecepatan mendekati native di Node.js!

Ingat, belajar pemrograman seperti belajar menunggang sepeda. Itu mungkin terlihat wobble pada awalnya, tapi dengan latihan, Anda akan segera berlari tanpa masalah. Tetap mencoba, tetap belajar, dan yang paling penting, bersenang-senang!

Berikut adalah tabel yang menggabungkan metode utama yang kita gunakan:

Metode Deskripsi
WebAssembly.instantiate() Kompilasi dan instansiasi modul WebAssembly
fs.readFileSync() Membaca file secara sinkron
path.join() Menggabungkan segment path
console.time() Memulai timer
console.timeEnd() Mengakhiri timer dan mencatat durasi

Selamat coding, para ahli WebAssembly masa depan!

Credits: Image by storyset

Tutorial Sebelumnya:
WebAssembly - Bekerja dengan Go