څنګه موږ د ویب اپلیکیشن 20 ځله تیزولو لپاره WebAssembly وکاروه

دا مقاله د WebAssembly سره د جاواسکریپټ حسابونو ځای په ځای کولو سره د براوزر غوښتنلیک ګړندي کولو لپاره قضیه بحث کوي.

WebAssembly - دا څه دي؟

په لنډه توګه، دا د سټیک پر بنسټ مجازی ماشین لپاره د بائنری لارښوونې بڼه ده. Wasm (لنډ نوم) اکثرا د پروګرام کولو ژبه ویل کیږي، مګر داسې نه ده. د لارښوونې بڼه د جاواسکریپټ سره په براوزر کې اجرا کیږي.

دا مهمه ده چې WebAssembly په ژبو کې د سرچینو لکه C/C++، Rust، Go په تالیف کولو سره ترلاسه کیدی شي. دلته احصایوي ټایپ کول او د فلیټ حافظې ماډل کارول کیږي. کوډ، لکه څنګه چې پورته یادونه وشوه، په کمپیکٹ بائنری بڼه کې زیرمه شوی، دا د کمانډ لاین په کارولو سره د غوښتنلیک چلولو په څیر ګړندی کوي. دا وړتیاوې د WebAssembly د شهرت د ودې لامل شوي.

موږ یادونه کوو: د ټولو هابر لوستونکو لپاره - د 10 روبل تخفیف کله چې د هابر پرومو کوډ په کارولو سره د مهارت بکس کوم کورس کې نوم لیکنه وکړئ.

Skillbox وړاندیز کوي: عملي کورس "د ګرځنده پرمخ وړونکي PRO".

اوس مهال، Wasm په ډیری غوښتنلیکونو کې کارول کیږي، د لوبو څخه لکه Doom 3 څخه د ویب پورټ شوي غوښتنلیکونو لکه Autocad او Figma پورې. Wasm په داسې برخو کې هم کارول کیږي لکه سرور بې کمپیوټري.

دا مقاله د تحلیلي ویب خدمت ګړندي کولو لپاره د Wasm کارولو مثال وړاندې کوي. د وضاحت لپاره، موږ یو کاري غوښتنلیک واخیست چې په C کې لیکل شوی، کوم چې په WebAssembly کې ترتیب شوی. پایله به د JS د ټیټ فعالیت برخو بدلولو لپاره وکارول شي.

د غوښتنلیک بدلون

مثال به د fastq.bio براوزر خدمت وکاروي، کوم چې د جینیات پوهانو لپاره دی. دا وسیله تاسو ته اجازه درکوي چې د DNA ترتیب کولو کیفیت ارزونه وکړي (تعریف کول).

دلته په عمل کې د غوښتنلیک یوه بیلګه ده:

د پروسې جزئیات د دې ارزښت نلري ځکه چې دا د غیر متخصصینو لپاره خورا پیچلي دي، مګر په لنډه توګه، ساینس پوهان کولی شي د پورتنۍ انفوګرافیک څخه کار واخلي ترڅو پوه شي چې ایا د DNA ترتیب کولو پروسه په سمه توګه پرمخ تللې او کومې ستونزې رامینځته شوي.

دا خدمت بدیلونه لري، د ډیسټاپ پروګرامونه. مګر fastq.bio تاسو ته اجازه درکوي د معلوماتو لیدو سره خپل کار ګړندی کړئ. په ډیرو نورو قضیو کې، تاسو اړتیا لرئ چې د کمانډ لاین سره کار وکړئ، مګر ټول جینیات پوهان اړین تجربه نلري.

هرڅه په ساده ډول کار کوي. ان پټ هغه معلومات دي چې د متن فایل په بڼه وړاندې کیږي. دا فایل د ځانګړي ترتیب کولو وسیلو لخوا رامینځته شوی. په فایل کې د DNA ترتیبونو لیست او د هر نیوکلیوټایډ لپاره د کیفیت سکور شامل دي. د فایل بڼه .fastq ده، له همدې امله دا خدمت خپل نوم ترلاسه کړ.

په جاواسکریپټ کې پلي کول

د کارونکي لومړی ګام کله چې د fastq.bio سره کار کوي د مناسب فایل غوره کول دي. د فایل څیز په کارولو سره ، غوښتنلیک د فایل څخه د معلوماتو تصادفي نمونه لوستل کوي او دا بیچ پروسس کوي. د JavaScript دنده دلته د ساده تار عملیات ترسره کول او د میټریکونو محاسبه کول دي. یو له دوی څخه د نیوکلیوټایډونو شمیر دی A, C, G او T د DNA په بیلابیلو برخو کې.

د اړینو شاخصونو محاسبه کولو وروسته، دوی د Plotly.js په کارولو سره لیدل کیږي، او خدمت د نوي ډیټا نمونې سره کار پیل کوي. ټوټه کول د UX کیفیت ښه کولو لپاره ترسره کیږي. که تاسو په یوځل کې د ټولو ډیټا سره کار کوئ ، نو پروسه به د یو څه وخت لپاره کنګل شي ، ځکه چې د ترتیب پایلو سره فایلونه په سلګونو ګیګابایټ فایل ځای نیسي. خدمت د 0,5 څخه تر 1 MB پورې د اندازې ډاټا ټوټې اخلي او د دوی سره ګام په ګام کار کوي، د ګرافیکي ډاټا جوړول.

دا څنګه کار کوي:

سور مستطیل د لید ترلاسه کولو لپاره د تار بدلون الګوریتم لري. دا د خدمت ترټولو کمپیوټري ژوره برخه ده. دا د Wasm سره د ځای په ځای کولو هڅه کولو ارزښت لري.

د WebAssembly ازموینه

د Wasm کارولو احتمال ارزولو لپاره، د پروژې ټیم د فاسټق فایلونو پراساس د QC میټریکونو (QC - کیفیت کنټرول) رامینځته کولو لپاره د چمتو شوي حلونو لټون پیل کړ. لټون په C، C++ یا Rust کې لیکل شوي وسیلو په منځ کې ترسره شو، نو دا ممکنه وه چې کوډ WebAssembly ته پورټ کړئ. سربیره پردې ، وسیله باید "خام" نه وي؛ یو خدمت چې دمخه د ساینس پوهانو لخوا ازمول شوی و اړین و.

د پایلې په توګه، انتخاب په ګټه ترسره شو seqtk. غوښتنلیک خورا مشهور دی، دا خلاص سرچینه ده، د سرچینې ژبه C ده.

Wasm ته د بدلولو دمخه، دا د ډیسټاپ لپاره د seqtk د تالیف اصول ته د کتلو ارزښت لري. د Makefile په وینا، دلته هغه څه دي چې تاسو ورته اړتیا لرئ:

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

په اصل کې، تاسو کولی شئ د Emscripten په کارولو سره seqtk تالیف کړئ. که دا شتون نلري، موږ یې کوو. د ډاکر انځور.

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

که وغواړي تاسو کولی شئ دا پخپله راټول کړئ، مګر دا وخت نیسي.

د کانټینر دننه، تاسو کولی شئ په اسانۍ سره د gcc بدیل په توګه emcc وکاروئ:

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

لږ تر لږه بدلونونه:

د بائنری فایل ته د وتلو پرځای، Emscripten د فایلونو د جوړولو لپاره .wasm او .js کاروي، کوم چې د WebAssemby ماډل چلولو لپاره کارول کیږي.

د USE_ZLIB بیرغ د zlib کتابتون د ملاتړ لپاره کارول کیږي. کتابتون ویشل شوی او WebAssembly ته لیږدول شوی، او Emscripten دا په پروژه کې شاملوي.

د ایمسکریپټین مجازی فایل سیسټم فعال شوی. دا د POSIX په څیر FS، د براوزر دننه په RAM کې چلول. کله چې پاڼه تازه شي، حافظه پاکیږي.

د دې لپاره چې پوه شئ چې ولې یو مجازی فایل سیسټم ته اړتیا ده، دا ارزښت لري چې تاسو د کمانډ لاین څخه د seqtk چلولو طریقې سره پرتله کړئ هغه طریقه چې تاسو د WebAssembly ماډل چلوي.

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

د مجازی فایل سیسټم ته د لاسرسي ترلاسه کول اړین دي ترڅو د فایل ان پټ پر ځای د سټرینګ لپاره seqtk بیا ولیکل نشي. په دې حالت کې، د ډیټا ټوټه په مجازی FS کې د data.fastq فایل په توګه ښودل کیږي چې اصلي () seqtk ته زنګ وهي.

دلته نوی جوړښت دی:

ارقام ښیې چې د اصلي براوزر تار کې د محاسبې پرځای ، ویب کارکونکي. دا طریقه تاسو ته اجازه درکوي په شالید تار کې حسابونه ترسره کړئ پرته لدې چې د براوزر غبرګون اغیزه وکړي. ښه، د ویب ورکر کنټرولر کارګر پیل کوي، د اصلي تار سره خپل تعامل اداره کوي.

د seqtk کمانډ په نصب شوي فایل کې د ورکر په کارولو سره چلیږي. د اجرا کولو له بشپړیدو وروسته، کارګر د ژمنې په بڼه پایله تولیدوي. کله چې یو پیغام د اصلي تار لخوا ترلاسه کیږي، پایله د ګرافونو تازه کولو لپاره کارول کیږي. او داسې نور په څو تکرارونو کې.

د WebAssembly فعالیت په اړه څه؟

په فعالیت کې د بدلون ارزولو لپاره، د پروژې ټیم په هر ثانیه کې د لوستلو عملیات کارولي. هغه وخت چې دا د متقابل ګرافونو جوړولو لپاره اخلي په پام کې نه نیول کیږي ځکه چې دواړه پلي کونکي جاواسکریپټ کاروي.

کله چې د بکس څخه بهر حل وکاروئ ، د فعالیت زیاتوالی نهه ځله و.

دا یوه غوره پایله ده، مګر، لکه څنګه چې دا معلومه شوه، د دې د ښه کولو فرصت هم شتون لري. حقیقت دا دی چې د QC تحلیلونو لوی شمیر پایلې د seqtk لخوا نه کارول کیږي، نو دوی کولی شي حذف شي. که تاسو دا کار کوئ، پایله د JS په پرتله 13 ځله ښه کیږي.

دا په ساده ډول د printf() کمانډونو په تبصره کولو سره ترلاسه شوی.

مګر دا ټول نه دي. حقیقت دا دی چې په دې مرحله کې، fastq.bio د مختلف C فنکشنونو په زنګ وهلو سره د تحلیل پایلې ترلاسه کوي، هر یو یې خپل ځانګړتیاوې محاسبه کوي، ترڅو د فایل هره ټوټه دوه ځله لوستل شي.

د دې ستونزې د حل لپاره، پریکړه وشوه چې دوه دندې په یوه کې سره یوځای کړئ. د پایلې په توګه، تولید 20 ځله زیات شوی.

دا د یادونې وړ ده چې دا ډول غوره پایله تل نشي ترلاسه کیدی. په ځینو مواردو کې، فعالیت به راټیټ شي، نو دا د هرې قضیې ارزولو ارزښت لري.

د پایلې په توګه ، موږ کولی شو ووایو چې Wasm د غوښتنلیک فعالیت ښه کولو لپاره فرصت چمتو کوي ، مګر تاسو اړتیا لرئ دا په هوښیارۍ سره وکاروئ.

Skillbox وړاندیز کوي:

• دوه کلن عملي کورس "زه د پرو ویب جوړونکی یم".
• آنلاین کورس "له 0 څخه C# پراختیا کونکی".
• یو کلن عملي کورس "د پی ایچ پی جوړونکی له 0 څخه تر پرو".

سرچینه: www.habr.com