Cíle, klíčové pojmy a případy použití

autor:
Tweet
Share
Share
Pin

Přemýšleli jste o klíčových konceptech a případech použití WASM? Pokud ne, zajistili jsme vám to.

WebAssembly (WASM) je nový nízkoúrovňový jazyk, který vám umožňuje odblokovat výkon podobný nativnímu webu na webu.

Ve WebAssembly for Beginners – Part 1 jsme představili WASM z pohledu začátečníka tím, že jsme pokryli jeho definici a omezení. Kromě toho jsme prošli funkcemi WebAssembly, plánem WASM a tím, jak JavaScript funguje s WebAssembly a ne proti němu.

Tento příspěvek prozkoumá WebAssembly diskusí o cílech WASM, klíčových konceptech a případech použití. Podíváme se také na některé z jeho zajímavých projektů.

Začněme.

Cíle WebAssembly

Abychom porozuměli klíčovým konceptům WebAssembly, musíme se nejprve podívat na jeho cíle. Mezi tyto cíle patří:

  • Schopnost využít výhod dostupného hardwaru pomocí binárního formátu s efektivním načítáním a velikostí jako cíle kompilace. Jednoduše řečeno, WASM používá abstraktní syntaxový strom (AST) v binárním formátu, který podporuje kompilaci a provádění při nativní rychlosti. Pomocí tohoto přístupu může WASM fungovat na různých zařízeních, včetně IoT, webu a mobilních zařízení.
  • Cílem WASM není měnit nebo měnit stávající webovou platformu. S tímto přístupem se WebAssembly může dobře integrovat se současným i minulým webem. Umožňuje také WebAssembly bezproblémově pracovat s JavaScriptem, včetně spouštění nebo provádění synchronních volání z JavaScriptu.
  • Chcete-li hladce pracovat se zásadami zabezpečení oprávnění a stejným původem.
  • Zajistěte, aby vývojáři mohli navrhnout svá řešení tak, aby podporovala vložení mimo prohlížeč.
  • A konečně, vývojářům poskytujeme nástroje pro efektivní práci se zdrojovým kódem WebAssembly tím, že poskytuje člověkem upravitelný textový formát.
  Jak stáhnout data z Apple

Klíčové pojmy WebAssembly

Uvnitř kapoty WebAssembly postupuje podle následujících kroků:

  • Nejprve musíte napsat kód ve staticky typovaném jazyce s definovanými typy.
  • Po dokončení vygenerujete předkompilovaný modul WASM a vložíte kód do kompilátoru enginu.
  • Výše uvedený krok zajišťuje, že WASM přeskočí analýzu a připraví kód k vykreslení ve webovém prohlížeči.

Mezi klíčové koncepty WebAssembly běžící ve webovém prohlížeči patří:

  • Paměť: Paměť v WebAssembly je spravována a zapisována pomocí instrukcí pro nízkoúrovňový přístup do paměti. Technicky jde o ArrayBuffer s měnitelnou velikostí a obsahuje pole bajtů paměti.
  • Modul: Modul ve WebAssembly je zkompilovaný spustitelný počítačový kód. Díky své bezstavové formě webový prohlížeč zkompiluje modul a sdílí jej mezi Windows a pracovníky. Modul také ukládá a deklaruje importy a exporty, kromě uložení funkcí, tabulek, typů, globálů a paměti.
  • Tabulka: Tabulka se skládá ze všech odkazů a funkcí pomocí typovaného pole s měnitelnou velikostí. To odstraňuje potřebu ukládat nezpracované bajty do paměti.
  • Instance: Ve WASM je instance modul během běhu se všemi stavy spárovanými. Tyto stavy zahrnují tabulku, paměť a další importované sady hodnot.

Klíčové pojmy WASM

Jako webový vývojář můžete pomocí JavaScript API volat a definovat moduly, tabulky, instance a tabulky. Kromě toho používáte JavaScript k volání exportů WASM synchronně v rámci funkcí JavaScriptu. Proto si JavaScript hraje s WebAssembly dobře, protože můžete použít WASM k psaní vysoce výkonných aplikací ve webovém prohlížeči.

Objekty WASM

Při práci s WebAssembly musíte sledovat osm objektů WASM. Mezi tyto objekty patří:

  • WebAssembly.Global – Objekt Global je instance globální proměnné. Je přístupný jak pomocí WebAssembly.Module, tak pomocí JavaScriptu.
  • WebAssembly.Module – Zde objekt Module obsahuje bezstavový kód WASM. Kód je předkompilován.
  • WebAssembly.Instance – WebAssembly.Instance je spustitelná stavová instance WebAssembly.Module.
  • WebAssembly.Table – Objekt Table obsahuje odkazy na funkce a funguje jako obal JavaScriptu.
  • WebAssembly.CompileError – Objekt CompileError obsahuje všechny chyby během ověřování a dekódování.
  • WebAssembly.RuntimeError – Zde objekt RuntimeError obsahuje seznam všech runtime chyb.
  • WebAssembly.LinkError – Objekt LinkError obsahuje chyby, ke kterým dochází během vytváření instance modulu.
  Jak změnit pozadí v Discordu

WASM případy použití a projekty

Již víme, že WebAssembly nabízí ve webovém prohlížeči výkon podobný nativnímu. Abyste však skutečně pochopili, kde jej můžete použít, musíte se podívat na jeho případy použití. Níže uvádíme několik případů použití WASM.

Případy použití WebAssembly zahrnují jak uvnitř, tak mimo prohlížeč. Pokud například chcete používat WASM v prohlížeči, můžete dělat spoustu věcí, včetně:

  • Úpravy videa nebo zvuku, jako je projekt ffmpegwasm.
  • Videohry ve webovém prohlížeči, jako jsou tyto vysoce výkonné hry.
  • Vědecká vizualizace a simulace
  • Emulace/simulace platformy, jako je DOSBox, MAME atd.
  • Šifrování
  • Vzdálená plocha
  • Vývojářské nástroje

Případy užití

Z obecného hlediska mezi přesvědčivé případy použití WebAssembly patří

  • Schopnost psát rychlejší kód může využít výhod základního hardwaru.
  • Kromě toho můžete také provádět kompresi na straně klienta, což má za následek lepší dobu načítání a úsporu šířky pásma. K provedení komprese a dekomprese tedy použijete CPU klienta nebo základní hardware a poté použijete prostředky serveru.
  • Kromě toho můžete použít různé programovací jazyky k psaní kódu pro web jinak než jen pomocí JavaScriptu. Můžete například použít Rust, C a C++ k psaní vysoce výkonného kódu pro určité aspekty vašich webových aplikací.
  Jak vyhrát spokojenost zákazníků s Freshworks

Projekty

Přejdeme-li k reálným příkladům, stojí za zmínku následující projekty.

  • Figma zlepšila výkon své webové aplikace pomocí WebAssembly. Zkrátili dobu načítání během inicializace aplikace, vykreslování celého návrhu a dokonce i stahování souboru návrhu. Jak jsme již zmínili dříve, WebAssembly je také skvělé pro kompresi. Figma implementovala WASM, aby zlepšila velikost stahování a výrazně je zmenšila.
  • Pyodide: Dalším vzrušujícím projektem WASM je projekt Pyodide, který byl vydán od Mozilly. Umožňuje vědcům kompilovat vědecký zásobník Pythonu do WebAssembly, včetně NumPy, SciPy, Scikit-learn atd., do prohlížeče. Nabízí transparentní konverzi objektů mezi Pythonem a JavaScriptem. A konečně také umožňuje vývojářům používat webová rozhraní API pomocí Pythonu.
  • Brazor WebAssembly: Rámec Brazor WebAssembly umožňuje vývojářům vytvářet jednostránkové, klientské a interaktivní webové aplikace s .NET. Tyto aplikace můžete hostovat v prohlížeči pomocí běhového prostředí .NET založeného na WebAssembly. Zde, jako vývojář, získáte přístup k funkcím prohlížeče ve vašem kódu .NET pomocí rozhraní JavaScript API WebAssembly.

Zdroj: Figma

Další mnoho známých a hodnotných projektů používá WebAssembly. Jsou to Binaryen, Cheerp, Forest, Grain a další.

Závěrečné myšlenky

WebAssembly není zrovna přátelská pro začátečníky. Když si však prostudujete případy použití a klíčové koncepty, můžete jasně pochopit jeho schopnosti.

Díky vzrušujícím projektům na trhu je nejlepší čas naučit se WebAssembly, zvláště pokud se zabýváte vývojem webu. Schopnost WASM pracovat mimo prohlížeč z něj také dělá vynikající volbu pro vývoj orientovaný na výkon.

Užili jste si čtení článku? Co takhle sdílet se světem?