Learn Rust Coding · Lekcja

Rust i WebAssembly (WASM)

Skompilują Państwo kod Rust do WebAssembly, umożliwiając uruchamianie wydajnych modułów w przeglądarkach internetowych i innych runtime’ach WASM.

Lekcja 2 z 311 kroki

Rust i WebAssembly (WASM) to bezpłatna lekcja Learn Rust Coding na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Learn Rust Coding, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Learn Rust Coding zawiera 3 lekcji w sumie.

Czym jest WebAssembly (WASM)?

WebAssembly, czyli WASM, to binarny format instrukcji dla stosowej maszyny wirtualnej. Został zaprojektowany jako przenośny cel kompilacji dla języków wysokiego poziomu, takich jak Rust, C/C++ i Go.

Można o nim myśleć jak o niskopoziomowym języku podobnym do asemblera, który działa wydajnie w przeglądarkach internetowych i innych środowiskach. Pozwala uruchamiać kod wymagający wysokiej wydajności z szybkością zbliżoną do natywnej.

Zalety Rust w kontekście WASM

Rust jest doskonałym wyborem do tworzenia aplikacji WebAssembly dzięki swoim wyjątkowym zaletom:

Wydajność: Rust słynie z szybkości zbliżonej do C/C++.
Bezpieczeństwo pamięci: System własności Rust zapobiega typowym błędom bez użycia garbage collectora.
Małe pliki binarne: Minimalne środowisko uruchomieniowe Rust prowadzi do powstawania kompaktowych modułów WASM.
Narzędzia: Doskonałe wsparcie zapewniają narzędzia takie jak wasm-pack i wasm-bindgen.

Konfigurowanie narzędzi WASM

Do kompilowania Rust do WebAssembly używa się przede wszystkim wasm-pack. Jest to narzędzie wiersza poleceń, które obsługuje cały proces kompilacji.

Używany będzie również wasm-bindgen — crate Rust i narzędzie CLI ułatwiające interakcje wysokiego poziomu między modułami WASM a JavaScript.

Aby zainstalować wasm-pack, należy otworzyć terminal i uruchomić:

cargo install wasm-pack

Pierwszy projekt WASM

Utwórzmy nowy projekt Rust dostosowany do WebAssembly. Użyjemy cargo generate wraz z określonym szablonem:

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

Postępuj zgodnie z instrukcjami, aby nadać projektowi nazwę. Spowoduje to utworzenie pliku lib.rs gotowego na kod WASM oraz katalogu www z prostym interfejsem internetowym.

Funkcja Rust dla JavaScript

Aby funkcję Rust można było wywoływać z JavaScript, używamy atrybutu #[wasm_bindgen] z crate'a wasm-bindgen.

Ten atrybut instruuje wasm-bindgen, aby wygenerował niezbędny kod pośredniczący, który umożliwi JavaScript interakcję z funkcją Rust.

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.

Integracja WASM z JavaScript

Po napisaniu kodu Rust należy zbudować go jako moduł WASM za pomocą wasm-pack build. To polecenie tworzy katalog pkg zawierający plik .wasm i kod pośredniczący JavaScript.

Następnie w JavaScript można łatwo zaimportować i używać wyeksportowanych funkcji Rust:

// 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.

Wywoływanie JavaScript z Rust

Rust może również wywoływać funkcje JavaScript. Należy zadeklarować je w bloku extern "C" i użyć #[wasm_bindgen], aby zmapować je na globalne obiekty lub funkcje JS.

Argument js_namespace pozwala określić, gdzie znaleźć funkcję w środowisku JavaScript, na przykład w obiekcie 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));
}

Przekazywanie ciągów znaków między Rust i JS

wasm-bindgen inteligentnie obsługuje typowe typy danych, takie jak liczby i wartości logiczne. W przypadku ciągów znaków używa kodowania UTF-8.

Gdy z Rust przekazywany jest typ &str lub String, wasm-bindgen konwertuje go na JavaScriptowy String i odwrotnie. Ta abstrakcja ułatwia płynną interoperacyjność.

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 poza przeglądarką

Choć WebAssembly często kojarzy się z przeglądarkami internetowymi, nie jest do nich ograniczone! Środowiska uruchomieniowe WASM istnieją dla wielu środowisk, otwierając nowe możliwości:

Funkcje serverless: Wdrażanie szybkich, izolowanych funkcji.
Blockchain: Wykonywanie smart kontraktów.
Wtyczki i rozszerzenia: Bezpieczne rozszerzanie aplikacji.
Aplikacje desktopowe: Osadzanie wydajnych modułów.

Rozszerza to zastosowanie Rust daleko poza tradycyjne programowanie systemowe.

Kluczowe pojęcia WebAssembly

Sprawdźmy Państwa zrozumienie Rust i WebAssembly.

Odpowiedz w interaktywnej lekcji

Podsumowanie: Rust do WASM

Poznali się Państwo ze sposobem wykorzystania wydajności i bezpieczeństwa Rust w WebAssembly!

WASM zapewnia szybkie, przenośne środowisko uruchomieniowe dla skompilowanego kodu.
Rust doskonale sprawdza się w WASM dzięki wydajności, małym plikom binarnym i bezpieczeństwu.
Narzędzia takie jak wasm-pack i wasm-bindgen upraszczają proces tworzenia.
Można łatwo eksportować funkcje Rust do JavaScript i importować funkcje JavaScript do Rust.
Zastosowania WASM wykraczają daleko poza same przeglądarki internetowe.

Proszę dalej poznawać Rust, aby tworzyć wydajne aplikacje internetowe i pozainternetowe!

Bezpłatny start

Ucz się Rust dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 39
Lekcje: 144

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Rust i WebAssembly (WASM)” jest bezpłatna?

Tak — pełny tekst „Rust i WebAssembly (WASM)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Learn Rust Coding, przejdź na CoddyKit PRO. Kurs Learn Rust Coding zawiera 3 lekcji w sumie.

Co nauczysz się w „Rust i WebAssembly (WASM)”?

Skompilują Państwo kod Rust do WebAssembly, umożliwiając uruchamianie wydajnych modułów w przeglądarkach internetowych i innych runtime’ach WASM. Ćwiczysz Learn Rust Coding z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Learn Rust Coding?

Nie wymagamy żadnego doświadczenia. Learn Rust Coding w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Rust i WebAssembly (WASM)”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Learn Rust Coding?

Tak. Każda lekcja Learn Rust Coding zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Learn Rust Coding