Primer za WebAssembly: Začnite z WebAssembly

WebAssembly obljublja povsem novo vrsto spleta - hitrejše delovanje za uporabnike in večjo prilagodljivost za razvijalce. Namesto da bi razvijalcu omogočil uporabo JavaScript kot edinega jezika za spletno interakcijo na strani odjemalca, lahko razvijalec izbira med široko paleto drugih jezikov - C, TypeScript, Rust, Ruby, Python - in dela v tistem, ki mu najbolj ustreza s.

Prvotno je bil edini način za ustvarjanje WebAssembly (ali krajše WASM) prevajanje kode C / C ++ v WebAssembly z orodno verigo Emscripten. Danes ne samo, da imajo razvijalci več jezikovnih možnosti, temveč je postalo te druge jezike lažje prevesti neposredno v WebAssembly, z manj vmesnimi koraki.

V tem delu bomo preučili korake, potrebne za implementacijo komponent WebAssembly v spletni aplikaciji. Ker je WebAssembly v teku, so koraki zelo odvisni od jezika, ki ga uporabljate, veriga orodij pa se bo verjetno še nekaj časa spreminjala. Trenutno pa je mogoče pisati in uvajati uporabne, če ne minimalne, programe WebAssembly v številnih jezikih.

Izberite jezik, ki ga podpira WebAssembly

Prvi korak k uvajanju aplikacije WebAssembly je izbira jezika, ki se lahko prevede v WebAssembly kot cilj. Obstaja velika verjetnost, da je vsaj enega glavnih jezikov, ki jih uporabljate v proizvodnji, mogoče pretvoriti v WebAssembly ali pa ima prevajalnik, ki lahko oddaja WebAssembly.

Tu so prednjači:

• C. Očitno. Tipičen način za pretvorbo kode C v WebAssembly je prek Emscripten, saj je bila C-to-Emscripten-to-WebAssembly prva orodna veriga WebAssembly, ki se je pojavila. Pojavljajo pa se druga orodja. Celoten prevajalnik Cheerp je bil zasnovan posebej za generiranje aplikacij WebAssembly iz kode C / C ++. Cheerp lahko cilja tudi na JavaScript, asm.js ali katero koli kombinacijo zgoraj navedenega. Prav tako je mogoče z orodno verigo Clang ustvariti koristne obremenitve WebAssembly, čeprav postopek še vedno zahteva veliko ročnega dvigovanja. (Tu je en primer.)
• Rja. Mozillin sistemski programski jezik, zasnovan tako, da je varen in hiter, je eden glavnih kandidatov za domač Podpora za WebAssembly. Razširitve v orodjarni Rust omogočajo prevajanje neposredno iz kode Rust v WebAssembly. Morate uporabiti Rustov nočno verigo orodij za izvedbo prevajanja WebAssembly, zato bi morali to funkcijo za zdaj šteti za eksperimentalno.
• TypeScript. Privzeto se TypeScript prevede v JavaScript, kar pomeni, da bi ga lahko nato prevedeli v WebAssembly. Projekt AssemblyScript zmanjša število vključenih korakov, kar omogoča, da se strogo vtipkani TypeScript prevede v WebAssembly.

Številni drugi jeziki začenjajo ciljati na WebAssembly, vendar so v zelo zgodnji fazi. Naslednje jezike je mogoče uporabiti za izdelavo komponent WebAssembly, vendar le na bolj omejene načine kot C, Rust in TypeScript:

• D. Jezik D je pred kratkim dodal podporo za prevajanje in povezovanje neposredno na WebAssembly.
• Java. Javno bajtno kodo je mogoče predčasno sestaviti v WebAssembly s pomočjo projekta TeaVM. To pomeni kaj jezik, ki oddaja bajtno kodo Java, je mogoče prevesti v WebAssembly - na primer Kotlin, Scala ali Clojure. Vendar je veliko API-jev Java, ki jih ni mogoče učinkovito implementirati v WebAssembly, omejeno, na primer API-ji odsevov in virov, zato je TeaVM - in s tem WebAssembly - uporaben samo za podskupino aplikacij, ki temeljijo na JVM.
• Lua. Skriptni jezik Lua ima dolgo zgodovino uporabe kot vdelani jezik, tako kot JavaScript. Vendar pa edini projekti, s katerimi lahko Lua spremenimo v WebAssembly, vključujejo uporabo mehanizma za izvajanje v brskalniku: wasm_lua vdela brskalnik Lua v brskalnik, medtem ko Luwa JIT Lua prevede v WebAssembly.
• Kotlin / Native. Ljubitelji jezika Kotlin, delitve Java, so nestrpno pričakovali popolno izdajo Kotlin / Native, LLVM zaledja prevajalnika Kotlin, ki lahko ustvari samostojne binarne datoteke. Kotlin / Native 0.4 je uvedel podporo za WebAssembly kot cilj prevajanja, vendar le kot dokaz koncepta.
• .Mreža. Jeziki .Net še nimajo popolne podpore WebAssembly, vendar so se nekateri poskusi že začeli. Glejte Blazor, ki ga lahko uporabite za izdelavo spletnih strani z eno stranjo v .Netu prek C # in Microsoftove sintakse "Razor".
• Nim. Ta prihajajoči jezik se prevede v C, zato bi teoretično lahko nastali C prevedeli v WebAssembly. Vendar se eksperimentalni zaledni del za Nim, imenovan nwasm, razvija.
• Drugi jeziki, ki jih poganja LLVM. V teoriji je mogoče kateri koli jezik, ki uporablja ogrodje prevajalnika LLVM, prevesti v WebAssembly, saj LLVM podpira WebAssembly kot enega od mnogih ciljev. Vendar to ne pomeni nujno, da se bo kateri koli jezik, ki ga prevaja LLVM, v WebAssembly deloval takšen, kot je. To samo pomeni, da LLVM olajša ciljanje na WebAssembly.

Vsi zgornji projekti pretvorijo izvirni program ali generirano bajtno kodo v WebAssembly. Toda za tolmačene jezike, kot sta Ruby ali Python, obstaja še en pristop: namesto da sami pretvorimo aplikacije, pretvorimo jezik čas izvajanja v WebAssembly. Programi se nato v pretvorjenem času izvajajo takšni, kakršni so. Ker so številni jezikovni programi (vključno z Rubyjem in Pythonom) napisani v jeziku C / C ++, je postopek pretvorbe v bistvu enak kot pri kateri koli drugi aplikaciji C / C ++.

Seveda to pomeni, da je treba pretvorjeno izvajalno okolje prenesti v brskalnik, preden lahko z njim zaženete katero koli aplikacijo, kar upočasni nalaganje in čas razčlenjevanja. "Čista" različica aplikacije WebAssembly je bolj lahka. Tako je pretvorba med izvajanjem v najboljšem primeru ukrep za zaustavitev, dokler več jezikov ne podpira WebAssembly kot cilja izvoza ali prevajanja.

Integrirajte WebAssembly z JavaScriptom

Naslednji korak je pisanje kode v jeziku, ki ste ga izbrali, z nekaj pozornosti, kako bo ta koda delovala z okoljem WebAssembly, nato jo zbrati v modul WebAssembly (binarni sistem WASM) in na koncu integrirati ta modul z obstoječim Aplikacija JavaScript.

Natančni koraki za izvoz kode v WebAssembly se bodo zelo razlikovali, odvisno od orodjarne. Prav tako se bodo nekoliko oddaljili od načina, kako so za ta jezik zgrajeni običajni domači binarni programi. V Rustu boste na primer morali slediti več korakom:

1. Nastavite nočno graditi za Rust, z wasm32-neznano-neznano veriga orodij.
2. Zapiši svojo kodo Rust z zunanjimi funkcijami, razglašenimi kot # [brez mangle].
3. Zgradite kodo z uporabo zgornje orodjarne.

(Za podroben pregled zgornjih korakov glejte The Rust and WebAssembly Book na GitHub.)

Omeniti velja, da ne glede na jezik, ki ga uporabljate, za integracijo kode s čelnim delom HTML morate imeti vsaj minimalno raven znanja JavaScripta. Če se vam delni odseki JavaScript v tem primeru iz knjige Rust in WebAssembly zdijo grški, si vzemite nekaj časa za učenje vsaj toliko JavaScript, da boste razumeli, kaj se tam dogaja.

Integracija WebAssembly in JavaScript se izvede z uporabo Sestavljanje spletnih strani objekt v JavaScript, da ustvarite most do vaše kode WebAssembly. Mozilla ima dokumentacijo o tem. Tu je ločen primer WebAssembly za Rust, in tukaj je primer WebAssembly za Node.js.

Trenutno je integracija med zaledjem WebAssembly in vmesnikom JavaScript / HTML še vedno najbolj okoren in ročen del celotnega postopka. Na primer, pri Rustu je treba mostove v JavaScript še vedno ustvarjati ročno s kazalci surovih podatkov.

Vendar se več kosov orodne verige začenja ukvarjati s to težavo. Okvir Cheerp omogoča programerjem C ++, da se prek namenskega imenskega prostora pogovarjajo z API-ji brskalnika. In Rust ponuja wasm-bindgen, ki služi kot dvosmerni most med JavaScriptom in Rustom ter med JavaScriptom in WebAssembly.

Poleg tega je v obravnavi predlog na visoki ravni, kako ravnati z vezmi na gostitelja. Ko bo dokončan, bo zagotovil standardni način za interakcijo jezikov, ki se prevedejo v WebAssembly, z gostitelji. Dolgoročna strategija s tem predlogom vključuje tudi vezave na gostitelje, ki niso brskalniki, vendar so vezave brskalnikov kratkoročni primer takojšnje uporabe.

Odpravljanje napak in profiliranje aplikacij WebAssembly

Področje, kjer je orodje WebAssembly še v najzgodnejših fazah, je podpora za odpravljanje napak in profiliranje.

Dokler niso prišli izvorni zemljevidi JavaScript, je bilo pogosto težko odpraviti napake v jezikih, ki so bili prevedeni v JavaScript, ker izvirne in prevedene kode ni bilo mogoče enostavno povezati. WebAssembly ima nekaj istih težav: če napišete kodo v jeziku C in jo prevedete v WASM, je težko potegniti korelacije med izvorno in prevedeno kodo.

Izvorni zemljevidi JavaScript kažejo, katere vrstice v izvorni kodi ustrezajo katerim regijam prevedene kode. Nekatera orodja WebAssembly, na primer Emscripten, lahko oddajo tudi izvorne zemljevide JavaScript za prevedeno kodo. Eden od dolgoročnih načrtov za WebAssembly je sistem izvornih zemljevidov, ki presega le to, kar je na voljo v JavaScript, vendar je še vedno v fazi predloga.

Trenutno je najbolj neposreden način za odpravljanje napak kode WASM v naravi z uporabo konzole za odpravljanje napak spletnega brskalnika. Ta članek na spletnem mestu WebAssemblyCode prikazuje, kako ustvariti kodo WASM z izvornim zemljevidom, jo ​​dati na voljo orodjem za odpravljanje napak brskalnika in prehoditi skozi kodo. Upoštevajte, da so opisani koraki odvisni od uporabe emcc orodje za oddajanje WASM. Morda boste morali spremeniti korake, odvisno od vaše posebne verige orodij.