WebAssembly nola erabili genuen web aplikazio bat 20 aldiz bizkortzeko

Artikulu honek arakatzaile-aplikazio bat bizkortzeko kasu bat aztertzen du JavaScript kalkuluak WebAssembly-rekin ordezkatuz.

WebAssembly - zer da?

Laburbilduz, hau pilan oinarritutako makina birtual baterako instrukzio formatu bitarra da. Wasm (izen laburra) programazio-lengoaia deitzen zaio askotan, baina ez da. Argibide-formatua arakatzailean exekutatzen da JavaScriptekin batera.

Garrantzitsua da WebAssembly iturriak konpilatuz lor daitekeela C/C++, Rust, Go bezalako lengoaietan. Hemen idazketa estatistikoa eta memoria laua deritzon eredua erabiltzen dira. Kodea, goian aipatu bezala, formatu bitar trinkoan gordetzen da, aplikazioa komando-lerroa erabiliz exekutatzen bezain azkar. Gaitasun hauek WebAssembly-ren ospea haztea ekarri dute.

Gogoratzen dugu: "Habr" irakurle guztientzat - 10 errubloko deskontua "Habr" promozio-kodea erabiliz Skillbox-eko edozein ikastarotan izena ematean.

Skillbox-ek gomendatzen du: Ikastaro praktikoa "Mobile Developer PRO".

Gaur egun, Wasm aplikazio askotan erabiltzen da, Doom 3 bezalako jokoetatik hasi eta Autocad eta Figma bezalako web-ported aplikazioetara. Wasm zerbitzaririk gabeko informatika bezalako arloetan ere erabiltzen da.

Artikulu honek Wasm erabiltzearen adibide bat eskaintzen du analisi web-zerbitzu bat bizkortzeko. Argitasunerako, C-n idatzitako lan-aplikazio bat hartu genuen, WebAssembly-n konpilatuta dagoena. Emaitza JS-ren errendimendu gutxiko atalak ordezkatzeko erabiliko da.

Aplikazioen Eraldaketa

Adibideak fastq.bio nabigatzaile-zerbitzua erabiliko du, genetistarentzat pentsatuta. Tresnak DNAren sekuentziazioaren (deszifratzearen) kalitatea ebaluatzeko aukera ematen du.

Hona hemen martxan dagoen aplikazioaren adibide bat:

Prozesuaren xehetasunak ez du merezi espezialistentzat nahiko konplexuak baitira, baina laburbilduz, zientzialariek goiko infografia erabil dezakete DNAren sekuentziazio prozesua ondo joan den eta zer arazo sortu diren ulertzeko.

Zerbitzu honek alternatibak ditu, mahaigaineko programak. Baina fastq.bio-k zure lana bizkortzeko aukera ematen dizu datuak ikusiz. Beste kasu gehienetan, komando-lerroarekin lan egin ahal izan behar duzu, baina genetista guztiek ez dute beharrezko esperientzia.

Dena besterik gabe funtzionatzen du. Sarrera testu-fitxategi baten moduan aurkezten diren datuak dira. Fitxategi hau sekuentziazio tresna espezializatuek sortzen dute. Fitxategiak DNA-sekuentzien zerrenda eta nukleotido bakoitzaren kalitate-puntuazioa ditu. Fitxategiaren formatua .fastq da, eta horregatik jaso du izena zerbitzuak.

JavaScript-en inplementatzea

Fastq.bio-rekin lan egiten duenean erabiltzailearen lehen urratsa fitxategi egokia hautatzea da. Fitxategia objektua erabiliz, aplikazioak fitxategi bateko datuen ausazko lagin bat irakurtzen du eta sorta hori prozesatzen du. JavaScript-en lana hemen kate-eragiketa errazak egitea eta metrikak kalkulatzea da. Horietako bat DNA zati ezberdinetan A, C, G eta T nukleotidoen kopurua da.

Beharrezko adierazleak kalkulatu ondoren, Plotly.js erabiliz bistaratzen dira, eta zerbitzua datu-lagin berri batekin hasten da lanean. Zatiketa UXren kalitatea hobetzeko egiten da. Datu guztiekin batera lan egiten baduzu, prozesua izoztuko da denbora batez, sekuentziazio-emaitzak dituzten fitxategiek ehunka gigabyte fitxategi-espazioa hartzen baitute. Zerbitzuak 0,5 eta 1 MB arteko tamainako datuak hartzen ditu eta haiekin lan egiten du urratsez urrats, datu grafikoak eraikiz.

Honela funtzionatzen du:

Laukizuzen gorriak bistaratzea lortzeko kateen transformazio algoritmoa dauka. Hau da zerbitzuaren zatirik konputazionalki intentsiboena. Merezi du Wasm-ekin ordezkatzen saiatzea.

WebAssembly probatzen

Wasm erabiltzeko aukera ebaluatzeko, proiektuko taldea QC metrics (QC - quality control) sortzeko prest dauden irtenbideak bilatzen hasi zen fastq fitxategietan oinarrituta. Bilaketa C, C++ edo Rust-en idatzitako tresnen artean egin da, eta horrela, kodea WebAssembly-ra eraman ahal izan da. Gainera, tresnak ez luke "gordina" izan behar; zientzialariek dagoeneko probatu zuten zerbitzu bat behar zen.

Ondorioz, aldeko hautua egin zen seqtk. Aplikazioa nahiko ezaguna da, kode irekikoa da, iturburu hizkuntza C da.

Wasm-era bihurtu aurretik, merezi du mahaigainerako seqtk-en konpilazio printzipioa aztertzea. Makefile-ren arabera, hona hemen behar duzuna:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

Printzipioz, seqtk konpila dezakezu Emscripten erabiliz. Ez badago, konpontzen dugu. Docker irudia.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Nahi izanez gero Zuk zeuk munta dezakezu, baina denbora behar da.

Edukiontzi baten barruan, erraz erabil dezakezu emcc gcc-ren alternatiba gisa:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

Gutxieneko aldaketak:

Fitxategi bitar batera atera beharrean, Emscripten-ek .wasm eta .js erabiltzen ditu fitxategiak sortzeko, WebAssemby modulua exekutatzeko erabiltzen dena.

USE_ZLIB bandera zlib liburutegia onartzen da. Liburutegia WebAssemblyra banatu eta eraman da, eta Emscriptenek proiektuan sartzen du.

Emscriptpten fitxategi sistema birtuala aktibatuta dago. Hau POSIX antzeko FS, nabigatzailearen barruan RAM batean exekutatzen. Orria freskatzen denean, memoria garbitzen da.

Fitxategi-sistema birtual bat zergatik behar den ulertzeko, merezi du komando-lerrotik seqtk exekutatzeko modua konpilatu WebAssembly modulu bat exekutatzeko moduarekin alderatzea.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

Fitxategi-sistema birtualerako sarbidea lortzea beharrezkoa da, fitxategiaren sarreraren ordez katearen seqtk berridatzi ez dadin. Kasu honetan, datu-zatiak data.fastq fitxategi gisa bistaratzen dira FS birtualean, main() seqtk-era dei batekin.

Hona hemen arkitektura berria:

Irudiak erakusten du arakatzailearen harian kalkuluen ordez, WebWorkers. Metodo honek atzeko hari batean kalkuluak egiteko aukera ematen du, arakatzailearen erantzuna eragin gabe. Beno, WebWorker kontrolatzaileak Langilea abiarazten du, hari nagusiarekin duen interakzioa kudeatuz.

seqtk komandoa Worker erabiliz exekutatzen da muntatutako fitxategian. Exekuzioa amaitu ondoren, Langileak Promesaren formako emaitza sortzen du. Hari nagusiak mezu bat jasotzen duenean, emaitza grafikoak eguneratzeko erabiltzen da. Eta horrela hainbat iteraziotan.

Zer gertatzen da WebAssembly-ren errendimenduaz?

Errendimenduaren aldaketa ebaluatzeko, proiektuko taldeak segundoko irakurketa eragiketak erabili zituen parametroa. Grafiko interaktiboak eraikitzeko behar den denbora ez da kontuan hartzen, bi inplementazioek JavaScript erabiltzen baitute.

Kutxaz kanpoko irtenbidea erabiltzean, errendimenduaren igoera bederatzi aldiz izan zen.

Emaitza bikaina da, baina, antza denez, optimizatzeko aukera ere badago. Kontua da QC analisiaren emaitza kopuru handi bat seqtk-ek ez duela erabiltzen, beraz, ezabatu egin daitezke. Hau egiten baduzu, emaitza 13 aldiz hobetzen da JS-rekin alderatuta.

Printf() komandoak komentatuz besterik gabe lortu zen.

Baina hori ez da guztia. Kontua da fase honetan, fastq.bio-k analisiaren emaitzak jasotzen dituela C funtzio ezberdinei deituz. Bakoitzak bere ezaugarrien multzoa kalkulatzen du, fitxategiaren zati bakoitza birritan irakurtzeko.

Arazo honi aurre egiteko, bi funtzio bakar batean konbinatzea erabaki zen. Ondorioz, produktibitatea 20 aldiz handitu zen.

Aipatzekoa da emaitza bikaina ezin dela beti lortu. Kasu batzuetan, errendimendua jaitsi egingo da, beraz, merezi du kasu bakoitza ebaluatzea.

Ondorio gisa, esan dezakegu Wasmek aplikazioen errendimendua hobetzeko aukera ematen duela, baina zentzuz erabili behar duzu.

Skillbox-ek gomendatzen du:

• Bi urteko ikastaro praktikoa "PRO web garatzailea naiz".
• Lineako ikastaroa "0-tik C# garatzailea".
• Ikastaro praktikoa "PHP garatzailea 0tik PROra".

Iturria: www.habr.com