Primer WebAssembly: Začíname s WebAssembly

WebAssembly sľubuje úplne nový druh webu - rýchlejší výkon pre používateľov a väčšiu flexibilitu pre vývojárov. Namiesto blokovania používania jazyka JavaScript ako jediného jazyka pre interakciu na webe s klientom si môže vývojár vybrať zo širokej škály ďalších jazykov - C, TypeScript, Rust, Ruby, Python - a pracovať v jazyku, ktorý im najviac vyhovuje s.

Jediným spôsobom, ako vytvoriť WebAssembly (alebo skrátene WASM), bolo pôvodne kompilovať kód C / C ++ do WebAssembly pomocou reťazca nástrojov Emscripten. Dnes majú vývojári nielen viac jazykových možností, ale je tiež jednoduchšie kompilovať tieto ďalšie jazyky priamo do nástroja WebAssembly s menším počtom zásahov.

V tomto článku sa pozrieme na kroky potrebné na implementáciu komponentov WebAssembly vo webovej aplikácii. Pretože WebAssembly je prebiehajúca práca, kroky veľmi závisia od toho, aký jazyk používate, a reťazec nástrojov sa bude pravdepodobne ešte nejaký čas meniť. Ale práve teraz je možné písať a nasadiť užitočné, ak je to minimálne, aplikácie WebAssembly v mnohých jazykoch.

Vyberte jazyk podporovaný WebAssembly

Prvým krokom k nasadeniu aplikácie WebAssembly je výber jazyka, ktorý je možné kompilovať do WebAssembly ako cieľ. Existuje veľká šanca, že aspoň jeden z hlavných jazykov, ktoré používate pri výrobe, je možné previesť na WebAssembly alebo mať kompilátor, ktorý dokáže WebAssembly vydávať.

Tu sú poprední kandidáti:

• C. Je zrejmé, že. Typickým spôsobom, ako zmeniť kód C na WebAssembly, je Emscripten, pretože C-to-Emscripten-to-WebAssembly bol prvým reťazcom nástrojov WebAssembly, ktorý prišiel na rad. Objavujú sa však aj ďalšie nástroje. Celý kompilátor, Cheerp, bol špeciálne navrhnutý na generovanie aplikácií WebAssembly z kódu C / C ++. Cheerp môže tiež zacieliť na JavaScript, asm.js alebo na ľubovoľnú kombináciu vyššie uvedených. Na zostavenie užitočného zaťaženia WebAssembly je tiež možné použiť reťazec nástrojov Clang, aj keď tento proces stále vyžaduje veľa ručného zdvíhania. (Tu je jeden príklad.)
• Hrdza. Jedným z hlavných kandidátov je programovací jazyk systémov Mozilla, ktorý je navrhnutý tak, aby bol bezpečný aj rýchly domorodec Podpora WebAssembly. Rozšírenia v reťazci nástrojov Rust vám umožňujú kompiláciu priamo z kódu Rust do WebAssembly. Musíte použiť Rust’s nočné reťazec nástrojov na vykonávanie kompilácie WebAssembly, takže túto funkciu je potrebné zatiaľ považovať za experimentálnu.
• Strojopis. V predvolenom nastavení sa strojopis kompiluje do JavaScriptu, čo znamená, že by sa dal zase kompilovať do WebAssembly. Projekt AssemblyScript znižuje počet použitých krokov a umožňuje kompiláciu prísne napísaného TypeScript do nástroja WebAssembly.

Na WebAssembly sa začína zameriavať niekoľko ďalších jazykov, ktoré sú však vo veľmi raných fázach. Na zostavenie komponentov WebAssembly je možné použiť nasledujúce jazyky, ale iba obmedzenejším spôsobom ako C, Rust a TypeScript:

• D. Jazyk D nedávno pridal podporu pre kompiláciu a prepojenie priamo na WebAssembly.
• Java. Bajtový kód Java je možné vopred skompilovať do programu WebAssembly prostredníctvom projektu TeaVM. To znamená akýkoľvek jazyk, ktorý vydáva bajtový kód Java, je možné kompilovať do nástroja WebAssembly - napríklad Kotlin, Scala alebo Clojure. Mnoho rozhraní Java API, ktoré nie je možné efektívne implementovať do WebAssembly, je však obmedzených, napríklad API pre reflexiu a zdroje, takže program TeaVM - a teda WebAssembly - sa dá použiť iba pre podmnožinu aplikácií založených na JVM.
• Lua. Skriptovací jazyk Lua má dlhú históriu použitia ako zabudovaný jazyk, rovnako ako JavaScript. Jediné projekty, ktoré premenia Lua na WebAssembly, však zahŕňajú použitie nástroja na vykonávanie v prehliadači: wasm_lua vloží do prehliadača runtime Lua, zatiaľ čo Luwa JIT kompiluje Lua do WebAssembly.
• Kotlin / rodený. Fanúšikovia jazyka Kotlin, spinoff Java, netrpezlivo očakávali úplné vydanie Kotlin / Native, back-end LLVM pre kompilátor Kotlin, ktorý dokáže produkovať samostatné binárne súbory. Kotlin / Native 0.4 predstavil podporu pre WebAssembly ako cieľ kompilácie, ale iba ako dôkaz koncepcie.
• .Net. Jazyky .Net zatiaľ nemajú úplnú podporu WebAssembly, niektoré experimenty sa však začali. Pozrite si Blazor, ktorý sa dá použiť na vytváranie jednostránkových webových aplikácií v .Net prostredníctvom jazyka C # a syntaxe „Razor“ od spoločnosti Microsoft.
• Nim. Tento nadchádzajúci jazyk sa kompiluje do jazyka C, takže teoreticky by sa dalo výsledné C kompilovať do WebAssembly. Vo vývoji je však experimentálny koncový server Nim s názvom nwasm.
• Ostatné jazyky využívajúce LLVM. Teoreticky je možné do WebAssembly skompilovať akýkoľvek jazyk, ktorý využíva rámec kompilátora LLVM, pretože LLVM podporuje WebAssembly ako jeden z mnohých cieľov. To však nevyhnutne neznamená, že akýkoľvek jazyk kompilovaný pomocou LLVM bude bežať tak, ako je, vo WebAssembly. Znamená to len, že LLVM uľahčuje zacielenie na WebAssembly.

Všetky vyššie uvedené projekty prevádzajú pôvodný program alebo vygenerovaný bytový kód na WebAssembly. Ale pre interpretované jazyky ako Ruby alebo Python existuje iný prístup: Namiesto prevádzania samotných aplikácií sa prevádza jazyk. beh programu do WebAssembly. Programy potom bežia tak, ako sú, v prevedenom runtime. Pretože veľa jazykových runtime (vrátane Ruby a Python) je napísaných v C / C ++, proces premeny je v zásade rovnaký ako v prípade akejkoľvek inej aplikácie v C / C ++.

To samozrejme znamená, že prevedený runtime musí byť stiahnutý do prehliadača predtým, ako s ním bude možné spustiť akékoľvek aplikácie, čo spomalí načítanie a časy analýzy. „Čistá“ verzia aplikácie WebAssembly je ľahšia. Runtime konverzia je teda v najlepšom prípade stopgapovým opatrením, kým viac jazykov nepodporuje WebAssembly ako cieľ exportu alebo kompilácie.

Integrujte WebAssembly s JavaScriptom

Ďalším krokom je napísanie kódu v jazyku, ktorý ste si vybrali, s určitou pozornosťou venovanou tomu, ako bude tento kód interagovať s prostredím WebAssembly, potom ho skompilovať do modulu WebAssembly (binárny súbor WASM) a nakoniec tento modul integrovať do existujúceho JavaScriptová aplikácia.

Presné kroky, ako exportovať kód do WebAssembly, sa budú výrazne líšiť v závislosti od reťazca nástrojov. Tiež sa trochu budú líšiť od spôsobu, akým sú pre tento jazyk vytvorené bežné natívne binárne súbory. Napríklad v Ruste budete musieť postupovať podľa niekoľkých krokov:

1. Nastaviť nočné stavať pre Rust, s wasm32-neznámy-neznámy reťazec nástrojov.
2. Napíšte svoj kód Rust pomocou externých funkcií deklarovaných ako # [no-mangle].
3. Vytvorte kód pomocou vyššie uvedeného reťazca nástrojov.

(Podrobné informácie o vyššie uvedených krokoch nájdete v knihe The Rust and WebAssembly Book na GitHub.)

Stojí za zmienku, že nech už používate akýkoľvek jazyk, musíte mať aspoň minimálnu úroveň znalostí jazyka JavaScript, aby ste mohli integrovať kód do rozhrania HTML. Ak sa vám úryvky kódu JavaScript na stránke v tomto príklade z knihy The Rust and WebAssembly Book zdajú grécke, vyhraďte si nejaký čas na to, aby ste sa naučili aspoň toľko kódu JavaScript, aby ste pochopili, čo sa tam deje.

Integrácia WebAssembly a JavaScriptu sa vykonáva pomocou WebAssembly objekt v JavaScripte, aby ste vytvorili most k svojmu kódu WebAssembly. Mozilla má dokumentáciu, ako to urobiť. Tu je samostatný príklad WebAssembly pre Rust a tu je príklad WebAssembly pre Node.js.

Práve teraz je integrácia medzi koncovým serverom WebAssembly a front-endom JavaScriptu / HTML stále najťažšou a manuálnou časťou celého procesu. Napríklad v prípade systému Rust musia byť mosty k JavaScriptu stále vytvárané manuálne pomocou ukazovateľov nespracovaných údajov.

Viaceré časti reťazca nástrojov však začínajú riešiť tento problém. Rámec Cheerp umožňuje programátorom v C ++ hovoriť s API prehliadača prostredníctvom vyhradeného priestoru mien. A Rust ponúka wasm-bindgen, ktorý slúži ako obojsmerný most medzi JavaScriptom a Rustom, a medzi JavaScriptom a WebAssembly.

Okrem toho sa zvažuje návrh na vysokej úrovni, ako zaobchádzať s väzbami na hostiteľa. Po dokončení bude poskytovať štandardný spôsob interakcie jazykov kompilovaných s WebAssembly s hostiteľmi. Dlhodobá stratégia s týmto návrhom zahŕňa aj väzby na hostiteľov, ktorí nie sú prehľadávačmi, ale väzby prehliadačov sú krátkodobým prípadom okamžitého použitia.

Ladenie a profilovanie aplikácií WebAssembly

Jednou z oblastí, kde sú nástroje WebAssembly stále v najskorších fázach, je podpora ladenia a profilovania.

Kým sa neobjavili zdrojové mapy JavaScriptu, bolo ťažké ladiť jazyky, ktoré boli skompilované do JavaScriptu, pretože pôvodný a skompilovaný kód nebolo možné ľahko korelovať. WebAssembly má niektoré rovnaké problémy: Ak napíšete kód do jazyka C a skompilujete ho do formátu WASM, je ťažké nakresliť korelácie medzi zdrojom a skompilovaným kódom.

Zdrojové mapy JavaScriptu označujú, ktoré riadky v zdrojovom kóde zodpovedajú ktorým oblastiam kompilovaného kódu. Niektoré nástroje WebAssembly, napríklad Emscripten, môžu tiež generovať zdrojové mapy JavaScriptu pre kompilovaný kód. Jedným z dlhodobých plánov pre WebAssembly je systém zdrojových máp, ktorý ide nad rámec toho, čo je k dispozícii v JavaScripte, ale stále je iba vo fáze návrhu.

Momentálne je najpriamejším spôsobom ladenia kódu WASM vo voľnej prírode použitie ladiacej konzoly webového prehliadača. V tomto článku na webe WebAssemblyCode sa dozviete, ako vygenerovať kód WASM pomocou zdrojovej mapy, sprístupniť ho ladiacim nástrojom prehliadača a podrobne preskúmať kód. Upozorňujeme, že opísané kroky závisia od použitia súboru emcc nástroj na emitovanie WASM. Možno budete musieť upraviť kroky v závislosti od konkrétneho reťazca nástrojov.