WebAssembly: Mål, nøkkelkonsepter og spennende brukseksempler

by
Tweet
Share
Share
Pin
0 Shares

Har du noen gang tenkt over hva som er de grunnleggende ideene og bruksområdene for WebAssembly (WASM)? Hvis ikke, så har vi det du trenger.

WebAssembly, forkortet WASM, representerer en ny type lavnivåspråk. Det er utviklet for å gi mulighet for ytelse som nærmer seg native applikasjoner direkte i nettleseren.

I vår første artikkel, «WebAssembly for nybegynnere – Del 1», presenterte vi WASM fra et innledende ståsted. Vi forklarte hva det er, og hvilke begrensninger det har. I tillegg gikk vi gjennom funksjoner, utviklingsplaner og hvordan JavaScript samhandler med WebAssembly på en måte som supplerer, heller enn konkurrerer.

Denne artikkelen tar for seg WebAssembly på en mer dyptgående måte, og ser nærmere på målene, de viktigste konseptene og forskjellige bruksområder for WASM. Vi vil også se på noen spennende prosjekter som benytter seg av denne teknologien.

La oss begynne!

Mål for WebAssembly

For å virkelig forstå de sentrale konseptene i WebAssembly, må vi først se på hva som er de overordnede målene. Disse målene inkluderer blant annet:

  • Muligheten til å effektivt utnytte tilgjengelig maskinvare gjennom et binært format som er både raskt å laste inn og størrelseseffektivt. WASM benytter seg av en abstrakt syntaksstruktur (AST) i et binært format som muliggjør kompilering og kjøring i nærhet til native hastighet. Dette gjør at WASM kan kjøre på en rekke enheter, fra IoT-enheter til web og mobil.
  • WASM er ikke designet for å erstatte eller endre den eksisterende webplattformen. Det er ment å integreres smidig med dagens og tidligere webteknologier. Dette innebærer at WebAssembly kan samarbeide sømløst med JavaScript, enten ved å kjøre parallelt eller ved å foreta synkrone kall fra JavaScript.
  • Sikkerhet: WASM skal fungere problemfritt med eksisterende sikkerhetspolicyer og samme opprinnelsespolicy (same-origin policy).
  • Fleksibilitet: Utviklere skal kunne designe løsninger som fungerer også utenfor nettlesermiljøet.
  • Utviklerverktøy: Tilby utviklere effektive verktøy for å arbeide med WebAssembly-kildekode ved å tilby et lesbart tekstformat.

Nøkkelkonsepter i WebAssembly

WebAssembly fungerer etter følgende prinsipp:

  • Først skriver man kode i et statisk typet språk med definerte datatyper.
  • Deretter genereres en forhåndskompilert WASM-modul, og denne koden mates inn i kompilatoren.
  • Dette sikrer at WASM ikke trenger å parse koden, og den er klar til å kjøre i nettleseren umiddelbart.

De viktigste konseptene som ligger til grunn for hvordan WebAssembly fungerer i nettleseren, er:

  • Minne: Minnet i WebAssembly administreres og skrives ved hjelp av instruksjoner på lavt nivå for minnetilgang. Teknsik sett er det en ArrayBuffer som kan endre størrelse og inneholder en rekke minne-byte.
  • Modul: En modul i WebAssembly er en kompilert, kjørbar maskinkode. Moduler er statsløse, noe som gjør at nettleseren kan kompilere modulen og dele den mellom vinduer og arbeidstråder. Modulen lagrer og deklarerer også import og eksport, i tillegg til å inneholde funksjoner, tabeller, typer, globale variabler og minne.
  • Tabell: En tabell består av referanser og funksjoner, organisert i en matrise som kan endre størrelse. Dette gjør at man ikke trenger å lagre rå byte-data i minnet.
  • Forekomst: I WASM er en forekomst en modul i kjøretid, der all tilstand er knyttet til den. Denne tilstanden inkluderer tabeller, minne og andre importerte verdier.

Nøkkelkonsepter i WASM

Som webutvikler kan du bruke JavaScript API for å kalle og definere moduler, tabeller, forekomster og tabeller. Du kan også bruke JavaScript til å kalle WASM-eksport synkront i JavaScript-funksjoner. JavaScript samarbeider dermed godt med WebAssembly, slik at du kan skrive høyytelsesapplikasjoner i nettleseren ved hjelp av WASM.

WASM objekter

Når du jobber med WebAssembly, må du være oppmerksom på åtte viktige WASM-objekter. Disse objektene inkluderer:

  • WebAssembly.Global – Global-objektet representerer en global variabelinstans. Den er tilgjengelig både fra WebAssembly.Module og JavaScript.
  • WebAssembly.Module – Modulobjektet inneholder den statsløse WASM-koden, som er forhåndskompilert.
  • WebAssemly.Instance – WebAssembly.Instance er den kjørbare og tilstandsavhengige forekomsten av WebAssembly.Module.
  • WebAssembly.Table – Table-objektet inneholder funksjonsreferanser og fungerer som en JavaScript-innpakning.
  • WebAssembly.CompileError – CompileError-objektet inneholder alle feil som oppstår under validering og dekoding.
  • WebAssembly.RuntimeError – RuntimeError-objektet gir informasjon om alle feil som skjer under kjøring.
  • WebAssembly.LinkError – LinkError-objektet inneholder feil som oppstår under instansiering av modulen.

WASM brukssaker og prosjekter

Vi vet allerede at WebAssembly muliggjør ytelse i nettleseren som ligner native applikasjoner. For å virkelig forstå hvor denne teknologien kan benyttes, er det nødvendig å se nærmere på de aktuelle bruksområdene. Nedenfor følger en oversikt over noen av de mest relevante bruksområdene for WASM.

WebAssembly sine bruksområder strekker seg både innenfor og utenfor nettleseren. I en nettleser kan WASM brukes til en rekke formål, blant annet:

  • Video- eller lydredigering, slik som i prosjektet ffmpegwasm.
  • Videospill i nettleseren, inkludert høyytelsesspill.
  • Vitenskapelig visualisering og simulering.
  • Plattformemulering/simulering, som DOSBox, MAME, etc.
  • Kryptering.
  • Fjernstyrt skrivebord.
  • Utviklerverktøy.

Bruksområder

Fra et bredere perspektiv tilbyr WebAssembly flere overbevisende bruksområder:

  • Evnen til å skrive raskere kode som kan dra nytte av underliggende maskinvare.
  • Muligheten for komprimering på klientsiden, noe som fører til raskere lastetider og lavere båndbreddebruk. Her bruker man klientens CPU for å gjøre komprimering og dekomprimering, i stedet for serverressurser.
  • Muligheten til å bruke andre programmeringsspråk enn JavaScript for utvikling av webapplikasjoner. Dette gir muligheten til å bruke språk som Rust, C og C++ for å skrive ytelseskritisk kode for deler av webapplikasjonen.

Prosjekter

Når det gjelder konkrete eksempler, er følgende prosjekter verdt å nevne:

  • Figma har forbedret ytelsen i nettappen sin ved hjelp av WebAssembly. De har oppnådd redusert lastetid ved applikasjonsstart, raskere gjengivelse av design, og hurtigere nedlasting av designfiler. Som nevnt tidligere, er WebAssembly også nyttig for komprimering, og Figma har implementert WASM for å redusere størrelsen på nedlastbare filer betydelig.
  • Pyodide: Et annet spennende WASM-prosjekt er Pyodide fra Mozilla. Dette prosjektet gir forskere muligheten til å kompilere vitenskapelige Python-biblioteker, som NumPy, SciPy og Scikit-learn, til WebAssembly, slik at de kan kjøre i nettleseren. Prosjektet har også en transparent objektkonvertering mellom Python og JavaScript, og lar utviklere bruke web-APIer fra Python.
  • Brazor WebAssembly: Brazor WebAssembly-rammeverket lar utviklere bygge interaktive webapplikasjoner som kjører på klientsiden med .NET. Disse applikasjonene kan hostes i nettleseren via den WebAssembly-baserte .NET-kjøretiden. Dette gir utviklere tilgang til nettleserfunksjonalitet i .NET-koden gjennom WebAssembly-APIer i JavaScript.

Kilde: Figma

Det finnes mange andre kjente og verdifulle prosjekter som bruker WebAssembly, blant annet Binaryen, Cheerp, Forest og Grain.

Avsluttende tanker

WebAssembly er kanskje ikke det enkleste å komme i gang med for nybegynnere. Men ved å studere bruksområdene og de sentrale konseptene, kan man få en klar forståelse for dens potensial.

Med de spennende prosjektene som er i utvikling, er tiden inne for å lære seg WebAssembly, særlig hvis man jobber med webutvikling. WASMs evne til å fungere utenfor nettleseren gjør det også til et utmerket valg for ytelsesorientert utvikling.

Likte du artikkelen? Del den gjerne med andre!