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!