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

Zajímalo vás někdy, jaké jsou klíčové myšlenky a možnosti využití technologie WASM? Pokud jste o tom ještě nepřemýšleli, jste na správném místě.

WebAssembly (WASM) je nově vzniklý jazyk s nízkou úrovní abstrakce, který umožňuje dosáhnout výkonu srovnatelného s nativním kódem přímo ve webovém prostředí.

V článku „WebAssembly pro začátečníky – 1. část“ jsme se na WASM podívali z pohledu úplných začátečníků. Probrali jsme jeho definici, omezení a také funkce WebAssembly, jeho budoucí směřování a způsob, jakým spolupracuje s JavaScriptem, nikoli proti němu.

V tomto článku se hlouběji podíváme na WebAssembly. Prozkoumáme cíle, které si WASM klade, hlavní koncepce a praktické případy použití. Také si představíme některé zajímavé projekty, které s ním souvisejí.

Pojďme na to!

Cíle WebAssembly

Pro pochopení klíčových principů WebAssembly je nutné nejprve porozumět jeho základním cílům. Mezi ně patří:

• Využití potenciálu dostupného hardwaru prostřednictvím binárního formátu, který se efektivně načítá a má optimální velikost pro kompilaci. Jednoduše řečeno, WASM využívá abstraktní syntaktický strom (AST) v binární podobě. To umožňuje kompilaci a spouštění kódu rychlostí blížící se nativní. Díky tomuto přístupu může WASM běžet na široké škále zařízení, včetně IoT, webových stránek i mobilních telefonů.
• Záměrem WASM není nahradit ani měnit současnou webovou platformu. WebAssembly se bezproblémově integruje se stávajícím i budoucím webovým ekosystémem. Umožňuje také hladkou spolupráci s JavaScriptem, včetně synchronních volání funkcí z JavaScriptu.
• Zajištění bezproblémové integrace se stávajícími bezpečnostními pravidly, včetně zásady stejného původu.
• Poskytnout vývojářům možnost vytvářet řešení, která mohou být použita i mimo webové prohlížeče.
• Poskytnout vývojářům nástroje pro efektivní práci se zdrojovým kódem WebAssembly díky lidsky čitelnému textovému formátu.

Klíčové pojmy WebAssembly

Proces fungování WebAssembly probíhá v těchto krocích:

• Nejprve je nutné napsat kód ve staticky typovaném jazyce s jasně definovanými datovými typy.
• Následně se vytvoří předkompilovaný WASM modul a kód se předá kompilátoru enginu.
• Tento proces zaručí, že WASM přeskočí analýzu a je připraven k vykreslení ve webovém prohlížeči.

Mezi základní koncepce WebAssembly v rámci webového prohlížeče patří:

• Paměť: V WebAssembly je paměť spravována a modifikována pomocí instrukcí pro přístup na nízké úrovni. Technicky jde o ArrayBuffer s proměnlivou velikostí, který obsahuje pole paměťových bajtů.
• Modul: Modul v WebAssembly je zkompilovaný spustitelný kód. Díky svému bezstavovému charakteru může webový prohlížeč modul zkompilovat a sdílet mezi různými okny a workery. Modul také ukládá deklarace importů a exportů, a navíc obsahuje funkce, tabulky, typy, globální proměnné a paměť.
• Tabulka: Tabulka je tvořena odkazy a funkcemi, které jsou uloženy v typovaném poli s měnitelnou velikostí. Díky tomu není nutné ukládat surové bajty do paměti.
• Instance: V WASM je instance spuštěním modulu, ve kterém jsou všechny stavy přidružené. Mezi tyto stavy patří tabulka, paměť a sady importovaných hodnot.

Základní koncepty WASM

Weboví vývojáři mohou využívat JavaScript API pro vytváření a definování modulů, tabulek a instancí. Dále mohou pomocí JavaScriptu synchronně volat exportované funkce WASM. JavaScript tedy s WebAssembly výborně spolupracuje, protože můžete WASM použít pro vytváření vysoce výkonných webových aplikací.

Objekty WASM

Při práci s WebAssembly je nutné se seznámit s osmi WASM objekty. Jsou to:

• WebAssembly.Global – Objekt Global představuje globální proměnnou, která je přístupná jak z WebAssembly.Module, tak i z JavaScriptu.
• WebAssembly.Module – V tomto objektu se nachází bezstavový WASM kód v předkompilované podobě.
• WebAssembly.Instance – WebAssembly.Instance je spuštěná, stavová instance WebAssembly.Module.
• WebAssembly.Table – Objekt Table obsahuje odkazy na funkce a funguje jako obal pro JavaScript.
• WebAssembly.CompileError – Objekt CompileError obsahuje informace o chybách, které nastaly během ověřování a dekódování kódu.
• WebAssembly.RuntimeError – Objekt RuntimeError obsahuje informace o chybách, které nastaly při běhu programu.
• WebAssembly.LinkError – Objekt LinkError obsahuje chyby, které se vyskytnou při vytváření instance modulu.

WASM případy použití a projekty

Již víme, že WebAssembly nabízí výkon srovnatelný s nativním kódem přímo ve webovém prohlížeči. Pro hlubší pochopení jeho možností se musíme zaměřit na reálné případy použití. Níže uvádíme některé z nich.

Možnosti využití WebAssembly zahrnují jak prostředí prohlížeče, tak i mimo něj. V rámci prohlížeče můžete s WASM dělat například:

• Úpravy videa a zvuku, jako v projektu ffmpegwasm.
• Propracované webové hry s vysokým výkonem.
• Vědecké vizualizace a simulace.
• Emulace a simulace platforem, jako je DOSBox nebo MAME.
• Šifrování dat.
• Vzdálená správa počítačů.
• Vývojářské nástroje.

Praktické příklady

Z obecnějšího pohledu lze říci, že mezi přesvědčivé případy použití WebAssembly patří:

• Možnost psát rychlejší kód, který lépe využívá potenciál hardwaru.
• Provádění komprese dat na straně klienta, což vede k rychlejšímu načítání stránek a úspoře šířky pásma. Pro kompresi a dekompresi se využije procesor klienta, čímž se uleví zdrojům serveru.
• Využití široké škály programovacích jazyků pro vývoj webových aplikací, nejen JavaScriptu. Pro specifické části kódu, které vyžadují vysoký výkon, můžete použít například Rust, C nebo C++.

Projekty

Mezi reálné projekty, které stojí za zmínku, patří:

• Figma, která implementací WebAssembly výrazně zlepšila výkon své webové aplikace. Zkrátili se časy načítání při spuštění aplikace, vykreslování návrhů a také stahování souborů. WebAssembly se výborně hodí i pro kompresi, což Figma využila ke zmenšení velikosti stahovaných dat.
• Pyodide, projekt Mozilly, který umožňuje vědeckým pracovníkům kompilovat vědecké knihovny Pythonu, jako jsou NumPy, SciPy nebo Scikit-learn do WebAssembly pro spouštění v prohlížeči. Pyodide také zajišťuje transparentní konverzi objektů mezi Pythonem a JavaScriptem. A navíc vývojářům umožňuje používat webová API přímo z Pythonu.
• Brazor WebAssembly, framework pro vytváření interaktivních klientských webových aplikací s využitím .NET. Tyto aplikace lze hostovat v prohlížeči pomocí .NET běhového prostředí postaveného na WebAssembly. Díky tomu mají vývojáři .NET přístup k funkcím prohlížeče skrze WebAssembly JavaScript API.

Zdroj: Figma

Existuje mnoho dalších známých a hodnotných projektů, které používají WebAssembly, například Binaryen, Cheerp, Forest, Grain a další.

Závěrem

WebAssembly není zrovna technologie pro úplné začátečníky. Nicméně studiem jeho klíčových konceptů a reálných případů použití získáte jasný přehled o jeho potenciálu.

Vzhledem k tomu, kolik zajímavých projektů se kolem WebAssembly objevuje, je ten pravý čas se s touto technologií seznámit, zvláště pokud se věnujete webovému vývoji. Díky schopnosti WASM fungovat i mimo prohlížeč se stává skvělou volbou pro vývoj aplikací s důrazem na výkon.

Líbil se vám tento článek? Podělte se o něj se světem!