Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Kab lus no tham txog ib rooj plaub rau kev ua kom nrawm ntawm daim ntawv thov browser los ntawm kev hloov JavaScript suav nrog WebAssembly.

WebAssembly - yog dab tsi?

Nyob rau hauv luv luv, qhov no yog ib tug binary kev qhia hom ntawv rau ib tug stack-based virtual tshuab. Wasm (lub npe luv) feem ntau hu ua lus programming, tab sis nws tsis yog. Cov ntawv qhia hom tau ua tiav hauv browser nrog rau JavaScript.

Nws yog ib qho tseem ceeb uas WebAssembly tuaj yeem tau txais los ntawm kev sau cov peev txheej hauv hom lus xws li C / C ++, Rust, Go. Ntawm no yog kev ntaus ntawv txheeb cais thiab lub npe hu ua tus qauv nco tau siv. Cov cai, raws li tau hais los saum no, yog khaws cia rau hauv ib qho kev sib cog lus binary, ua rau nws yuav luag sai npaum li kev khiav daim ntawv thov siv cov kab hais kom ua. Cov peev txheej no tau ua rau muaj kev loj hlob ntawm WebAssembly qhov chaw.

Peb nco qab: rau txhua tus neeg nyeem Habr - 10 ruble luv nqi thaum tso npe rau hauv ib chav kawm Skillbox siv Habr promo code.

Skillbox pom zoo: Cov chav kawm siv tau "Mobile Developer PRO".

Tam sim no, Wasm tau siv ntau daim ntawv thov, los ntawm kev ua si xws li Doom 3 mus rau web-ported daim ntawv thov xws li Autocad thiab Figma. Wasm kuj tseem siv rau hauv thaj chaw xws li serverless xam.

Kab lus no muab piv txwv ntawm kev siv Wasm txhawm rau txhawm rau txhawm rau txhawm rau txheeb xyuas lub vev xaib. Txhawm rau kom meej, peb tau txais daim ntawv thov ua haujlwm sau hauv C, uas tau muab tso ua ke rau hauv WebAssembly. Cov txiaj ntsig yuav raug siv los hloov cov ntu tsis zoo ntawm JS.

Kev hloov pauv ntawm daim ntawv thov

Qhov piv txwv yuav siv qhov kev pabcuam fastq.bio browser, uas yog npaj rau cov kws kho mob caj ces. Cov cuab yeej tso cai rau koj los ntsuas qhov zoo ntawm DNA sequencing (deciphering).

Nov yog ib qho piv txwv ntawm daim ntawv thov hauv kev nqis tes ua:

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Cov ntsiab lus ntawm cov txheej txheem tsis tsim nyog mus rau hauv vim tias lawv nyuaj heev rau cov tsis yog kws tshaj lij, tab sis luv luv, cov kws tshawb fawb tuaj yeem siv cov infographic saum toj no kom nkag siab seb cov txheej txheem DNA sequencing mus zoo thiab muaj teeb meem dab tsi tshwm sim.

Qhov kev pabcuam no muaj lwm txoj hauv kev, desktop programs. Tab sis fastq.bio tso cai rau koj kom ceev koj txoj haujlwm los ntawm kev pom cov ntaub ntawv. Feem ntau, koj yuav tsum muaj peev xwm ua haujlwm nrog cov kab hais kom ua, tab sis tsis yog txhua tus kws kho caj ces muaj qhov tsim nyog.

Txhua yam ua haujlwm yooj yim. Cov tswv yim yog cov ntaub ntawv nthuav tawm hauv daim ntawv ntawm cov ntawv nyeem. Cov ntaub ntawv no yog tsim los ntawm cov cuab yeej tshwj xeeb ua ntu zus. Cov ntaub ntawv muaj cov npe DNA ua ntu zus thiab cov qhab nia zoo rau txhua tus nucleotide. Cov ntaub ntawv hom ntawv yog .fastq, uas yog vim li cas qhov kev pabcuam tau txais nws lub npe.

Kev siv hauv JavaScript

Thawj kauj ruam ntawm tus neeg siv thaum ua haujlwm nrog fastq.bio yog xaiv cov ntaub ntawv tsim nyog. Siv cov khoom siv ntaub ntawv, daim ntawv thov nyeem ib qho piv txwv ntawm cov ntaub ntawv los ntawm cov ntaub ntawv thiab cov txheej txheem uas batch. JavaScript txoj hauj lwm ntawm no yog ua txoj hlua yooj yim thiab suav cov metrics. Ib tug ntawm lawv yog tus naj npawb ntawm nucleotides A, C, G thiab T ntawm cov DNA sib txawv.

Tom qab xam cov ntsuas tsim nyog, lawv pom pom siv Plotly.js, thiab cov kev pabcuam pib ua haujlwm nrog cov qauv ntaub ntawv tshiab. Lub chunking yog ua los txhim kho qhov zoo ntawm UX. Yog tias koj ua haujlwm nrog tag nrho cov ntaub ntawv ib zaug, cov txheej txheem yuav khov rau qee lub sijhawm, txij li cov ntaub ntawv nrog cov txiaj ntsig sib luag yuav siv ntau pua gigabytes ntawm qhov chaw ua ntaub ntawv. Cov kev pabcuam siv cov ntaub ntawv loj ntawm 0,5 mus rau 1 MB thiab ua haujlwm nrog lawv ib kauj ruam, tsim cov ntaub ntawv graphical.

Nov yog qhov nws ua haujlwm li cas:

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Cov duab plaub liab muaj cov hlua hloov algorithm kom tau txais kev pom. Qhov no yog qhov feem ntau suav nrog cov kev pabcuam. Nws tsim nyog sim hloov nws nrog Wasm.

Testing WebAssembly

Txhawm rau ntsuas qhov muaj peev xwm ntawm kev siv Wasm, pab pawg pib tshawb nrhiav cov kev daws teeb meem npaj rau kev tsim QC metrics (QC - kev tswj kom zoo) raws li cov ntaub ntawv fastq. Kev tshawb nrhiav tau ua tiav ntawm cov cuab yeej sau hauv C, C ++ lossis Rust, kom nws tuaj yeem xa cov lej mus rau WebAssembly. Tsis tas li ntawd, cov cuab yeej yuav tsum tsis yog "raws li"; ib qho kev pabcuam uas twb tau sim los ntawm cov kws tshawb fawb tau xav tau.

Yog li ntawd, qhov kev xaiv tau ua rau pom zoo seb k. Daim ntawv thov yog nrov heev, nws yog qhib-qhov chaw, lub hauv paus lus yog C.

Ua ntej hloov mus rau Wasm, nws tsim nyog saib lub hauv paus ntsiab lus ntawm seqtk rau lub desktop. Raws li Makefile, ntawm no yog qhov koj xav tau:

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

Hauv txoj cai, koj tuaj yeem suav seqtk siv Emscripten. Yog tsis muaj, peb ua. Docker duab.

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

Yog xav tau Koj tuaj yeem sib sau ua ke koj tus kheej, tab sis nws yuav siv sij hawm.

Hauv ib lub thawv, koj tuaj yeem yooj yim siv emcc ua lwm txoj hauv kev gcc:

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

Kev hloov pauv yam tsawg kawg nkaus:

Es tsis txhob tso tawm rau cov ntaub ntawv binary, Emscripten siv .wasm thiab .js los tsim cov ntaub ntawv, uas yog siv los khiav WebAssemby module.

Tus chij USE_ZLIB siv los txhawb lub tsev qiv ntawv zlib. Lub tsev qiv ntawv tau muab faib thiab xa mus rau WebAssembly, thiab Emscripten suav nrog nws hauv qhov project.

Emscrippten virtual file system tau qhib. Qhov no POSIX zoo li FS, khiav hauv RAM hauv browser. Thaum nplooj ntawv yog rov ua dua tshiab, lub cim xeeb raug tshem tawm.

Txhawm rau nkag siab tias vim li cas cov ntaub ntawv virtual xav tau, nws tsim nyog muab piv rau txoj hauv kev koj khiav seqtk los ntawm kab hais kom ua nrog rau txoj kev koj khiav ib qho WebAssembly module.

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

Kev nkag mus rau cov ntaub ntawv virtual yog qhov tsim nyog kom tsis txhob rov sau seqtk rau txoj hlua ntau dua li cov ntaub ntawv nkag. Nyob rau hauv cov ntaub ntawv no, cov ntaub ntawv fragment yog tso tawm kom pom raws li ib tug data.fastq cov ntaub ntawv nyob rau hauv lub virtual FS nrog ib tug hu rau main() seqtk rau nws.

Nov yog qhov tshiab architecture:

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Daim duab qhia tau hais tias es tsis txhob xam nyob rau hauv lub ntsiab browser xov, WebWorkers. Txoj kev no tso cai rau koj los ua kev suav hauv cov xov keeb kwm yav dhau yam tsis muaj kev cuam tshuam rau qhov browser teb. Zoo, WebWorker maub los pib tus neeg ua haujlwm, tswj nws kev cuam tshuam nrog cov xov tseem ceeb.

Cov lus txib seqtk khiav siv Tus Neeg Ua Haujlwm ntawm cov ntaub ntawv mounted. Tom qab ua tiav qhov kev ua tiav, Tus Neeg Ua Haujlwm tsim cov txiaj ntsig hauv daim ntawv cog lus. Thaum cov lus tau txais los ntawm cov xov tseem ceeb, qhov tshwm sim yog siv los hloov kho cov duab. Thiab yog li nyob rau hauv ntau iterations.

Yuav ua li cas txog WebAssembly kev ua tau zoo?

Txhawm rau ntsuas qhov kev hloov pauv hauv kev ua haujlwm, pab pawg ua haujlwm tau siv cov kev ua haujlwm nyeem ib qho thib ob. Lub sijhawm nws siv los tsim cov duab sib tham sib tsis tau muab rau hauv tus account vim tias ob qho kev siv siv JavaScript.

Thaum siv cov kev daws teeb meem sab nraud, qhov kev ua tau zoo nce yog cuaj zaug.

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Qhov no yog ib qho txiaj ntsig zoo, tab sis, raws li nws hloov tawm, muaj lub sijhawm los ua kom nws zoo dua. Qhov tseeb yog tias ntau tus QC tsom xam cov txiaj ntsig tsis siv los ntawm seqtk, yog li lawv tuaj yeem raug tshem tawm. Yog tias koj ua qhov no, qhov txiaj ntsig zoo dua los ntawm 13 npaug piv rau JS.

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Nws tau ua tiav los ntawm kev tawm tswv yim tawm ntawm printf() cov lus txib.

Tab sis tsis yog tag nrho. Qhov tseeb yog tias nyob rau theem no, fastq.bio tau txais cov txiaj ntsig kev soj ntsuam los ntawm kev hu xov tooj sib txawv C ua haujlwm, txhua tus ntawm lawv suav nws tus kheej cov yam ntxwv, kom txhua ntu ntawm cov ntaub ntawv tau nyeem ob zaug.

Txhawm rau kom tau txais qhov teeb meem no, nws tau txiav txim siab los muab ob txoj haujlwm ua ib qho. Yog li ntawd, kev tsim khoom tau nce 20 npaug.

Yuav ua li cas peb siv WebAssembly kom ceev ib daim ntawv thov web 20 zaug

Nws yog ib qho tsim nyog sau cia tias qhov txiaj ntsig zoo li no tsis tuaj yeem ua tiav. Qee zaum, kev ua haujlwm yuav poob qis, yog li nws tsim nyog ntsuas txhua kis.

Raws li qhov xaus, peb tuaj yeem hais tias Wasm muab lub sijhawm los txhim kho kev ua haujlwm ntawm daim ntawv thov, tab sis koj yuav tsum siv nws kom zoo.

Skillbox pom zoo:

Tau qhov twg los: www.hab.com

Ntxiv ib saib