0Pricing
Learn Rust Coding · Pelajaran

Rust ke WebAssembly (WASM)

Kompilasi kode Rust ke WebAssembly agar modul berperforma tinggi dapat berjalan di peramban web dan runtime WASM lainnya.

Rust ke WebAssembly (WASM) adalah pelajaran Learn Rust Coding gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Learn Rust Coding, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Learn Rust Coding mencakup 3 pelajaran total.

Apa itu WebAssembly (WASM)?

WebAssembly, atau WASM, adalah format instruksi biner untuk mesin virtual berbasis tumpukan. Format ini dirancang sebagai target kompilasi portabel untuk bahasa tingkat tinggi seperti Rust, C/C++, dan Go.

Anggaplah ini sebagai bahasa tingkat rendah yang mirip rakitan, yang berjalan secara efisien di peramban web dan lingkungan lainnya. Dengan ini, Anda dapat menjalankan kode yang kritis terhadap kinerja dengan kecepatan yang hampir setara kode native.

Keunggulan Rust untuk WASM

Rust merupakan pilihan yang sangat baik untuk pengembangan WebAssembly berkat keunggulan khasnya:

  • Kinerja: Rust dikenal karena kecepatannya, yang mendekati C/C++.
  • Keamanan Memori: Sistem kepemilikan Rust mencegah bug umum tanpa pengumpul sampah.
  • Biner Kecil: Waktu proses Rust yang minimal menghasilkan modul WASM yang ringkas.
  • Perangkat Pengembangan: Dukungan yang sangat baik dengan alat seperti wasm-pack dan wasm-bindgen.

Menyiapkan Alat WASM

Untuk mengompilasi Rust ke WebAssembly, Anda terutama akan menggunakan wasm-pack. Ini adalah alat baris perintah yang menangani seluruh proses pembangunan.

Anda juga akan menggunakan wasm-bindgen, crate Rust dan alat CLI yang memfasilitasi interaksi tingkat tinggi antara modul WASM dan JavaScript.

Untuk memasang wasm-pack, buka terminal Anda lalu jalankan:

cargo install wasm-pack

Proyek WASM Pertama Anda

Mari buat proyek Rust baru yang disesuaikan untuk WebAssembly. Kita akan menggunakan cargo generate dengan templat tertentu:

cargo install cargo-generate
cargo generate --git https://github.com/rustwasm/wasm-pack-template

Ikuti petunjuk untuk memberi nama proyek Anda. Langkah ini menyiapkan file lib.rs untuk kode WASM dan direktori www untuk antarmuka web sederhana.

Fungsi Rust untuk JavaScript

Untuk membuat fungsi Rust dapat dipanggil dari JavaScript, kita menggunakan atribut #[wasm_bindgen] dari crate wasm-bindgen.

Atribut ini menginstruksikan wasm-bindgen untuk membuat kode penghubung yang diperlukan agar JavaScript dapat berinteraksi dengan fungsi Rust Anda.

use wasm_bindgen::prelude::*;

// This attribute makes the `greet` function available to JavaScript.
#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

// In a WASM library, `main` is not used. This code is compiled to a .wasm module.

Mengintegrasikan WASM dengan JavaScript

Setelah menulis kode Rust, Anda membangunnya menjadi modul WASM menggunakan wasm-pack build. Perintah ini membuat direktori pkg yang berisi file .wasm dan kode penghubung JS.

Kemudian, di JavaScript, Anda dapat dengan mudah mengimpor dan menggunakan fungsi Rust yang diekspor:

// www/index.js (simplified)
import { greet } from "../pkg/your_project_name"; // Adjust path

// Call the Rust function
const message = greet("CoddyKit Learner");
console.log(message); // Outputs: "Hello, CoddyKit Learner!"

// You'd typically connect this to HTML elements.

Rust Memanggil JavaScript

Rust juga dapat memanggil fungsi JavaScript. Anda mendeklarasikannya dalam blok extern "C" dan menggunakan #[wasm_bindgen] untuk memetakannya ke objek atau fungsi global JS.

Argumen js_namespace memungkinkan Anda menentukan lokasi fungsi dalam lingkungan JavaScript, misalnya objek console.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
    // Import JS console.log as a Rust function named 'log'
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // You can import other JS functions too
    #[wasm_bindgen(js_name = alert)]
    fn js_alert(s: &str);
}

#[wasm_bindgen]
pub fn log_and_alert_from_rust(message: &str) {
    log(&format!("Rust log: {}", message));
    js_alert(&format!("Rust alert: {}", message));
}

Meneruskan String antara Rust & JS

wasm-bindgen menangani tipe data umum seperti angka dan boolean secara cerdas. Untuk string, alat ini menggunakan pengodean UTF-8.

Saat Anda meneruskan &str atau String dari Rust, wasm-bindgen mengubahnya menjadi String JavaScript, dan sebaliknya. Abstraksi ini membuat interoperabilitas berjalan lancar.

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn uppercase_and_reverse(s: String) -> String {
    s.to_uppercase().chars().rev().collect()
}

// This function takes a String, processes it, and returns a new String.
// wasm-bindgen handles the conversion to/from JS strings.

WASM di Luar Peramban

Meskipun sering dikaitkan dengan peramban web, WebAssembly tidak terbatas pada peramban! Waktu proses WASM tersedia di banyak lingkungan, sehingga membuka berbagai kemungkinan baru:

  • Fungsi Tanpa Server: Menerapkan fungsi yang cepat dan terisolasi.
  • Blockchain: Eksekusi kontrak pintar.
  • Pengaya/Ekstensi: Memperluas aplikasi secara aman.
  • Aplikasi Desktop: Menyematkan modul berkinerja tinggi.

Hal ini memperluas jangkauan Rust jauh melampaui pemrograman sistem tradisional.

Konsep Utama WebAssembly

Mari periksa pemahaman Anda tentang Rust dan WebAssembly.

Rangkuman: Rust ke WASM

Anda telah mempelajari cara membawa kinerja dan keamanan Rust ke WebAssembly!

  • WASM menyediakan waktu proses yang cepat dan portabel untuk kode yang dikompilasi.
  • Rust unggul pada WASM berkat kinerja, biner yang kecil, dan keamanannya.
  • Alat seperti wasm-pack dan wasm-bindgen menyederhanakan proses pengembangan.
  • Anda dapat dengan mudah mengekspor fungsi Rust ke JavaScript dan mengimpor fungsi JavaScript ke Rust.
  • Aplikasi WASM jauh melampaui peramban web.

Teruslah bereksplorasi untuk membangun aplikasi web dan nonweb yang kuat serta berkinerja tinggi dengan Rust!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rust ke WebAssembly (WASM)” gratis?

Ya — teks lengkap “Rust ke WebAssembly (WASM)” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Learn Rust Coding, upgrade ke CoddyKit PRO. Kursus Learn Rust Coding mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Rust ke WebAssembly (WASM)”?

Kompilasi kode Rust ke WebAssembly agar modul berperforma tinggi dapat berjalan di peramban web dan runtime WASM lainnya. Kamu berlatih Learn Rust Coding dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Learn Rust Coding?

Tidak diperlukan pengalaman sebelumnya. Learn Rust Coding di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 3.

Berapa lama pelajaran “Rust ke WebAssembly (WASM)” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Learn Rust Coding ini?

Ya. Setiap pelajaran Learn Rust Coding menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Antarmuka Fungsi Asing (FFI)
  2. Rust ke WebAssembly (WASM)
  3. Pembandingan Kinerja dan Penyetelan Performa
← Kembali ke Learn Rust Coding