Циљеви, кључни концепти и случајеви употребе

by
Tweet
Share
Share
Pin

Да ли сте размишљали о основним идејама и примерима примене WebAssembly-a (WASM)? Ако нисте, не брините, ми смо ту да вам помогнемо.

WebAssembly (WASM) је нови програмски језик ниског нивоа који омогућава постизање перформанси блиских изворном коду директно у веб окружењу.

У нашем претходном чланку, „WebAssembly за почетнике – 1. део“, представили смо WASM из перспективе почетника, објашњавајући његову дефиницију и ограничења. Такође, размотрили смо функције WebAssembly-a, путању развоја WASM-а и како JavaScript сарађује са WebAssembly-ем, а не ради против њега.

Овај чланак ће се детаљније позабавити WebAssembly-ем, истражујући његове циљеве, кључне концепте и могућности примене. Погледаћемо и неке од фасцинантних пројеката који користе ову технологију.

Започнимо!

Циљеви WebAssembly-a

Да бисмо разумели суштину WebAssembly-a, прво морамо размотрити његове циљеве. Они укључују:

  • Максимално искориштавање расположивог хардвера кроз коришћење бинарног формата који је ефикасан у погледу брзине учитавања и величине, што је главни циљ приликом компилације. Једноставније речено, WASM користи стабло апстрактне синтаксе (AST) у бинарном облику, подржавајући компилацију и извршавање при брзинама сличним изворном коду. Овај приступ омогућава WASM-у да ради на различитим уређајима, укључујући IoT, веб и мобилне платформе.
  • WASM није замишљен да замени или промени постојећу веб платформу. На тај начин, WebAssembly се може лако интегрисати са садашњим и будућим веб технологијама. Ово такође омогућава беспрекорну сарадњу WebAssembly-a са JavaScript-ом, укључујући паралелно извршавање и синхроне позиве из JavaScript-a.
  • Обезбеђивање глатког рада у складу са безбедносним правилима и политикама истог порекла.
  • Омогућавање програмерима да креирају решења која подржавају уградњу и ван веб прегледача.
  • Коначно, пружање програмерима алата за лак рад са изворним кодом WebAssembly-a кроз текст формат који је читљив и разумљив људима.

Кључни концепти WebAssembly-a

У основи, WebAssembly ради на следећи начин:

  • Прво је потребно написати код у статички типизованом језику са прецизно дефинисаним типовима.
  • Након тога, генерише се унапред компајлирани WASM модул и код се прослеђује машинском компајлеру.
  • Овај корак обезбеђује да WASM прескочи фазу рашчлањивања и омогућава да се код брзо прикаже у веб прегледачу.

Кључне идеје које стоје иза покретања WebAssembly-a у веб прегледачу су:

  • Меморија: У WebAssembly-у, меморијом се управља и приступа се путем инструкција за приступ меморији ниског нивоа. У техничком смислу, то је ArrayBuffer који се може модификовати и садржи низ меморијских бајтова.
  • Модул: Модул у WebAssembly-у је компајлирани извршни машински код. Због своје природе без стања, веб прегледач компајлира Модул и дели га између прозора (Windows) и радника (workers). Поред тога, Модул чува и дефинише увозе и извозе, као и функције, табеле, типове, глобалне променљиве и меморију.
  • Табела: Табела се састоји од свих референци и функција, користећи низ типова који се могу мењати. Ово елиминише потребу за складиштењем неструктурираних бајтова у меморији.
  • Инстанца: У WASM-у, инстанца представља модул у току извршавања, са свим његовим стањима упареним. Ова стања укључују табелу, меморију и све увезене вредности.

Кључне идеје WASM-а

Као веб програмер, можете користити JavaScript API за позивање и дефинисање модула, табела и инстанци. Штавише, можете користити JavaScript за синхроно позивање WASM извоза унутар JavaScript функција. Дакле, JavaScript и WebAssembly добро функционишу заједно, омогућавајући вам да користите WASM за развој апликација високих перформанси у веб прегледачима.

WASM Објекти

Приликом рада са WebAssembly-ем, треба да будете упознати са осам WASM објеката. Ти објекти укључују:

  • WebAssembly.Global – Глобални објекат је инстанца глобалне променљиве. Приступачно је путем WebAssembly.Module и JavaScript-a.
  • WebAssembly.Module – Овде објекат Module садржи WASM код без стања. Код је већ унапред компајлиран.
  • WebAssembly.Instance – WebAssembly.Instance је извршна инстанца WebAssembly.Module са стањем.
  • WebAssembly.Table – Објекат Table чува референце функција и функционише као JavaScript омотач.
  • WebAssembly.CompileError – CompileError објекат чува све грешке током процеса валидације и декодирања.
  • WebAssembly.RuntimeError – RuntimeError објекат приказује све грешке које се јављају током извршавања.
  • WebAssembly.LinkError – LinkError објекат чува грешке које се дешавају током процеса инстанцирања модула.

Примери и Пројекти који користе WASM

Већ је познато да WebAssembly омогућава перформансе блиске изворном коду у веб прегледачу. Међутим, да бисте схватили где се све може користити, потребно је да се погледају примери његове примене. У наставку су наведени неки од примера употребе WASM-а.

Примена WebAssembly-a се простире и унутар и изван прегледача. На пример, ако желите да користите WASM у прегледачу, можете радити разне ствари, укључујући:

  • Видео или аудио обрада, као што је пројекат ffmpegwasm.
  • Видео игре у веб прегледачу, као што су ове игре високих перформанси.
  • Научна визуализација и симулација.
  • Емулација/симулација платформи као што су DOSBox, MAME, итд.
  • Енкрипција.
  • Даљинска радна површина.
  • Алати за програмере.

Примери употребе

Са општег становишта, убедљиви примери примене WebAssembly-a укључују:

  • Могућност писања бржег кода, који може у потпуности искористити хардверске ресурсе.
  • Поред тога, могуће је извршити компресију на клијентској страни, што резултира бржим учитавањем и уштедом пропусног опсега. Дакле, можете користити процесор клијента или хардвер за компресију и декомпресију, а не ресурсе сервера.
  • Такође, можете користити различите програмске језике за писање кода за веб, а не само JavaScript. На пример, можете користити Rust, C и C++ за писање високо-перформантног кода за одређене делове ваших веб апликација.

Пројекти

Када говоримо о конкретним примерима, вреди поменути следеће пројекте.

  • Figma је значајно побољшала перформансе своје веб апликације користећи WebAssembly. Смањили су време учитавања приликом иницијализације апликације, приказа целог дизајна, па чак и преузимања дизајнерских фајлова. Као што је раније напоменуто, WebAssembly је такође одличан за компресију. Figma је имплементирала WASM како би побољшала величину преузимања, значајно је смањивши.
  • Pyoide: Још један интересантан WASM пројекат је Pyoide, који је развио Mozilla. Омогућава научницима да компајлирају Питхон научни скуп у WebAssembly, укључујући NumPy, SciPy, Scikit-learn, итд., директно у прегледач. Омогућава транспарентну конверзију објеката између Питхон-а и JavaScript-a. Такође, омогућава програмерима да користе веб API-је у Питхон-у.
  • Blazor WebAssembly: Blazor WebAssembly је оквир који омогућава програмерима да праве једностраничне, клијентске и интерактивне веб апликације помоћу .NET-а. Ове апликације могу се хостовати у прегледачу користећи .NET runtime заснован на WebAssembly-u. Овде, као програмер, добијате приступ функционалности прегледача у вашем .NET коду кроз WebAssembly JavaScript API.

Извор: Figma

Многи други познати и вредни пројекти користе WebAssembly, као што су Binaryen, Cheerp, Forest, Grain и други.

Закључак

WebAssembly можда није најлакши за почетнике. Међутим, проучавањем његових примера употребе и кључних концепата, можете стећи јасно разумевање његових могућности.

Са растућим бројем узбудљивих пројеката, сада је одлично време да научите WebAssembly, посебно ако се бавите веб развојем. WASM-ова способност да функционише и ван прегледача чини га одличним избором за развој апликација које захтевају високе перформансе.

Да ли вам се допао овај чланак? Зашто га не бисте поделили са другима?