Elgondolkodott már a WASM kulcsfontosságú koncepcióin és használati esetein? Ha nem, akkor biztosítjuk.
A WebAssembly (WASM) egy új, alacsony szintű nyelv, amely lehetővé teszi a natívhoz hasonló teljesítmény letiltását az interneten.
A WebAssembly for Beginners – 1. részében a WASM-et kezdők szemszögéből mutattuk be, bemutatva annak meghatározását és korlátait. Ezen túlmenően végignéztük a WebAssembly funkcióit, a WASM ütemtervet és azt, hogy a JavaScript hogyan működik együtt a WebAssembly-vel, nem pedig ellene.
Ez a bejegyzés a WebAssembly-t vizsgálja meg a WASM célok, kulcsfogalmak és használati esetek megvitatásával. Megnézzük néhány izgalmas projektjét is.
Kezdjük el.
Tartalomjegyzék
WebAssembly célok
A WebAssembly kulcsfontosságú fogalmainak megértéséhez először meg kell vizsgálnunk a céljait. Ezek a célok a következők:
- Lehetőség a rendelkezésre álló hardver előnyeinek kihasználására a betöltési idő és a mérethatékony bináris formátum használatával fordítási célként. Egyszerűen fogalmazva, a WASM egy Abstract Syntax Tree-t (AST) használ bináris formátumban, amely támogatja a natív sebességű fordítást és végrehajtást. A megközelítés használatával a WASM különféle eszközökön tud működni, beleértve az IoT-t, a webet és a mobileszközöket.
- A WASM célja nem a meglévő webes platform megváltoztatása vagy megváltoztatása. Ezzel a megközelítéssel a WebAssembly jól integrálható a jelenlegi és a múltbeli webbe. Azt is lehetővé teszi, hogy a WebAssembly zökkenőmentesen működjön együtt a JavaScripttel, beleértve a párhuzamos végrehajtást vagy szinkron hívások végrehajtását a JavaScriptből.
- A zökkenőmentes munkavégzés az engedélyekkel kapcsolatos biztonsági házirendekkel és az azonos eredetűekkel.
- Győződjön meg arról, hogy a fejlesztők úgy tervezhetik meg megoldásaikat, hogy támogassák a nem böngészős beágyazásokat.
- Végül pedig olyan eszközöket adunk a fejlesztőknek, amelyek segítségével hatékonyan dolgozhatnak a WebAssembly forráskóddal az ember által szerkeszthető szövegformátum biztosításával.
WebAssembly kulcsfogalmak
A motorháztetőn belül a WebAssembly a következő lépéseket követi:
- Először egy statikusan gépelt nyelven kell kódot írnia meghatározott típusokkal.
- Ha elkészült, létrehoz egy előre lefordított WASM modult, és betáplálja a kódot a motor fordítójába.
- A fenti lépés biztosítja, hogy a WASM kihagyja az elemzést, és készen áll a kód megjelenítésére a webböngészőben.
A webböngészőben futó WebAssembly mögött meghúzódó kulcsfogalmak a következők:
- Memória: A WebAssembly memóriáját az alacsony szintű memória-hozzáférési utasítások kezelik és írják. Technikailag ez egy átméretezhető ArrayBuffer, és memóriabájtok tömbjét tartalmazza.
- Modul: A WebAssembly modulja egy lefordított futtatható számítógépes kód. Állapotmentes formájának köszönhetően a webböngésző összeállítja a modult, és megosztja a Windows és a Workers között. Ezenkívül a modul tárolja és deklarálja az importot és az exportot, a függvények, táblák, típusok, globálisok és memória elhelyezése mellett.
- Táblázat: A táblázat minden hivatkozást és függvényt tartalmaz, amelyek egy átméretezhető tömböt használnak. Ez megszünteti a nyers bájtok tárolásának szükségességét a memóriában.
- Példány: A WASM-ben egy példány egy modul futás közben, minden állapottal párosítva. Ezek az állapotok magukban foglalják a táblázatot, a memóriát és az egyéb importált értékkészleteket.
WASM kulcsfogalmak
Webfejlesztőként használhatja a JavaScript API-t modulok, táblák, példányok és táblák hívására és meghatározására. Ezenkívül JavaScriptet használ a WASM-exportok szinkron meghívására a JavaScript függvényeken belül. Ezért a JavaScript jól működik a WebAssembly-vel, mivel a WASM segítségével nagy teljesítményű alkalmazásokat írhat a webböngészőben.
WASM objektumok
A WebAssembly használatakor nyolc WASM objektumot kell nyomon követnie. Ezek az objektumok a következők:
- WebAssembly.Global – A globális objektum egy globális változó példány. A WebAssembly.Module és a JavaScript segítségével egyaránt elérhető.
- WebAssembly.Module – Itt a Module objektum az állapot nélküli WASM kódot tartalmazza. A kód előre össze van állítva.
- WebAssemly.Instance – A WebAssembly.Instance a WebAssembly.Module végrehajtható, állapottartó példánya.
- WebAssembly.Table – A Table objektum függvényhivatkozásokat tartalmaz, és JavaScript burkolóként működik.
- WebAssembly.CompileError – A CompileError objektum tartalmazza az összes hibát az érvényesítés és a dekódolás során.
- WebAssembly.RuntimeError – Itt a RuntimeError objektum felsorolja az összes futásidejű hibát.
- WebAssembly.LinkError – A LinkError objektum olyan hibákat tartalmaz, amelyek a modul példányosítása során lépnek fel.
WASM használati esetek és projektek
Azt már tudjuk, hogy a WebAssembly natív teljesítményt kínál a webböngészőben. Ahhoz azonban, hogy valóban megértse, hol használhatja, meg kell vizsgálnia a használati eseteit. Az alábbiakban felsorolunk néhány WASM használati esetet.
A WebAssemb használati esetei a böngészőn belül és kívül egyaránt kiterjednek. Például, ha böngészőben szeretné használni a WASM-et, sok mindent megtehet, többek között:
- Videó- vagy hangszerkesztés, például az ffmpegwasm projekt.
- Videojátékok a webböngészőben, például ezek a nagy teljesítményű játékok.
- Tudományos vizualizáció és szimuláció
- Platform emuláció/szimuláció, például DOSBox, MAME stb.
- Titkosítás
- Távoli asztal
- Fejlesztői szerszámok
Használati esetek
Általános szempontból a WebAssembly lenyűgöző használati esetei közé tartozik
- A gyorsabb kódírás képessége kihasználhatja a mögöttes hardver előnyeit.
- Ezenkívül kliensoldali tömörítést is végezhet, ami jobb betöltési időt és sávszélesség-megtakarítást eredményez. Tehát a kliens CPU-ját vagy mögöttes hardverét használja a tömörítéshez és a kitömörítéshez, majd használja a szerver erőforrásait.
- Ezenkívül a JavaScript használatán kívül különböző programozási nyelvekkel is írhat kódot az internetre. A Rust, C és C++ segítségével például nagy teljesítményű kódot írhat webalkalmazásai bizonyos aspektusaihoz.
Projektek
Ha a valós példákra térünk át, a következő projekteket érdemes megemlíteni.
- A Figma a WebAssembly használatával javította webalkalmazásának teljesítményét. Csökkentették a betöltési időt az alkalmazás inicializálása, a teljes terv megjelenítése és még a tervfájl letöltése során is. Amint arról korábban beszéltünk, a WebAssembly kiválóan alkalmas tömörítésre is. A Figma bevezette a WASM-et, hogy javítsa a letöltési méreteket, és jelentősen csökkentse azokat.
- Pyodide: Egy másik izgalmas WASM projekt a Pyodide projekt, amely a Mozillától jelent meg. Lehetővé teszi a tudósok számára, hogy a Python tudományos veremét WebAssembly-be fordítsák, beleértve a NumPy-t, a SciPy-t, a Scikit-learn-t stb., a böngészőbe. Átlátszó objektumkonverziót kínál Python és JavaScript között. Végül lehetővé teszi a fejlesztők számára a webes API-k használatát Python használatával.
- Brazor WebAssembly: A Brazor WebAssembly keretrendszer lehetővé teszi a fejlesztők számára, hogy egyoldalas, kliensoldali és interaktív webalkalmazásokat készítsenek .NET segítségével. Ezeket az alkalmazásokat a WebAssembly-alapú .NET futtatókörnyezetben tárolhatja a böngészőben. Fejlesztőként itt hozzáférhet a böngésző funkcióihoz a .NET kódban a WebAssembly JavaScript API-jainak segítségével.
Forrás: Figma
Más jól ismert és érdemes projektek is használják a WebAssembly-t. Ezek a Binaryen, Cheerp, Forest, Grain és mások.
Végső gondolatok
A WebAssembly nem éppen kezdőbarát. A felhasználási esetek és kulcsfogalmak tanulmányozásával azonban világosan megértheti a képességeit.
A piacon izgalmas projektek miatt ez a legjobb alkalom a WebAssembly elsajátítására, különösen, ha webfejlesztéssel foglalkozik. A WASM azon képessége, hogy a böngészőn kívül is működjön, kiváló választás a teljesítményorientált fejlesztésekhez.
Élvezettel olvasta a cikket? Mit szólnál a világgal való megosztáshoz?