WebAssembly-alusta: Aloita WebAssembly-sovelluksen käyttö

WebAssembly lupaa aivan uudenlaisen verkon - nopeamman suorituskyvyn käyttäjille ja enemmän joustavuutta kehittäjille. Sen sijaan, että kehittäjä olisi lukittu käyttämään JavaScriptiä ainoana kielenä asiakaspuolen verkkoyhteydessä, kehittäjä voi valita laajan joukon muita kieliä - C, TypeScript, Rust, Ruby, Python - ja työskennellä mukavimmalla kielellä. kanssa.

Alun perin ainoa tapa luoda WebAssembly (tai lyhyt WASM) oli koota C / C ++ -koodi WebAssembleyn käyttämällä Emscripten-työkaluketjua. Nykyään kehittäjillä ei ole pelkästään enemmän kielivaihtoehtoja, vaan näiden muiden kielten kääntäminen suoraan WebAssembly-palveluun on tullut helpommaksi ilman vähemmän välivaiheita.

Tässä kappaleessa tarkastelemme vaiheita, joita tarvitaan WebAssembly-komponenttien toteuttamiseksi verkkosovelluksessa. Koska WebAssembly on keskeneräinen työ, vaiheet riippuvat suuresti käyttämästäsi kielestä, ja työkaluketju todennäköisesti muuttuu jonkin aikaa. Mutta tällä hetkellä on mahdollista kirjoittaa ja ottaa käyttöön hyödyllisiä, jos vain vähäisiä, WebAssembly-sovelluksia useilla kielillä.

Valitse WebAssembly-tuettu kieli

Ensimmäinen askel kohti WebAssembly-sovelluksen käyttöönottoa on valita kieli, joka voidaan kääntää WebAssembly-sovellukseen. On hyvät mahdollisuudet, että ainakin yksi tuotannossa käyttämistäsi suurimmista kielistä voidaan muuntaa WebAssemblyksi tai että sillä on kääntäjä, joka voi lähettää WebAssembly-sovelluksen.

Tässä ovat juoksijat:

• C. Ilmeisesti. Tyypillinen tapa muuttaa C-koodi WebAssemblyksi on Emscripten, koska C-to-Emscripten-to-WebAssembly oli ensimmäinen WebAssembly-työkaluketju. Mutta muita työkaluja on tulossa. Koko kääntäjä, Cheerp, on suunniteltu erityisesti luomaan WebAssembly-sovelluksia C / C ++ -koodista. Cheerp voi kohdistaa myös JavaScriptiin, asm.js: ään tai mihin tahansa yllä olevien yhdistelmään. Clang-työkaluketjulla voidaan myös rakentaa WebAssembly-hyötykuormia, vaikka prosessi vaatii silti paljon manuaalista nostoa. (Tässä on yksi esimerkki.)
• Ruoste. Mozillan järjestelmien ohjelmointikieli, joka on suunniteltu sekä turvalliseksi että nopeaksi, on yksi tärkeimmistä ehdokkaista syntyperäinen WebAss Assembly -tuki. Rust-työkaluketjun laajennusten avulla voit kääntää suoraan Rust-koodista WebAssembly: een. Sinun on käytettävä Rust'sia iltaisin työkaluketju WebAssembly-kääntämisen suorittamiseen, joten tätä ominaisuutta tulisi pitää toistaiseksi kokeellisena.
• TypeScript. TypeScript kääntyy oletusarvoisesti JavaScriptiä varten, mikä tarkoittaa, että se puolestaan ​​voidaan kääntää WebAssembly: ksi. AssemblyScript-projekti vähentää tarvittavien vaiheiden määrää, jolloin tiukasti kirjoitettu TypeScript voidaan kääntää WebAssembly-palveluun.

Useat muut kielet ovat alkaneet kohdistaa WebAssemble -palveluun, mutta ne ovat vasta alkuvaiheessa. Seuraavia kieliä voidaan käyttää WebAssembly-komponenttien rakentamiseen, mutta vain rajoitetummin kuin C, Rust ja TypeScript:

• D.. D-kieli lisäsi äskettäin tukea kääntämiseen ja linkittämiseen suoraan WebAssembly-sivustoon.
• Java. Java-tavukoodi voidaan koota etukäteen WebAssemblylle TeaVM-projektin kautta. Tämä tarkoittaa minkä tahansa kieli, joka lähettää Java-tavukoodin, voidaan kääntää WebAssembleen - esimerkiksi Kotlin, Scala tai Clojure. Monet Java-sovellusliittymät, joita ei voida toteuttaa tehokkaasti WebAssemble-sovelluksessa, ovat kuitenkin rajoitettuja, kuten heijastus- ja resurssi-sovellusliittymät, joten TeaVM - ja siten WebAssembly - on hyödyllinen vain JVM-pohjaisten sovellusten osajoukolle.
• Lua. Lua-komentosarjakielellä on pitkä historia käyttö sulautettuna kielenä, aivan kuten JavaScript. Ainoat projektit, joiden avulla Lua muutetaan WebAssemblyiksi, edellyttävät selaimen sisäisen suoritusmoottorin käyttöä: wasm_lua upottaa Lua-ajonaikaisuuden selaimeen, kun taas Luwa JIT-kääntää Luan WebAss Assembly -palveluun.
• Kotlin / syntyperäinen. Kotlin-kielen, Java-spinoffin, fanit ovat odottaneet innokkaasti Kotlin / Native -tuotteen täydellistä julkaisua, joka on LLVM-takapää Kotlin-kääntäjälle, joka voi tuottaa erillisiä binäärejä. Kotlin / Native 0.4 esitteli WebAssembly-tuen kokoamiskohteena, mutta vain todisteena konseptista.
• .Netto. .Net-kielillä ei ole vielä täydellistä WebAssembly-tukea, mutta jotkut kokeilut ovat alkaneet. Katso Blazor, jota voidaan käyttää yhden sivun verkkosovellusten rakentamiseen .Netissä C #: n ja Microsoftin Razor-syntaksin kautta.
• Nim. Tämä tuleva kieli kääntyy C: ksi, joten teoriassa voisi kääntää tuloksena olevan C: n WebAssembly: ksi. Nimille on kuitenkin kehitteillä kokeellista taustaa nimeltä nwasm.
• Muut LLVM-pohjaiset kielet. Teoriassa mikä tahansa kieli, joka hyödyntää LLVM-kääntäjän kehystä, voidaan kääntää WebAssembly-palveluun, koska LLVM tukee WebAssembly-ohjelmaa yhtenä monista kohteista. Tämä ei kuitenkaan välttämättä tarkoita, että mikä tahansa LLVM: n kääntämä kieli toimii sellaisenaan WebAssembly-ohjelmassa. Se tarkoittaa vain, että LLVM helpottaa WebAss kokoonpanon kohdistamista.

Kaikki yllä mainitut projektit muuntavat alkuperäisen ohjelman tai generoidun tavukoodin WebAssemblyksi. Mutta tulkatuille kielille, kuten Ruby tai Python, on olemassa toinen lähestymistapa: Itse sovellusten muuntamisen sijaan kieli muunnetaan ajonaikainen WebAss kokoonpanoon. Tämän jälkeen ohjelmat toimivat sellaisenaan muunnetulla ajonaikalla. Koska monet kielen ajonajat (mukaan lukien Ruby ja Python) kirjoitetaan C / C ++: lla, muunnosprosessi on pohjimmiltaan sama kuin minkä tahansa muun C / C ++ -sovelluksen kanssa.

Tietysti tämä tarkoittaa, että muunnettu ajonaika on ladattava selaimeen, ennen kuin mitään sovelluksia voidaan käyttää sen kanssa, mikä hidastaa latausta ja jäsentelyaikoja. Sovelluksen "puhdas" WebAssembly-versio on kevyempi. Siten ajonaikainen muuntaminen on parhaimmillaan pysäytysväli, kunnes useat kielet tukevat WebAssemblya viennin tai kokoamisen kohteena.

Integroi WebAssembly JavaScriptin kanssa

Seuraava vaihe on kirjoittaa koodi valitsemallasi kielellä kiinnittäen huomiota siihen, miten koodi toimii vuorovaikutuksessa WebAssembly-ympäristön kanssa, sitten koota se WebAssembly-moduuliksi (WASM-binaari) ja integroida lopuksi moduuli olemassa olevaan JavaScript-sovellus.

Tarkat vaiheet koodin viemiseksi WebAssembly-ohjelmaan vaihtelevat valtavasti työkaluketjusta riippuen. Ne poikkeavat myös jonkin verran tavasta, jolla tavalliset alkuperäiset binaariset tiedostot rakennetaan kyseiselle kielelle. Esimerkiksi Rustissa sinun on noudatettava useita vaiheita:

1. Määritä iltaisin rakentaa Rust, kanssa wasm32-tuntematon-tuntematon työkaluketju.
2. Kirjoita Rust-koodisi ulkoisilla toiminnoilla, jotka on ilmoitettu nimellä # [ei-mangle].
3. Rakenna koodi yllä olevalla työkaluketjulla.

(Yksityiskohtainen luettelo yllä olevista vaiheista, katso The Rust and WebAssembly Book on GitHub.)

On syytä huomata, että riippumatta siitä, mitä kieltä käytät, sinulla on oltava vähintään vähäinen Java-taitotaso koodin integroimiseksi HTML-käyttöliittymään. Jos tämän esimerkin The Rust ja WebAssembly Book -sivun sisäiset JavaScript-katkelmat näyttävät sinulle kreikkalaisilta, varaa aikaa opiskelemaan ainakin tarpeeksi JavaScriptiä ymmärtämään, mitä siellä tapahtuu.

WebAssembly ja JavaScript integroidaan käyttämällä WebAss kokoonpano luo silta WebAssembly-koodiin. Mozillalla on ohjeet tämän tekemiseen. Tässä on erillinen WebAssembly-esimerkki Rustille ja tässä on WebAssembly-esimerkki Node.js: lle.

Tällä hetkellä WebAssembly-käyttöjärjestelmän ja JavaScript / HTML-käyttöliittymän välinen integraatio on edelleen koko prosessin raskain ja manuaalisin osa. Esimerkiksi Rustin kanssa sillat JavaScriptiin on silti luotava manuaalisesti raakadataosoittimien avulla.

Useampi työkaluketjun kappale alkaa kuitenkin käsitellä tätä ongelmaa. Cheerp-kehys antaa C ++ - ohjelmoijille mahdollisuuden puhua selaimen sovellusliittymien kanssa omistetun nimiavaruuden kautta. Ja Rust tarjoaa wasm-bindgenin, joka toimii kaksisuuntaisena sillana JavaScriptin ja Rustin sekä JavaScriptin ja WebAssemblyn välillä.

Lisäksi harkitaan korkean tason ehdotusta isännän sidosten käsittelemiseksi. Valmistuttuaan se tarjoaa standardin tavan WebAssembleyn kääntyville kielille olla vuorovaikutuksessa isäntien kanssa. Tämän ehdotuksen pitkän aikavälin strategia kattaa myös siteet isännöille, jotka eivät ole selaimia, mutta selainten sidonnat ovat lyhytaikaista, välittömää käyttöä.

WebAssembly-sovellusten virheenkorjaus ja profilointi

Yksi alue, jolla WebAssembly-työkalut ovat vielä varhaisimmissa vaiheissa, on tuki virheenkorjaukselle ja profiloinnille.

Kunnes JavaScript-lähdekartat tulivat, JavaScriptiin käännettyjä kieliä oli usein vaikea korjata, koska alkuperäistä ja käännettyä koodia ei voitu yhdistää helposti. WebAssemblylla on joitain samoja ongelmia: Jos kirjoitat koodin C: hen ja käännät sen WASM: ksi, lähdekoodin ja käännetyn koodin välillä on vaikea piirtää korrelaatioita.

JavaScript-lähdekartat osoittavat, mitkä lähdekoodin rivit vastaavat käännetyn koodin alueita. Jotkut WebAssembly-työkalut, kuten Emscripten, voivat myös lähettää JavaScript-lähdekarttoja käännetylle koodille. Yksi WebAssemblyn pitkän aikavälin suunnitelmista on lähdekarttajärjestelmä, joka ylittää vain JavaScriptiin käytettävissä olevan, mutta se on kuitenkin vasta ehdotusvaiheessa.

Tällä hetkellä suorin tapa selvittää WASM-koodi luonnossa on selaimen virhekonsoli. Tässä WebAssemblyCode-artikkelissa kerrotaan, miten WASM-koodi luodaan lähdekartalla, tehdään se selaimen virheenkorjaustyökalujen saataville ja selataan koodin läpi. Huomaa, että kuvatut vaiheet riippuvat emcc työkalu WASM: n lähettämiseen. Saatat joutua muokkaamaan vaiheita työkaluketjustasi riippuen.