Rust-functies voor WASM schrijven

Welkom terug! In de vorige les hebben we je Rust-omgeving ingesteld voor WebAssembly. Nu gaan we Rust-functies schrijven die rechtstreeks in je webtoepassingen kunnen worden gebruikt.

Het doel is om de prestaties en veiligheid van Rust beschikbaar te maken voor JavaScript, zodat je webapps nog krachtiger worden.

Voordat je exporteert, halen we kort aan hoe standaard Rust-functies worden gedefinieerd. Ze gebruiken het sleutelwoord fn, gevolgd door de functienaam, parameters met hun typen en een optioneel retourtype.

• fn: Declareert een functie.
• (param: Type): Definieert parameters en hun typen.
• -> ReturnType: Geeft het retourtype van de functie op.

Om een Rust-functie aanroepbaar te maken vanuit JavaScript, gebruiken we een speciaal attribuut uit de crate wasm-bindgen: #[wasm_bindgen]. Zie het als een bruggenbouwer!

Dit attribuut vertelt de tool wasm-bindgen dat deze de benodigde 'verbindingscode' moet genereren, zodat JavaScript je Rust-functie probleemloos kan begrijpen en aanroepen.

We schrijven een eenvoudige Rust-functie die twee gehele getallen optelt en stellen deze beschikbaar aan JavaScript. Deze functie komt in je bestand src/lib.rs.

Let op het attribuut #[wasm_bindgen] direct boven de functiedefinitie. Dat is de magie!

In het vorige voorbeeld zag je pub fn en use wasm_bindgen::prelude::*;. Laten we hun rol verduidelijken:

• pub: Met dit sleutelwoord maak je de functie openbaar, zodat deze buiten de huidige module toegankelijk is, bijvoorbeeld vanuit JavaScript.
• use wasm_bindgen::prelude::*;: Deze regel importeert essentiële onderdelen uit de bibliotheek wasm-bindgen, waaronder het attribuut #[wasm_bindgen] zelf.

Na het schrijven van je Rust-code gebruik je de opdracht wasm-pack build (die we kort hebben genoemd in les 1) om deze naar een WebAssembly-module te compileren.

wasm-pack neemt alle complexiteit voor zijn rekening en maakt een .wasm-bestand en een JavaScript-bestand met 'verbindingscode' dat het laden van en werken met je Rust-functies vanuit JS vereenvoudigt.

We voegen nog een functie toe aan src/lib.rs. Deze vermenigvuldigt twee getallen. Het proces is identiek: definieer de functie, voeg het attribuut #[wasm_bindgen] toe en maak de functie pub.

Dit laat zien hoe eenvoudig het is om meerdere Rust-functies beschikbaar te maken.

Bij het definiëren van functies voor WASM verwerkt wasm-bindgen automatisch veel gangbare Rust-typen, zoals i32 en f64, en koppelt deze aan hun JavaScript-equivalenten (number).

Voor complexere typen, zoals tekenreeksen of aangepaste structuren, is speciale verwerking nodig. Dat bekijken we in toekomstige lessen. Gebruik voorlopig alleen primitieve numerieke typen.

Na het compileren genereert de tool wasm-pack een JavaScript-bestand, bijvoorbeeld my_wasm_lib.js, dat als tussenlaag fungeert.

Je importeert dit JS-bestand in je webproject. Het biedt functies zoals add() en multiply() rechtstreeks aan, waarbij het laadproces van WASM wordt afgeschermd. Daardoor voelt het gebruik van Rust-functies net als het aanroepen van gewone JavaScript-functies.

Goed gedaan! Je hebt geleerd hoe je Rust-functies voor WebAssembly definieert en beschikbaar maakt.

• Gebruik #[wasm_bindgen] om functies voor export te markeren.
• Zorg dat functies pub zijn.
• wasm-pack build compileert je Rust naar WASM en JavaScript-verbindingscode.
• Primitieve typen zoals i32 worden eenvoudig gekoppeld aan JavaScript-getallen.

Vervolgens gaan we dieper in op hoe JavaScript deze WASM-modules laadt en uitvoert.