WebAssembly - Bekerja dengan Rust

Pengenalan WebAssembly dan Rust

Halo, para pemrogram masa depan! Hari ini, kita akan melihat dunia yang menarik di mana browser web menjadi platform kuat untuk menjalankan aplikasi tingkat kinerja tinggi. Bayangkan dapat bermain game 3D kompleks atau menjalankan alat analisis data sophisticated secara 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 sepeda Anda yang dapat tiba-tiba berubah menjadi roket! Mari kita mulai perjalanan menarik ini bersama-sama.

Apa Itu WebAssembly?

WebAssembly, biasanya disingkat menjadi Wasm, adalah format instruksi biner yang dirancang untuk eksekusi yang efisien di browser web. Itu seperti kode rahasia yang browser dapat mengerti dan menjalankan sangat cepat. Bayangkan itu seperti 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 pembersihan sampah
Kinerja tinggi
Ukuran biner kecil
Integrasi mudah dengan JavaScript

Pengaturan Lingkungan Pengembangan

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

Instalasi Rust

Pertama, mari instal Rust. Buka terminal 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 kuat kami!

Instalasi wasm-pack

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

cargo install wasm-pack

Pertimbangkan wasm-pack sebagai asisten andalan Anda, 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 menambah dua angka.

Membuat Proyek

Di terminal, jalankan:

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

Ini akan membuat proyek library Rust baru. Itu seperti membuka buku baru, siap untuk petualangan 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 tools yang diperlukan untuk WebAssembly.
#[wasm_bindgen] seperti mantra 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 kita ubah kode Rust kita menjadi WebAssembly. Jalankan:

wasm-pack build --target web

Perintah ini seperti oven sihir yang memanggang kode Rust kita menjadi makanan WebAssembly yang browser dapat nikmati!

Menggunakan Modul WebAssembly Anda di Halaman Web

Sekarang datang bagian menarik – menggunakan modul WebAssembly kita di halaman web 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 kreasimu 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 baru saja menjalankan kode Rust di browser Anda!

Topik Tingkat Lanjut

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

Bekerja dengan String

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

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

Dalam JavaScript, kita gunakan 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 harus 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 dikelola dengan baik, bahkan saat digunakan dari JavaScript!

Kesimpulan

Selamat atas langkah pertama Anda ke dunia WebAssembly dengan Rust! Kita telah menempuh banyak langkah, dari pengaturan lingkungan hingga membuat dan menggunakan modul WebAssembly. Ingat, seperti belajar keterampilan baru, keterampilan ini akan datang dengan latihan. Jadi terus coding, terus mencoba, dan terus bersenang-senang!

Saat ini, saya diingatkan oleh kutipan Grace Hopper, ilmuwan komputer terkenal: "Kata yang paling merusak dalam bahasa adalah 'Kita selalu melakukan itu dengan cara ini.'" WebAssembly dan Rust mewakili cara baru berpikir tentang pengembangan web. Embraksi perubahan ini, dan Anda akan membuka dunia kemungkinan baru dalam perjalanan programming Anda.

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

Credits: Image by storyset

Tutorial Sebelumnya:

WebAssembly - Bekerja dengan C++

Tutorial Seterusnya:

WebAssembly - Bekerja dengan Go