Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Gihisgotan niining artikuloha ang usa ka kaso sa pagpadali sa aplikasyon sa browser pinaagi sa pag-ilis sa mga kalkulasyon sa JavaScript sa WebAssembly.

WebAssembly - unsa man kini?

Sa laktud, kini usa ka binary nga format sa panudlo alang sa usa ka stacked virtual machine. Kasagaran ang Wasm (minubo nga ngalan) gitawag nga programming language, apan dili. Ang format sa panudlo gipatuman sa browser kauban ang JavaScript.

Importante nga makuha ang WebAssembly pinaagi sa pag-compile sa mga tinubdan sa mga pinulongan sama sa C / C ++, Rust, Go. Naggamit kini og statistical typing ug ang gitawag nga flat memory model. Ang code, sama sa gihisgutan sa ibabaw, gitipigan sa usa ka compact binary format, nga naghimo niini nga hapit ingon ka paspas nga kung ang aplikasyon gipadagan gikan sa command line. Kini nga mga bahin misangpot sa pagsaka sa pagkapopular sa WebAssembly.

Gipahinumduman namon ikaw: alang sa tanan nga mga magbabasa sa "Habr" - usa ka diskwento sa 10 nga mga rubles kung nagpalista sa bisan unsang kurso sa Skillbox gamit ang code sa promosyon nga "Habr".

Girekomenda sa Skillbox: Praktikal nga kurso "Mobile Developer PRO".

Ang Wasm gigamit karon sa daghang mga aplikasyon, gikan sa mga dula sama sa Doom 3 hangtod sa mga web-ported nga apps sama sa Autocad ug Figma. Ang Wasm gigamit usab sa usa ka natad sama sa serverless computing.

Kini nga artikulo naghatag usa ka pananglitan sa paggamit sa Wasm aron mapadali ang serbisyo sa web analytics. Alang sa katin-awan, nagkuha kami usa ka nagtrabaho nga aplikasyon nga gisulat sa C, nga mag-compile sa WebAssembly. Ang resulta gamiton sa pag-ilis sa ubos nga performance sa mga seksyon sa JS.

Pagbag-o sa aplikasyon

Ang pananglitan mogamit sa fastq.bio browser nga serbisyo, nga gituyo alang sa mga geneticist. Ang himan nagtugot kanimo sa pagtimbang-timbang sa kalidad sa DNA sequencing (decoding).

Ania ang usa ka pananglitan nga aplikasyon sa aksyon:

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Ang mga detalye sa proseso dili kinahanglan nga ihatag tungod kay kini komplikado kaayo alang sa dili mga espesyalista, apan sa laktud, ang mga siyentipiko makagamit sa infographic sa ibabaw aron masabtan kung ang proseso sa pagsunud sa DNA hapsay ug unsa nga mga problema ang mitumaw.

Kini nga serbisyo adunay mga alternatibo, mga programa sa desktop. Apan ang fastq.bio nagtugot kanimo sa pagpadali sa imong trabaho pinaagi sa paghanduraw sa datos. Sa kadaghanan sa ubang mga kaso, kinahanglan nimo nga magtrabaho kauban ang linya sa mando, apan dili tanan nga mga geneticist adunay kinahanglan nga kasinatian.

Ang tanan molihok nga yano. Ang input mao ang datos nga gipresentar isip usa ka text file. Kini nga file gihimo pinaagi sa espesyal nga mga himan sa pagsunud. Ang file adunay usa ka lista sa mga sequence sa DNA ug usa ka kalidad nga marka alang sa matag nucleotide. Ang format sa file mao ang .fastq, busa ang ngalan sa serbisyo.

Pagpatuman sa JavaScript

Ang una nga lakang alang sa tiggamit kung nagtrabaho kauban ang fastq.bio mao ang pagpili sa angay nga file. Gamit ang butang nga File, gibasa sa aplikasyon ang usa ka random nga sample sa datos gikan sa file ug giproseso kini nga batch. Ang buluhaton sa JavaScript dinhi mao ang paghimo sa yano nga mga operasyon sa string ug pagkalkula sa mga exponent. Usa kanila mao ang gidaghanon sa mga nucleotides A, C, G ug T sa lain-laing mga tipik sa DNA.

Pagkahuman sa pagkalkulo sa gikinahanglan nga mga indikasyon, kini makita gamit ang Plotly.js, ug ang serbisyo nagsugod sa pagtrabaho sa usa ka bag-ong sample sa datos. Ang pagbahin sa mga tipik gihimo aron mapauswag ang kalidad sa UX. Kung nagtrabaho ka sa tanan nga mga datos sa usa ka higayon, ang proseso magbitay sa makadiyot, tungod kay ang mga file nga adunay mga resulta sa pagsunud-sunod nagkuha gatusan ka gigabytes nga espasyo sa file. Ang serbisyo, sa laing bahin, nagkuha sa mga seksyon sa datos gikan sa gidak-on gikan sa 0,5 hangtod 1 MB ug nagtrabaho uban kanila sa lakang sa lakang, paghimo og graphic data.

Kini kung giunsa kini molihok:

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Ang pula nga rectangle naglangkob sa string conversion algorithm alang sa paghubad. Kini ang pinaka-computasyon nga gikarga nga bahin sa serbisyo. Angayan nga sulayan nga ilisan kini sa Wasm.

Pagsulay sa WebAssembly

Aron sa pagtimbang-timbang sa posibilidad sa paggamit sa Wasm, ang grupo sa proyekto nagsugod sa pagpangita alang sa mga andam nga solusyon alang sa paghimo sa usa ka QC metric (QC - quality control) base sa fastq files. Ang pagpangita gihimo taliwala sa mga himan nga gisulat sa C, C ++ o Rust, aron posible nga ma-port ang code sa WebAssembly. Dugang pa, ang himan kinahanglan dili "hilaw", gikinahanglan ang usa ka serbisyo nga nasulayan na sa mga siyentipiko.

Ingon nga resulta, ang pagpili gihimo pabor sa seqtk. Ang aplikasyon labi ka sikat, kini bukas nga gigikanan, ang gigikanan nga sinultian mao ang C.

Sa wala pa mag-convert sa Wasm, kinahanglan nimong tan-awon ang prinsipyo sa pag-compile sa seqtk alang sa desktop. Sumala sa Makefile, ania ang gikinahanglan:

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

Sa prinsipyo, mahimo nimong i-compile ang seqtk gamit ang Emscripten. Kung wala didto, makaagi kami. Docker nga paagi.

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

Kung gusto mahimo nimo kini i-assemble sa imong kaugalingonapan kini nagkinahanglan og panahon.

Sa sulod sa sudlanan, dali nimong makuha ang emcc isip alternatibo sa gcc:

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

Minimum nga mga pagbag-o:

Imbis nga mag-output sa binary file, ang Emscripten naggamit sa .wasm ug .js aron makamugna og mga file, nga gigamit sa pagpadagan sa WebAssemby module.

Ang USE_ZLIB nga bandila gigamit sa pagsuporta sa zlib library. Ang librarya giapod-apod ug gi-port sa WebAssembly, ug gilakip kini sa Emscripten sa proyekto.

Ang Emscriptpten virtual file system gi-aktibo. Kini Sama sa POSIX nga FS, nga nagdagan sa RAM sulod sa browser. Kung ang panid gi-refresh, ang panumduman ma-clear.

Aron masabtan kung nganong gikinahanglan ang usa ka virtual file system, angay nga itandi ang paagi sa imong pagpadagan sa seqtk gikan sa command line sa paagi sa imong pagpadagan sa usa ka gihugpong nga WebAssembly module.

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

Kinahanglan ang pag-access sa virtual file system aron dili masulat pag-usab ang seqtk alang sa string input, dili file input. Niini nga kaso, ang data fragment gipakita isip data.fastq file sa usa ka virtual file system nga adunay tawag sa main() seqtk niini.

Ania ang bag-ong arkitektura:

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Gipakita sa numero nga imbes nga mag-compute sa panguna nga thread sa browser, gigamit niini mga webworker. Kini nga pamaagi nagpaposible sa paghimo sa mga kalkulasyon sa usa ka background nga thread nga dili makapaubos sa pagtubag sa browser. Aw, ang WebWorker controller nagsugod sa Worker, nagdumala sa interaksyon niini sa main thread.

Ang seqtk command gipadagan sa usa ka Worker sa usa ka mount file. Human makompleto ang pagpatuman, ang Trabaho nagpagawas sa resulta sa porma sa usa ka Saad. Kung ang mensahe madawat sa panguna nga hilo, ang resulta gigamit sa pag-update sa mga graph. Ug uban pa alang sa daghang mga pag-uli.

Unsa man ang bahin sa pasundayag sa WebAssembly?

Aron masusi ang pagbag-o sa pasundayag, gigamit sa grupo sa proyekto ang mga operasyon sa pagbasa matag segundo nga parameter. Ang oras sa interactive nga pagplano wala gikonsiderar tungod kay gigamit ang JavaScript sa duha nga mga pagpatuman.

Kung gigamit ang out-of-the-box nga solusyon, ang nakuha sa performance siyam ka beses.

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Kini usa ka maayo kaayo nga resulta, apan, ingon nga kini nahimo, adunay usa ka oportunidad nga ma-optimize kini. Ang kamatuoran mao nga ang usa ka dako nga gidaghanon sa mga resulta sa pag-analisar sa QC wala gigamit sa seqtk, aron kini mapapas. Kung kini nahimo, ang resulta 13 ka beses nga mas maayo kaysa sa JS.

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Nakab-ot kini pinaagi lamang sa pagkomento sa printf() nga mga sugo.

Apan dili lang kana. Ang punto mao nga sa niini nga yugto, ang fastq.bio nakadawat sa mga resulta sa pagtuki pinaagi sa pagtawag sa nagkalain-laing mga function sa C. Ang matag usa kanila nagkalkula sa iyang kaugalingong set sa mga kinaiya, aron ang matag tipik sa file gibasa sa makaduha.

Aron masulbad kini nga problema, nakahukom nga i-combine ang duha ka function sa usa. Ingon usa ka sangputanan, ang pagka-produktibo misaka sa 20 ka beses.

Giunsa namo pagpadali ang aplikasyon sa web 20 ka beses gamit ang WebAssembly

Kini kinahanglan nga nakita nga ang ingon nga usa ka talagsaon nga resulta dili kanunay nga makab-ot. Sa pipila ka mga kaso, mikunhod ang pasundayag, busa angay nga susihon ang matag piho nga kaso.

Ingon usa ka konklusyon, mahimo naton isulti nga ang Wasm naghatag usa ka higayon aron mapaayo ang pasundayag sa aplikasyon, apan kinahanglan nimo nga gamiton kini nga maalamon.

Girekomenda sa Skillbox:

Source: www.habr.com

Idugang sa usa ka comment