WebAssembly primer: sāciet darbu ar WebAssembly

Tīmekļa asambleja sola pilnīgi jaunu tīmekļa veidu - ātrāku veiktspēju lietotājiem un lielāku elastību izstrādātājiem. Tā vietā, lai klients izmantotu JavaScript kā vienīgo valodu klienta puses tīmekļa mijiedarbībai, izstrādātājs var izvēlēties no daudzām citām valodām - C, TypeScript, Rust, Ruby, Python - un strādāt tajā, kas viņiem ir visērtākais. ar.

Sākotnēji vienīgais veids, kā izveidot WebAssembly (jeb saīsināti WASM), bija C / C ++ koda apkopošana WebAssembly, izmantojot Emscripten rīku ķēdi. Mūsdienās izstrādātājiem ir ne tikai vairāk valodu iespēju, bet ir kļuvis vieglāk apkopot šīs citas valodas tieši WebAssemble, mazāk iejaucoties darbībām.

Šajā rakstā mēs pārbaudīsim darbības, kas nepieciešamas WebAssembly sastāvdaļu ieviešanai tīmekļa lietotnē. Tā kā WebAssembly ir nepabeigts darbs, darbības ir ļoti atkarīgas no tā, kuru valodu lietojat, un, iespējams, rīku ķēde kādu laiku turpinās mainīties. Bet šobrīd ir iespējams rakstīt un izvietot noderīgas WebAssembly lietojumprogrammas, ja tādas ir minimālas, vairākās valodās.

Izvēlieties WebAssembly atbalstīto valodu

Pirmais solis ceļā uz WebAssembly lietojumprogrammas ieviešanu ir izvēlēties valodu, kuru kā mērķi var apkopot WebAssembly. Pastāv lielas izredzes, ka vismaz vienu no galvenajām valodām, kuras izmantojat ražošanā, var pārveidot par WebAssembly vai tai ir kompilators, kas var izstarot WebAssembly.

Šeit ir pirmie skrējēji:

• C. Skaidrs. Tipisks veids, kā C kodu pārvērst WebAssembly, ir Emscripten, jo C-to-Emscripten-to-WebAssembly bija pirmais WebAssemble rīku ķēde. Bet parādās citi rīki. Viss kompilators Cheerp ir īpaši izstrādāts, lai ģenerētu WebAssemble lietojumprogrammas no C / C ++ koda. Cheerp var atlasīt arī JavaScript, asm.js vai jebkuru iepriekš minēto kombināciju. Ir iespējams arī izmantot Clang rīku ķēdi, lai izveidotu WebAssembly lietderīgās kravas, lai gan process joprojām prasa daudz manuālas pacelšanas. (Šeit ir viens piemērs.)
• Rūsas. Mozilla sistēmu programmēšanas valoda, kas paredzēta gan drošai, gan ātrai, ir viena no galvenajām kandidātvalstīm dzimtā Tīmekļa asamblejas atbalsts. Rust rīku ķēdes paplašinājumi ļauj apkopot tieši no Rust koda līdz WebAssembly. Jums jāizmanto Rust’s katru nakti rīku ķēde WebAssemble kompilācijas veikšanai, tāpēc šī funkcija pagaidām jāuzskata par eksperimentālu.
• TypeScript. Pēc noklusējuma TypeScript kompilē uz JavaScript, kas nozīmē, ka to savukārt var apkopot WebAssembly. AssemblyScript projekts samazina iesaistīto darbību skaitu, ļaujot WebAssembly apkopot stingri ierakstītus TypeScript.

Tīmekļa asamblejā mērķauditoriju sāk atlasīt vairākas citas valodas, taču tās ir ļoti agrīnā stadijā. Šādas valodas var izmantot, lai izveidotu WebAssembly komponentus, taču tikai ierobežotākos veidos nekā C, Rust un TypeScript:

• D. D valoda nesen pievienoja atbalstu apkopošanai un saitēm tieši ar WebAssembly.
• Java. Java baitkodu var pirms laika apkopot WebAssembly, izmantojot TeaVM projektu. Tas nozīmē jebkurš valodu, kas izstaro Java baitkodu, var apkopot WebAssembly, piemēram, Kotlin, Scala vai Clojure. Tomēr daudzas Java API, kuras nevar efektīvi ieviest WebAssemble, ir ierobežotas, piemēram, atspoguļojums un resursu API, tāpēc TeaVM - tātad arī WebAssemble - ir noderīga tikai JVM balstītu lietotņu apakškopai.
• Lua. Lua skriptu valodai ir ilga vēsture kā iegultai valodai, tāpat kā JavaScript. Tomēr vienīgie projekti, ar kuriem Lua tiek pārvērsts par WebAssembly, ietver pārlūkprogrammas izpildes dzinēja izmantošanu: wasm_lua pārlūkprogrammā iestrādā Lua izpildlaiku, savukārt Luwa JIT apkopo Lua WebAssembly.
• Kotlins / Dzimtā. Kotlin valodas, Java spinoff, fani ar nepacietību gaida pilnīgu Kotlin / Native, LLVM aizmugures, Kotlin kompilatora, kas var izveidot atsevišķus bināros failus, izlaišanu. Kotlin / Native 0.4 ieviesa WebAssembly atbalstu kā kompilācijas mērķi, bet tikai kā koncepcijas pierādījumu.
• .Tīkls. .Net valodām vēl nav pilnvērtīga WebAssemble atbalsta, taču daži eksperimenti ir sākti. Skatiet Blazor, kuru var izmantot, lai izveidotu vienas lapas tīmekļa lietotnes .Net, izmantojot C # un Microsoft sintaksi “Razor”.
• Nim. Šī topošā valoda apkopo C, tāpēc teorētiski varētu apkopot iegūto C WebAssembly. Tomēr tiek izstrādāta Nim eksperimentālā aizmugure, ko sauc par nwasm.
• Citas ar LLVM darbināmas valodas. Teorētiski jebkuru valodu, kas izmanto LLVM kompilatora ietvaru, var apkopot WebAssembly, jo LLVM atbalsta WebAssembly kā vienu no daudzajiem mērķiem. Tomēr tas nebūt nenozīmē, ka jebkura LLVM sastādītā valoda darbosies tāpat kā WebAssembly. Tas tikai nozīmē, ka LLVM atvieglo mērķauditorijas atlasi WebAssemble.

Visi iepriekš minētie projekti pārveido sākotnējo programmu vai ģenerēto baitkodu WebAssembly. Tulkotajām valodām, piemēram, Ruby vai Python, ir vēl viena pieeja: tā vietā, lai pārveidotu pašas lietotnes, valoda tiek pārveidota izpildlaiks WebAssembly. Pēc tam programmas pārvērstajā izpildlaikā darbojas kā ir. Tā kā daudzi valodas izpildlaiki (ieskaitot Ruby un Python) ir rakstīti C / C ++, pārveidošanas process būtībā ir tāds pats kā jebkurai citai C / C ++ lietojumprogrammai.

Protams, tas nozīmē, ka konvertētais izpildlaiks ir jāielādē pārlūkprogrammā, pirms ar to var palaist jebkuras lietojumprogrammas, palēninot ielādes un parsēšanas laiku. Lietotnes “tīrā” WebAssembly versija ir vieglāka. Tādējādi izpildlaika pārveidošana labākajā gadījumā ir pārtraukuma pasākums, līdz WebAssembly kā eksportēšanas vai kompilēšanas mērķis atbalsta vairāk valodu.

Integrēt WebAssembly ar JavaScript

Nākamais solis ir rakstīt kodu izvēlētajā valodā, pievēršot īpašu uzmanību tam, kā šis kods mijiedarbosies ar WebAssembly vidi, pēc tam apkopojiet to WebAssembly modulī (binārā WASM) un visbeidzot integrējiet šo moduli ar esošu JavaScript lietojumprogramma.

Precīzi soļi koda eksportēšanai uz WebAssembly ļoti atšķirsies atkarībā no rīku ķēdes. Viņi arī nedaudz atkāpsies no tā, kā šai valodai tiek veidoti regulāri vietējie binārie faili. Piemēram, sadaļā Rust jums būs jāveic vairākas darbības:

1. Iestatiet katru nakti veidot Rust, ar wasm32-nezināms-nezināms instrumentu ķēde.
2. Uzrakstiet savu Rust kodu ar ārējām funkcijām, kas deklarētas kā # [bez žokļa].
3. Veidojiet kodu, izmantojot iepriekš minēto rīku ķēdi.

(Lai iegūtu detalizētu iepriekš minēto darbību pārskatu, skatiet GitHub The Rust and WebAssembly Book.)

Ir vērts atzīmēt, ka neatkarīgi no valodas, kuru izmantojat, koda integrēšanai ar HTML priekšgalu jums būs jābūt vismaz minimālam JavaScript prasmes līmenim. Ja šajā piemērā esošie JavaScript fragmenti no The Rust un WebAssembly Book jums šķiet grieķu valodas, atvēliet kādu laiku, lai apgūtu vismaz pietiekami daudz JavaScript, lai saprastu, kas tur notiek.

WebAssembly un JavaScript integrācija tiek veikta, izmantojot Tīmekļa asambleja objektu JavaScript, lai izveidotu tiltu uz jūsu WebAssembly kodu. Mozilla rīcībā ir dokumentācija, kā to izdarīt. Šeit ir atsevišķs WebAssembly piemērs Rust, un šeit ir WebAssembly piemērs Node.js.

Pašlaik integrācija starp WebAssembly aizmuguri un JavaScript / HTML priekšgalu joprojām ir visgrūtākā un manuālākā visa procesa daļa. Piemēram, izmantojot Rust, tilti uz JavaScript joprojām ir jāizveido manuāli, izmantojot neapstrādātus datu rādītājus.

Tomēr vairāk rīku ķēdes gabalu sāk pievērsties šim jautājumam. Cheerp ietvars ļauj C ++ programmētājiem sarunāties ar pārlūka API, izmantojot īpašu nosaukumvietu. Un Rust piedāvā wasm-bindgen, kas kalpo kā divvirzienu tilts starp JavaScript un Rust, kā arī starp JavaScript un WebAssembly.

Turklāt tiek izskatīts augsta līmeņa priekšlikums par to, kā rīkoties ar saitēm ar resursdatoru. Pēc pabeigšanas tas nodrošinās standarta veidu, kā valodas, kuras apkopo WebAssemble, mijiedarboties ar saimniekiem. Ilgtermiņa stratēģija ar šo priekšlikumu ietver saistījumus arī ar saimniekiem, kuri nav pārlūkprogrammas, taču pārlūkprogrammu saistījumi ir īstermiņa un tūlītējas lietošanas gadījumi.

WebAssembly lietotņu atkļūdošana un profilēšana

Viena no jomām, kur WebAssembly rīki joprojām ir agrīnākajos posmos, ir atbalsts atkļūdošanai un profilēšanai.

Līdz brīdim, kad parādījās JavaScript avota kartes, valodās, kas tika apkopotas JavaScript, bieži bija grūti atkļūdot, jo sākotnējo un apkopoto kodu nevarēja viegli korelēt. WebAssembly ir dažas tās pašas problēmas: ja jūs rakstāt kodu C un apkopojat to WASM, ir grūti noteikt korelācijas starp avotu un apkopoto kodu.

JavaScript avota kartes norāda, kuras avota koda rindas atbilst apkopotā koda reģioniem. Daži WebAssembly rīki, piemēram, Emscripten, var arī izstarot JavaScript avota kartes apkopotajam kodam. Viens no WebAssembly ilgtermiņa plāniem ir avotu karšu sistēma, kas pārsniedz tikai to, kas ir pieejams JavaScript, taču tas joprojām ir tikai piedāvājuma stadijā.

Pašlaik tiešākais veids, kā savvaļā atkļūdot WASM kodu, ir tīmekļa pārlūkprogrammas atkļūdošanas konsole. Šajā WebAssemblyCode rakstā ir parādīts, kā ģenerēt WASM kodu ar avota karti, padarīt to pieejamu pārlūka atkļūdošanas rīkiem un iziet cauri kodam. Ņemiet vērā, ka aprakstītās darbības ir atkarīgas no emcc rīks WASM izstarošanai. Jums var būt nepieciešams mainīt darbības atkarībā no konkrētā rīku ķēdes.