WebAssembly - Bekerja dengan Rust

Pengenalan WebAssembly dan Rust

Halo, para pemrogram masa depan! Hari ini, kita akan masuk ke dunia yang menarik di mana browser web menjadi platform yang kuat untuk menjalankan aplikasi tingkat kinerja tinggi. Imaginekan bahwa Anda dapat memainkan permainan 3D yang kompleks atau menjalankan alat analisis data yang rumit langsung di browser Anda. Itu keajaiban WebAssembly, dan kita akan belajar bagaimana menggunakannya menggunakan bahasa pemrograman Rust.

WebAssembly - Working with Rust

Ketika saya pertama kali menemukan WebAssembly, saya merasa seperti telah menemukan superpower tersembunyi untuk pengembangan web. Itu seperti mengetahui bahwa sepeda Anda yang terpercaya tiba-tiba bisa berubah menjadi kapal roket! Marilah kita memulai perjalanan yang menarik ini bersama-sama.

Apa Itu WebAssembly?

WebAssembly, sering disingkat menjadi Wasm, adalah format instruksi biner yang dirancang untuk eksekusi yang efisien di browser web. Itu seperti kode rahasia yang browser dapat memahami dan menjalankan sangat cepat. Picturingkan itu sebagai penambahan kecepatan untuk aplikasi web Anda!

Mengapa Menggunakan Rust untuk WebAssembly?

Rust adalah bahasa pemrograman yang kuat dan aman. Itu seperti memiliki mobil sport dengan fitur keselamatan terbaru. Karakteristik unik Rust membuatnya pilihan yang bagus untuk pengembangan WebAssembly:

Keselamatan memori tanpa pengumpulan sampah
Kinerja tinggi
Ukuran biner kecil
Integrasi mudah dengan JavaScript

Menyiapkan Lingkungan Pengembangan

Sebelum kita mulai mengoding, kita perlu menyiapkan ruang kerja kita. Itu seperti menyiapkan studio seni Anda sebelum menggambar karya masterpiece.

Menginstal Rust

Pertama, mari instal Rust. Buka terminal Anda dan jalankan:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Perintah ini mengunduh dan menginstal Rust. Itu seperti menanam benih yang akan tumbuh menjadi pohon coding yang kuat!

Menginstal wasm-pack

Selanjutnya, mari instal wasm-pack, sebuah alat yang membantu kita membangun dan bekerja dengan WebAssembly:

cargo install wasm-pack

Picturingkan wasm-pack sebagai asisten Anda yang setia, selalu siap membantu Anda memakai kode Rust Anda untuk web.

Proyek Rust dan WebAssembly Pertama Anda

Sekarang, mari buat proyek pertama kita. Kita akan mulai sederhana, dengan fungsi yang menambahkan dua angka.

Membuat Proyek

Di terminal Anda, jalankan:

cargo new --lib wasm-add
cd wasm-add

Ini akan membuat proyek library Rust baru. Itu seperti membuka buku baru, siap untuk pengalaman coding kita!

Menulis Kode Rust

Buka src/lib.rs dan ganti isinya dengan:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn add(a: i32, b: i32) -> i32 {
a + b
}

mariuraikan ini:

use wasm_bindgen::prelude::*; mengimpor alat yang diperlukan untuk WebAssembly.
#[wasm_bindgen] seperti sihir yang membuat fungsi kita dapat diakses dari JavaScript.
pub fn add(a: i32, b: i32) -> i32 mendefinisikan fungsi kita yang mengambil dua integer dan mengembalikan penjumlahannya.

Membangun untuk WebAssembly

Sekarang, mari ubah kode Rust kita menjadi WebAssembly. Jalankan:

wasm-pack build --target web

Perintah ini seperti oven ajaib yang memanggang kode Rust kita menjadi makanan WebAssembly yang browser bisa nikmati!

Menggunakan Modul WebAssembly Anda di Halaman Web

Sekarang datang bagian yang menarik - menggunakan modul WebAssembly kita di halaman web yang nyata!

Membuat File HTML

Buat file index.html di root proyek Anda dengan konten berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wasm Add</title>
</head>
<body>
<script type="module">
import init, { add } from './pkg/wasm_add.js';

async function run() {
await init();
const result = add(5, 7);
document.body.textContent = `5 + 7 = ${result}`;
}

run();
</script>
</body>
</html>

File HTML ini seperti panggung di mana bintang WebAssembly kita akan tampil!

Menjalankan Halaman Web Anda

Untuk melihat kreation Anda dalam aksi, Anda akan memerlukan server web lokal. Jika Anda memiliki Python terinstal, Anda dapat menggunakan:

python -m http.server

Lalu buka browser Anda dan buka http://localhost:8000. Anda seharusnya melihat "5 + 7 = 12" ditampilkan di halaman. Selamat! Anda telah menjalankan kode Rust di browser Anda!

Topik Lanjut

Sekarang kita sudah mulai, mari masuk lebih dalam ke laut WebAssembly dan Rust.

Bekerja dengan String

String lebih sulit di WebAssembly. mari buat fungsi yang menyapa pengguna:

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

Dalam JavaScript, kita akan gunakan itu seperti ini:

const greeting = greet("WebAssembly");
console.log(greeting); // Output: Hello, WebAssembly!

Manajemen Memori

Salah satu superpower Rust adalah manajemen memori. Ketika bekerja dengan WebAssembly, kita perlu berhati-hati. Ini adalah fungsi yang membuat dan mengembalikan vektor:

#[wasm_bindgen]
pub fn create_array(size: usize) -> Vec<i32> {
let mut v = Vec::with_capacity(size);
for i in 0..size {
v.push(i as i32);
}
v
}

Fungsi ini aman karena sistem kepemilikan Rust memastikan memori diatur dengan benar, bahkan saat digunakan dari JavaScript!

Kesimpulan

Selamat karena Anda telah mengambil langkah pertama ke dunia WebAssembly dengan Rust! Kita telah menempuh banyak langkah, dari menyiapkan lingkungan kerja kita hingga membuat dan menggunakan modul WebAssembly. Ingat, seperti belajar keterampilan baru, keterampilan ini akan datang dengan latihan. Jadi terus coding, terus eksperimen, dan terutama, terus bersenang-senang!

Saat ini, saya diingatkan oleh kutipan Grace Hopper, ilmuwan komputer ternama: "Frasa yang paling merusak di dalam bahasa adalah 'Kami selalu melakukan itu seperti ini.'" WebAssembly dan Rust mewakili cara baru untuk berpikir tentang pengembangan web. Embracing perubahan ini, dan Anda akan membuka dunia kemungkinan di perjalanan programming Anda.

Selamat coding, dan semoga perjalanan WebAssembly Anda penuh dengan kegembiraan dan penemuan!

Credits: Image by storyset

Tutorial Sebelumnya:

WebAssembly - Bekerja dengan C++

Tutorial Selanjutnya:

WebAssembly - Bekerja dengan Go