Mikä on WebAssembly? Selaimen natiivinopeus

01Mikä on WebAssembly?

WebAssembly on toinen suoritusmuoto, jonka verkkoselaimet ymmärtävät JavaScriptin lisäksi. W3C on standardoinut sen, ja se toimii sisäänrakennettuna kaikissa suurissa selaimissa, kuten Chromessa, Firefoxissa, Safarissa ja Edgessä; käyttäjän ei tarvitse asentaa mitään.

Assembly-sana nimessä voi johtaa harhaan: Wasmia ei yleensä kirjoiteta käsin. Kirjoitat koodin tutulla kielellä ja muunnat sen sitten kääntäjällä .wasm-tiedostoksi. Selain lataa tämän pienen ja kompaktin tiedoston nopeasti, tarkistaa sen ja kääntää sen konekoodiksi ajettavaksi.

Lyhyesti sanottuna yksinkertaisin vastaus kysymykseen mikä Wasm on on tämä: siirrettävä ja turvallinen käännöskohde, joka tuo työpöytäsovelluksen suorituskyvyn selaimeen.

02Miten WebAssembly toimii?

JavaScript tulee tekstinä; selain jäsentää sen, tulkitsee sen ja optimoi sen ajon aikana. WebAssembly tulee sen sijaan valmiiksi käännettynä. Koska tyypit ovat tiedossa ja rakenne on tiukka, selain voi ajaa sitä paljon vähemmällä arvailulla ja ennustettavalla nopeudella.

1. Kehittäjä kirjoittaa koodin esimerkiksi C++-, Rust-, Go- tai C#-kielellä.
2. Kääntäjän työkaluketju muuntaa koodin .wasm-moduuliksi.
3. Verkkosivu lataa ja käynnistää moduulin JavaScriptin kautta.
4. JavaScript kutsuu Wasm-funktioita ja välittää tulokset käyttöliittymään.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/hesap.wasm')
);

console.log(instance.exports.topla(2, 3)); // 5

03Wasmin ja JavaScriptin ero

Wasmin ja JavaScriptin eroa ymmärretään usein väärin. WebAssembly ei ole suunniteltu tappamaan JavaScriptiä vaan auttamaan sitä aloilla, joilla se ahtaalla. Käyttöliittymä, tapahtumien käsittely ja sivun vuorovaikutus ovat edelleen JavaScriptin tehtäviä.

Wasmin varsinainen hyöty näkyy raskaassa laskennassa. Se ei kuitenkaan ole nopeampi joka tehtävässä: tiedon siirtäminen usein JavaScriptin ja Wasmin välillä aiheuttaa lisäkustannuksen. Pienissä tehtävissä tämä kustannus voi syödä hyödyn.

04WebAssemblyn käyttökohteet

WebAssemblyn käyttökohteet laajenevat vuosi vuodelta. Yhteistä on se, että selaimessa aiemmin mahdottomia tai liian hitaita tehtäviä voi nyt tehdä ilman asennusta.

Suunnittelu- ja mediatyökalut

Selaimessa toimivat ammattimaiset suunnitteluohjelmat, kuvankäsittelyohjelmat ja videomuuntimet ajavat raskaat prosessointiytimensä Wasmilla. Esimerkiksi videon pakkaaminen suoraan selaimessa ilman palvelimelle lataamista on nyt mahdollista.

Pelit, 3D ja simulaatiot

Pelimoottorit voivat kääntää tulosteensa Wasmiksi. Yhdessä uuden grafiikkarajapinnan kanssa, josta kerroimme artikkelissamme mikä on WebGPU, selaimeen voidaan rakentaa konsolimaisia kokemuksia.

Yrityssovellukset ja data

Selaimessa toimivat tietokannat, PDF-käsittely, salaus, CAD-katselimet ja monimutkaiset laskentamoottorit hyödyntävät Wasmia. Nykyistä työpöytäkoodia voi siirtää verkkoon kirjoittamatta sitä uudelleen, mikä tarkoittaa vuosia kehitettyjen kirjastojen säilymistä.

Käyttö selaimen ulkopuolella

WASI-rajapinnan ansiosta Wasm voi toimia myös palvelimella, reunalaskennassa ja liitännäisjärjestelmissä. Kevyt ja eristetty rakenne tekee siitä houkuttelevan vaihtoehdon liitännäisten turvalliseen ajamiseen.

05Millä kielillä Wasm-koodia kirjoitetaan?

Wasmiksi käännettäviä kieliä on paljon, mutta niiden kypsyystaso vaihtelee. Yleisimmät valinnat ovat C/C++ ja Rust. Rust erottuu muistiturvallisuutensa ja työkalutukensa ansiosta; lisätietoja löydät artikkelistamme mikä on Rust.

• C ja C++: kypsä ja laaja tuki Emscripten-työkaluketjun kautta.
• Rust: sujuva silta JavaScriptiin wasm-packin ja wasm-bindgenin avulla.
• Go: Wasm-tuloste virallisella kääntäjällä; tulosteen koko on suhteellisen suuri.
• C# / .NET: .NET-sovellukset selaimessa Blazorin avulla.
• AssemblyScript: niille, jotka haluavat kirjoittaa Wasmia TypeScriptin kaltaisella syntaksilla.

cargo install wasm-pack
wasm-pack build --target web

06Suorituskyky: missä todellinen hyöty on?

Wasmin lisääminen verkkosivustolle ei nopeuta sivua automaattisesti. Yrityssivustolla tai verkkokaupan teknisellä alustalla toimivassa kaupassa hitauden todelliset syyt ovat yleensä suuret kuvat, tarpeettomat skriptit ja palvelimen vasteaika. Nämä ongelmat ratkaistaan nopeus- ja suorituskykyoptimoinnilla, ei Wasmilla.

Wasm loistaa sovelluksissa, jotka vaativat korkeaa suorituskykyä selaimessa: laskenta, joka tekee miljoonia operaatioita sekunnissa, kuvasuodattimet, pakkaus ja simulaatio. Näissä tehtävissä hyöty voi olla merkittävä, mutta päätöstä ei pidä tehdä mittaamatta.

07Rajat ja huomioitavaa

WebAssembly on tehokas työkalu, mutta ei sovi jokaiseen projektiin. Päätöksessä pitää huomioida myös tiimin osaaminen, virheenjäljityksen helppous ja ylläpitokustannukset.

• Virheenjäljitys on vaivalloisempaa kuin JavaScriptillä; lähdekartat eivät aina ole moitteettomia.
• Suuren datamäärän siirtäminen JavaScriptin ja Wasmin välillä voi heikentää suorituskykyä.
• Moduulin koko voi kasvaa käytetyn kielen ja kirjastojen mukaan.
• Tiimissä pitää olla kehittäjä, joka hallitsee käännettävät kielet.
• Käännetyt moduulit pitää myös testata; artikkelimme mikä on ohjelmistotestaus lähestymistavat pätevät tässäkin.

08Ennen kuin lisäät projektiin Wasmin

Ennen kuin päätät WebAssemblyn käytöstä, ongelma pitää määritellä oikein. Hitauden tunne johtuu usein verkkopyynnöistä, suurista paketeista tai tarpeettomista uudelleenpiirroista, ei laskennasta. Tällöin Wasmin lisääminen kasvattaa monimutkaisuutta mutta ei ratkaise ongelmaa.

Oikea lähestymistapa on löytää pullonkaula ensin selaimen suorituskykytyökaluilla ja siirtää sitten vain kyseinen osa Wasmiin. Sovelluksen muu osa voi pysyä JavaScriptinä tai TypeScriptinä, jolloin tiimi jatkaa tutuilla työkaluilla.

1. Tunnista pullonkaula profilointityökaluilla mittaamalla.
2. Pidä siirrettävän osan syötteet ja tulosteet pieninä ja selkeinä.
3. Säilytä saman tehtävän JavaScript-versio vertailua varten.
4. Hae moduuli vasta tarvittaessa laiskalatauksella.
5. Testaa vanhoilla laitteilla ja mobiilissa oikeissa käyttöolosuhteissa.

09WebAssemblyn tulevaisuus

Standardi kypsyy vuosi vuodelta lisäyksin, kuten säikeet (threads), SIMD-käskyt ja roskienkeruun tuki. Roskienkeruun tuki avasi tien myös Javan, Kotlinin ja Dartin kaltaisten kielten tehokkaammalle kääntämiselle Wasmiksi.

Lähitulevaisuudessa verkkosovelluksen ja työpöytäsovelluksen välinen raja ohenee entisestään. Yrityksille se tarkoittaa, että asennusta vaatimattomat mutta tehokkaat yrityssovellukset ovat mahdollisia. Tällaisen sovelluksen käyttöliittymä on vähintään yhtä tärkeä kuin sen moottori; UI/UX-suunnittelu määrittää tässä käyttökokemuksen.