WebAssembly - Bekerja dengan Node.js

Hai teman-teman yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia WebAssembly dan Node.js. Jangan khawatir jika istilah ini terdengar seperti bahasa alien - setelah selesai tutorial ini, Anda akan bisa berbicara dalam bahasa itu dengan lancar!

Apa Itu WebAssembly?

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

Mengapa Node.js?

Sekarang, Anda mungkin bertanya-tanya, "Apa hubungan Node.js dengan hal ini?" Well, Node.js adalah seperti kru di belakang panggung yang membuat magik 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 siapkan ruang kerja kita. Jangan khawatir, itu lebih mudah daripada mengatur smartphone baru!

1. Install 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 kita buat modul WebAssembly sederhana yang menambahkan dua angka. Kita akan menulisnya dalam C dan kompilasi 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 mengkompilasi 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 mengkompilasi kode C ini ke WebAssembly, kita perlu menginstal Emscripten. Ikuti petunjuk instalasi di situs Emscripten (https://emscripten.org/docs/getting_started/downloads.html).

Setelah terinstal, jalankan perintah ini:

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

Perintah ini mengkompilasi kode C kita ke WebAssembly dan menciptakan dua file: add.wasm dan add.js.

Menggunakan WebAssembly di Node.js

Sekarang adalah 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));
});

Marilah 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 panggil fungsi kita dan catat 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 versi fungsi penjumlahan kita 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 baru saja menggaruk permukaan dari apa yang mungkin dilakukan dengan WebAssembly dan Node.js. Bayangkan kemungkinan - Anda dapat menggunakan algoritma yang kompleks yang ditulis dalam C atau Rust, mesin game, atau bahkan aplikasi penuh, semua berjalan dengan kecepatan mendekati native di Node.js!

Ingat, belajar mengoding adalah seperti belajar menunggang sepeda. Mungkin terlihat wobble di awal, tapi dengan latihan, Anda akan segera berlari tanpa masalah. Tetap eksperimen, tetap belajar, dan terutama, bersenang-senang!

Berikut adalah tabel yang menguraikan metode utama yang kita gunakan:

Metode	Deskripsi
WebAssembly.instantiate()	Mengkompilasi dan menginisialisasi modul WebAssembly
fs.readFileSync()	Membaca file secara sinkronous
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