Mål, nyckelbegrepp och användningsfall

Har du funderat på de grundläggande idéerna och användningsområdena för WASM? Om inte, så har vi informationen du behöver.

WebAssembly (WASM) är ett nytt, lågnivåspråk som möjliggör prestanda som liknar native-applikationer direkt i webbläsaren.

I artikeln ”WebAssembly för nybörjare – Del 1” introducerade vi WASM från grunden, gick igenom dess definitioner och begränsningar. Vi utforskade även WebAssemblys funktioner, dess utvecklingsplan och hur JavaScript samverkar med WebAssembly, istället för att konkurrera med det.

I det här inlägget går vi djupare in i WebAssembly och diskuterar dess målsättningar, grundläggande koncept och olika användningsområden. Vi kommer även att presentera några intressanta projekt som använder WASM.

Låt oss börja utforska.

WebAssemblys målsättningar

För att förstå WebAssemblys grundläggande principer måste vi först titta på dess huvudmål. Dessa mål är bland annat:

• Att utnyttja tillgänglig hårdvara genom ett effektivt binärt format, som är optimerat för laddningstid och storlek. Enkelt uttryckt använder WASM ett abstrakt syntaxträd (AST) i binärt format, vilket gör det möjligt att kompilera och köra kod med nära nativ hastighet. Med detta tillvägagångssätt kan WASM fungera på en mängd olika enheter, inklusive IoT, webb och mobila plattformar.
• WASM är inte tänkt att ersätta eller ändra den befintliga webbplattformen. Den är utformad för att smidigt integreras med nuvarande och tidigare webbteknologier. Det möjliggör också sömlös samverkan med JavaScript, inklusive möjligheten att köras sida vid sida eller göra synkrona anrop från JavaScript-kod.
• Att fungera problemfritt med behörighetssäkerhetspolicyer och samma ursprungsprincip.
• Att säkerställa att utvecklare kan designa lösningar som fungerar även utanför webbläsarmiljöer.
• Slutligen, att ge utvecklare verktyg för att arbeta effektivt med WebAssembly-källkoden genom att erbjuda ett textformat som är lätt att läsa och redigera.

Grundläggande begrepp i WebAssembly

Under ytan följer WebAssembly dessa steg:

• Först måste du skriva kod med ett statiskt typat språk.
• När koden är klar genereras en förkompilerad WASM-modul och matas in i kompileraren.
• Dessa steg gör att WASM kan hoppa över tolkning och snabbt rendera koden i webbläsaren.

De centrala koncepten för WebAssembly som körs i webbläsaren inkluderar:

• Minne: Minnet i WebAssembly hanteras och manipuleras med hjälp av lågnivåinstruktioner för minnesåtkomst. Det är i grunden en ArrayBuffer som kan ändra storlek och lagrar en sekvens av minnesbyte.
• Modul: En modul i WebAssembly är kompilerad, körbar datorkod. Eftersom den är tillståndslös, kan webbläsaren kompilera modulen och dela den mellan fönster och workers. Modulen lagrar och definierar också importer och exporter, samt innehåller funktioner, tabeller, typer, globala variabler och minne.
• Tabell: En tabell består av referenser och funktioner som använder en typmatris vars storlek kan ändras. Detta eliminerar behovet av att lagra råa bytes i minnet.
• Instans: I WASM representerar en instans en modul som körs, komplett med all tillhörande status. Denna status inkluderar tabeller, minne och andra importerade värden.

WASM:s grundläggande koncept

Som webbutvecklare kan du använda JavaScript-API:et för att anropa och definiera moduler, tabeller, instanser och tabeller. Du kan även använda JavaScript för att synkront anropa WASM-exporter inifrån JavaScript-funktioner. Därför fungerar JavaScript bra med WebAssembly, eftersom du kan använda WASM för att skapa högpresterande applikationer direkt i webbläsaren.

WASM-objekt

När du arbetar med WebAssembly finns det åtta centrala WASM-objekt du behöver hålla reda på. Dessa objekt är:

• WebAssembly.Global – Det globala objektet representerar en global variabel. Den är tillgänglig både från WebAssembly.Module och från JavaScript.
• WebAssembly.Module – Här lagras den tillståndslösa WASM-koden, som är förkompilerad.
• WebAssembly.Instance – WebAssembly.Instance är den körbara, tillståndskänsliga instansen av en WebAssembly.Module.
• WebAssembly.Table – Table-objektet innehåller funktionsreferenser och fungerar som ett JavaScript-omslag.
• WebAssembly.CompileError – CompileError-objektet innehåller alla fel som uppstår under validering och avkodning.
• WebAssembly.RuntimeError – Här listas alla runtime-fel som uppstår.
• WebAssembly.LinkError – LinkError-objektet innehåller fel som uppstår vid instansiering av en modul.

Användningsområden och projekt med WASM

Vi vet redan att WebAssembly ger prestanda nära den för native applikationer i webbläsaren. För att fullt ut förstå dess potential är det bra att se på dess användningsområden. Nedan listar vi några exempel på hur WASM kan användas.

Användningsområden för WebAssembly sträcker sig både inom och utanför webbläsaren. Till exempel, om du vill använda WASM i webbläsaren kan du göra en mängd saker, inklusive:

• Video- eller ljudredigering, som i projektet ffmpegwasm.
• Webbaserade videospel, som dessa högpresterande spel.
• Vetenskaplig visualisering och simulering.
• Plattformsemulering/simulering som DOSBox, MAME, etc.
• Kryptering.
• Fjärrskrivbord.
• Utvecklarverktyg.

Användningsområden

Generellt sett är de mest övertygande användningsområdena för WebAssembly:

• Möjligheten att skriva snabbare kod som kan utnyttja den underliggande hårdvaran.
• Dessutom kan du utföra komprimering på klientsidan, vilket ger snabbare laddningstider och minskar bandbreddsanvändningen. Du använder helt enkelt klientens CPU eller hårdvara för komprimering och dekomprimering istället för serverns resurser.
• Dessutom kan du använda olika programmeringsspråk, utöver bara JavaScript, för att skriva kod för webben. Du kan till exempel använda Rust, C och C++ för att skriva högpresterande kod för specifika delar av dina webbapplikationer.

Projekt

Här följer några konkreta projekt som är värda att nämna:

• Figma har förbättrat sin webbapplikations prestanda genom att använda WebAssembly. De har minskat laddningstiden under applikationsstart, vid rendering av komplex design och även vid nedladdning av designfiler. Som tidigare nämnts är WebAssembly också bra för komprimering. Figma använder WASM för att minska nedladdningsstorlekarna, vilket resulterar i betydande besparingar.
• Pyodide: Ett annat spännande WASM-projekt är Pyodide, som kommer från Mozilla. Det gör det möjligt för forskare att kompilera Python-baserade vetenskapliga bibliotek som NumPy, SciPy och Scikit-learn till WebAssembly, så att de kan köras i webbläsaren. Det erbjuder även en smidig konvertering mellan objekt i Python och JavaScript. Slutligen låter det utvecklare använda webb-API:er i Python.
• Blazor WebAssembly: Blazor WebAssembly-ramverket gör det möjligt för utvecklare att bygga interaktiva webbapplikationer som körs på klientsidan med hjälp av .NET. Du kan köra dessa appar direkt i webbläsaren med hjälp av den WebAssembly-baserade .NET-körningen. Detta ger utvecklare tillgång till webbläsarfunktioner direkt i .NET-koden via WebAssemblys JavaScript-API:er.

Det finns många andra välkända och betydelsefulla projekt som använder WebAssembly, som Binaryen, Cheerp, Forest, Grain och många fler.

Sammanfattande tankar

WebAssembly är inte det enklaste för nybörjare, men genom att förstå dess användningsområden och grundläggande koncept kan du tydligt se dess potential.

Med så många spännande projekt som dyker upp på marknaden är det ett bra tillfälle att lära sig WebAssembly, särskilt om du arbetar med webbutveckling. WASM:s förmåga att fungera utanför webbläsaren gör det också till ett utmärkt val för prestandakänslig utveckling.

Hoppas du gillade artikeln! Dela gärna med dig av den till andra.