Doelen, sleutelconcepten en use cases

Heb je je afgevraagd wat de belangrijkste concepten en use cases van WASM zijn? Zo niet, dan hebben we u gedekt.

WebAssembly (WASM) is een nieuwe taal op laag niveau waarmee u native-achtige prestaties op internet kunt deblokkeren.

In WebAssembly voor beginners – deel 1 hebben we WASM geïntroduceerd vanuit het perspectief van een beginner door de definitie en beperkingen ervan te behandelen. Daarnaast hebben we de WebAssembly-functies, de WASM-roadmap en hoe JavaScript werkt met WebAssembly doorgenomen, en niet ertegen.

Dit bericht zal WebAssembly verkennen door WASM-doelen, sleutelconcepten en use-cases te bespreken. We zullen ook enkele van zijn opwindende projecten bekijken.

Laten we beginnen.

WebAssembly-doelen

Om de belangrijkste concepten van WebAssembly te begrijpen, moeten we eerst naar de doelen kijken. Deze doelen omvatten:

  • Mogelijkheid om te profiteren van beschikbare hardware door laadtijd en grootte-efficiënt binair formaat te gebruiken als compilatiedoel. Simpel gezegd, WASM gebruikt een Abstract Syntax Tree (AST) in binair formaat, dat compilatie en uitvoering op native snelheid ondersteunt. Door de aanpak te gebruiken, kan WASM op verschillende apparaten worden uitgevoerd, waaronder IoT, internet en mobiel.
  • Het doel van WASM is niet om het bestaande webplatform te veranderen of te wijzigen. Met deze aanpak kan WebAssembly goed integreren met het huidige en vroegere web. Het stelt WebAssembly ook in staat om naadloos samen te werken met JavaScript, inclusief het uitvoeren naast of het maken van synchrone oproepen vanuit JavaScript.
  • Om naadloos samen te werken met machtigingen beveiligingsbeleid en same-origin.
  • Zorg ervoor dat ontwikkelaars hun oplossingen zo kunnen ontwerpen dat ze niet-browserinbeddingen ondersteunen.
  • Ten slotte, ontwikkelaars de tools geven om efficiënt met WebAssembly-broncode te werken door een door mensen bewerkbaar tekstformaat te bieden.

WebAssembly-sleutelconcepten

In de motorkap volgt WebAssembly de volgende stappen:

  • Eerst moet u code schrijven in een statisch getypte taal met gedefinieerde typen.
  • Als u klaar bent, genereert u een vooraf gecompileerde WASM-module en voert u de code in de engine-compiler in.
  • De bovenstaande stap zorgt ervoor dat WASM het parseren overslaat en de code gereed maakt om in de webbrowser te worden weergegeven.
  Hoe iPhone-kalendervirussen te verwijderen

De belangrijkste concepten achter WebAssembly die in de webbrowser wordt uitgevoerd, zijn onder meer:

  • Geheugen: het geheugen in WebAssembly wordt beheerd en geschreven door zijn instructies voor geheugentoegang op laag niveau. Technisch gezien is het een aanpasbare ArrayBuffer en bevat het een reeks geheugenbytes.
  • Module: De module in WebAssembly is een gecompileerde uitvoerbare computercode. Vanwege zijn staatloze vorm compileert de webbrowser de module en deelt deze onder Windows en Workers. Ook slaat de module import en export op en declareert deze, naast de functies, tabellen, typen, globalen en geheugen.
  • Tabel: Een tabel bestaat uit alle verwijzingen en functies met behulp van een aanpasbare getypeerde array. Hierdoor is het niet meer nodig om onbewerkte bytes in het geheugen op te slaan.
  • Instantie: In WASM is een instantie een module tijdens runtime, met alle statussen gekoppeld. Deze statussen omvatten tabel, geheugen en andere geïmporteerde waardensets.

WASM-sleutelconcepten

Als webontwikkelaar kunt u JavaScript API gebruiken om modules, tabellen, instanties en tabellen aan te roepen en te definiëren. Bovendien gebruik je JavaScript om WASM-exports synchroon aan te roepen binnen de JavaScript-functies. Daarom speelt JavaScript goed met WebAssembly, aangezien u WASM kunt gebruiken om krachtige applicaties in de webbrowser te schrijven.

WASM-objecten

Wanneer u met WebAssembly werkt, moet u acht WASM-objecten bijhouden. Deze objecten omvatten:

  • WebAssembly.Global – Het Global-object is een instantie van een globale variabele. Het is toegankelijk voor zowel WebAssembly.Module als JavaScript.
  • WebAssembly.Module – Hier bevat het Module-object de stateless WASM-code. De code is voorgecompileerd.
  • WebAssemly.Instance – WebAssembly.Instance is de uitvoerbare, stateful instantie van WebAssembly.Module.
  • WebAssembly.Table – Het Table-object bevat functiereferenties en fungeert als een JavaScript-wrapper.
  • WebAssembly.CompileError – Het CompileError-object bevat alle fouten tijdens validatie en decodering.
  • WebAssembly.RuntimeError – Hier geeft het object RuntimeError alle runtime-fouten weer.
  • WebAssembly.LinkError – Het LinkError-object bevat fouten die optreden tijdens het instantiëren van de module.
  Betere foto's maken in uw huis (geen flits nodig)

WASM Use-Cases en Projecten

We weten al dat WebAssembly native-achtige prestaties biedt in de webbrowser. Om echter echt te begrijpen waar u het kunt gebruiken, moet u naar de use cases kijken. Laten we hieronder een paar van de WASM use cases opsommen.

De use cases van WebAssembly strekken zich zowel binnen als buiten de browser uit. Als u bijvoorbeeld WASM in een browser wilt gebruiken, kunt u veel dingen doen, waaronder:

  • Video- of audiobewerking, zoals het ffmpegwasm-project.
  • Videogames in de webbrowser, zoals deze hoogwaardige games.
  • Wetenschappelijke visualisatie en simulatie
  • Platformemulatie/simulatie zoals DOSBox, MAME, enz.
  • Versleuteling
  • Extern bureaublad
  • Tooling voor ontwikkelaars

Gebruik gevallen

Vanuit algemeen oogpunt omvatten de overtuigende use-cases van WebAssembly

  • De mogelijkheid om snellere code te schrijven kan profiteren van de onderliggende hardware.
  • Bovendien kunt u ook compressie aan de clientzijde uitvoeren, wat resulteert in een betere laadtijd en besparingen op bandbreedte. U gebruikt dus de CPU van de client of onderliggende hardware om de compressie en decompressie uit te voeren en gebruikt vervolgens de bronnen van de server.
  • Bovendien kunt u verschillende programmeertalen gebruiken om code voor het web te schrijven, anders dan alleen JavaScript te gebruiken. U kunt bijvoorbeeld Rust, C en C++ gebruiken om hoogwaardige code te schrijven voor bepaalde aspecten van uw webapplicaties.

Projecten

Als we naar praktijkvoorbeelden gaan, zijn de volgende projecten het vermelden waard.

  • Figma verbeterde de prestaties van de webapp met gebruik van WebAssembly. Ze verkortten de laadtijd tijdens app-initialisatie, volledige ontwerpweergave en zelfs het downloaden van een ontwerpbestand. Zoals we eerder hebben besproken, is WebAssembly ook geweldig om te comprimeren. Figma implementeerde WASM om de downloadgrootte te verbeteren en ze aanzienlijk te verkleinen.
  • Pyodide: Een ander opwindend WASM-project is het Pyodide-project, dat werd uitgebracht door Mozilla. Het stelt wetenschappers in staat om de wetenschappelijke stapel van Python te compileren naar WebAssembly, inclusief NumPy, SciPy, Scikit-learn, etc., naar de browser. Het biedt een transparante objectconversie tussen Python en JavaScript. Ten slotte stelt het ontwikkelaars ook in staat om web-API’s te gebruiken met behulp van Python.
  • Brazor WebAssembly: Met het Brazor WebAssembly-framework kunnen ontwikkelaars single-page, client-side en interactieve web-apps bouwen met .NET. U kunt deze apps in de browser hosten met de op WebAssembly gebaseerde .NET-runtime. Hier krijg je als ontwikkelaar toegang tot browserfunctionaliteit in je .NET-code met behulp van WebAssembly’s JavaScript API’s.
  Een telefonische vergadering (en toegangscode) opslaan als contactpersoon

Bron: Figma

Andere vele bekende en waardevolle projecten gebruiken WebAssembly. Dit zijn Binaryen, Cheerp, Forest, Grain en anderen.

Laatste gedachten

WebAssembly is niet bepaald beginnersvriendelijk. Door echter de use cases en sleutelconcepten te bestuderen, kunt u de mogelijkheden ervan duidelijk begrijpen.

Met spannende projecten op de markt is dit de beste tijd om WebAssembly te leren, vooral als je in webontwikkeling zit. De mogelijkheid van WASM om buiten de browser om te werken, maakt het ook een uitstekende keuze voor prestatiegerichte ontwikkeling.

Met plezier het artikel gelezen? Hoe zit het met delen met de wereld?

gerelateerde berichten