Mål, nyckelbegrepp och användningsfall

av

Har du undrat över WASM:s nyckelkoncept och Use Cases? Om inte, vi har dig täckt.

WebAssembly (WASM) är ett nytt lågnivåspråk som låter dig avblockera native-liknande prestanda på webben.

I WebAssembly for Beginners – Del 1 introducerade vi WASM från ett nybörjarperspektiv genom att täcka dess definition och begränsningar. Dessutom gick vi igenom WebAssembly-funktioner, WASM-färdplan och hur JavaScript fungerar med WebAssembly, och inte mot det.

Det här inlägget kommer att utforska WebAssembly genom att diskutera WASM-mål, nyckelbegrepp och användningsfall. Vi kommer också att ta en titt på några av dess spännande projekt.

Låt oss börja.

WebAssembly mål

För att förstå WebAssembly nyckelbegrepp måste vi först titta på dess mål. Dessa mål inkluderar:

  • Möjlighet att dra fördel av tillgänglig hårdvara genom att använda laddningstid och storlekseffektivt binärt format som ett kompileringsmål. Med enkla ord använder WASM ett abstrakt syntaxträd (AST) i binärt format, vilket stöder kompilering och exekvering i naturlig hastighet. Genom att använda tillvägagångssättet kan WASM utföra på olika enheter, inklusive IoT, webb och mobil.
  • WASM:s mål är inte att ändra eller ändra den befintliga webbplattformen. Med detta tillvägagångssätt kan WebAssembly integreras väl med nuvarande och tidigare webb. Det gör det också möjligt för WebAssembly att fungera sömlöst med JavaScript, inklusive att köra vid sidan av eller göra synkrona anrop från JavaScript.
  • Att arbeta sömlöst med behörighetssäkerhetspolicyer och samma ursprung.
  • Se till att utvecklare kan designa sina lösningar för att stödja inbäddningar som inte är webbläsare.
  • Till sist, ge utvecklare verktygen för att arbeta effektivt med WebAssembly-källkoden genom att tillhandahålla ett mänskligt redigerbart textformat.

WebAssembly nyckelbegrepp

Inuti huven följer WebAssembly följande steg:

  • Till en början måste du skriva kod på ett statiskt skrivet språk med definierade typer.
  • När du är klar genererar du en förkompilerad WASM-modul och matar in koden i motorkompilatorn.
  • Ovanstående steg säkerställer att WASM hoppar över analys och gör koden redo att renderas i webbläsaren.

Nyckelkoncepten bakom WebAssembly som körs i webbläsaren inkluderar:

  • Minne: Minnet i WebAssembly hanteras och skrivs av dess lågnivåinstruktioner för minnesåtkomst. Tekniskt sett är det en ArrayBuffer som kan ändras storlek och innehåller en array av minnesbyte.
  • Modul: Modulen i WebAssembly är en kompilerad körbar datorkod. På grund av dess statslösa form kompilerar webbläsaren modulen och delar den mellan Windows och Workers. Modulen lagrar och deklarerar även import och export, förutom att den innehåller funktioner, tabeller, typer, globaler och minne.
  • Tabell: En tabell består av alla referenser och funktioner som använder en storleksändringsbar typmatris. Detta tar bort behovet av att lagra råbytes i minnet.
  • Instans: I WASM är en instans en modul under körning, med alla tillstånd parade. Dessa tillstånd inkluderar tabell, minne och andra importerade värdeuppsättningar.

WASM nyckelbegrepp

Som webbutvecklare kan du använda JavaScript API för att anropa och definiera moduler, tabeller, instanser och tabeller. Dessutom använder du JavaScript för att anropa WASM-exporter synkront inom JavaScript-funktionerna. Därför fungerar JavaScript bra med WebAssembly eftersom du kan använda WASM för att skriva högpresterande applikationer i webbläsaren.

WASM objekt

När du arbetar med WebAssembly måste du hålla reda på åtta WASM-objekt. Dessa objekt inkluderar:

  • WebAssembly.Global – Det globala objektet är en global variabel instans. Den är tillgänglig med både WebAssembly.Module och JavaScript.
  • WebAssembly.Module – Här innehåller modulobjektet den tillståndslösa WASM-koden. Koden är förkompilerad.
  • WebAssemly.Instance – WebAssembly.Instance är den körbara, stateful instansen av WebAssembly.Module.
  • WebAssembly.Table – Table-objektet innehåller funktionsreferenser och fungerar som ett JavaScript-omslag.
  • WebAssembly.CompileError – CompileError-objektet innehåller alla fel under validering och avkodning.
  • WebAssembly.RuntimeError – Här listar RuntimeError-objektet alla runtime-fel.
  • WebAssembly.LinkError – LinkError-objektet innehåller fel som inträffar under instansieringen av modulen.

WASM användningsfall och projekt

Vi vet redan att WebAssembly erbjuder native-liknande prestanda i webbläsaren. Men för att verkligen förstå var du kan använda den måste du titta på dess användningsfall. Låt oss nedan lista några av WASM-användningsfallen.

Användningsfall för WebAssembly sträcker sig både inom och utanför webbläsaren. Om du till exempel vill använda WASM i en webbläsare kan du göra många saker, inklusive:

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

Användningsfall

Ur en allmän synvinkel inkluderar WebAssemblys övertygande användningsfall

  • Möjligheten att skriva snabbare kod kan dra fördel av den underliggande hårdvaran.
  • Dessutom kan du också göra komprimering på klientsidan, vilket resulterar i bättre laddningstid och bandbreddsbesparingar. Så, du använder klientens CPU eller underliggande hårdvara för att göra komprimeringen och avkomprimeringen och sedan använda serverns resurser.
  • Dessutom kan du använda olika programmeringsspråk för att skriva kod för webben förutom att bara använda JavaScript. Du kan till exempel använda Rust, C och C++ för att skriva högpresterande kod för vissa aspekter av dina webbapplikationer.

Projekt

Om vi ​​går till verkliga exempel är följande projekt värda att nämna.

  • Figma förbättrade sin webbappprestanda med WebAssembly-användning. De minskade laddningstiden under appinitiering, hel designrendering och till och med nedladdning av en designfil. Som vi diskuterade tidigare är WebAssembly också bra för komprimering. Figma implementerade WASM för att förbättra nedladdningsstorleken, vilket minskade dem avsevärt.
  • Pyodide: Ett annat spännande WASM-projekt är Pyodide-projektet, som släpptes från Mozilla. Det gör det möjligt för forskare att kompilera Python scientific stack till WebAssembly, inklusive NumPy, SciPy, Scikit-learn, etc., till webbläsaren. Det erbjuder en transparent objektkonvertering mellan Python och JavaScript. Slutligen tillåter det också utvecklare att använda webb-API:er med Python.
  • Brazor WebAssembly: Brazor WebAssembly-ramverket låter utvecklare bygga ensidiga, klientsida och interaktiva webbappar med .NET. Du kan vara värd för dessa appar i webbläsaren med den WebAssembly-baserade .NET runtime. Här får du som utvecklare tillgång till webbläsarfunktionalitet i din .NET-kod med hjälp av WebAssemblys JavaScript API:er.

Källa: Figma

Andra många välkända och värdiga projekt använder WebAssembly. Dessa är Binaryen, Cheerp, Forest, Grain och andra.

Slutgiltiga tankar

WebAssembly är inte precis nybörjarvänligt. Men genom att studera dess användningsfall och nyckelbegrepp kan du tydligt förstå dess förmåga.

Med spännande projekt på marknaden är det den bästa tiden att lära sig WebAssembly, speciellt om du är i webbutveckling. WASM:s förmåga att arbeta utanför webbläsaren gör den också till ett utmärkt val för prestationsorienterad utveckling.

Gillade du att läsa artikeln? Vad sägs om att dela med världen?