У четвртом делу ВебАссембли-а за почетнике, пажљиво ћемо погледати ВебАссембли и ЈаваСцрипт пратњу.
Овде ћете научити како да користите ВебАссембли у свом ЈаваСцрипт-у. Поред тога, истражићемо и ВебАссембли ЈаваСцрипт АПИ.
ВебАссемебли је отворени стандард бинарног формата који омогућава програмерима да покрећу апликације са изворним перформансама у претраживачима. Ако нисте читали о томе, предлажемо да погледате претходне делове нашег водича.
Хајде да почнемо.
Преглед садржаја
Коришћење ВебАссембли-а са ЈаваСцрипт-ом
У нашем ВебАссембли, први део туторијала, разговарали смо о томе како ВАСМ функционише. Да бисте написали код са високим учинком за своју веб апликацију, морате да користите ВАСМ АПИ-је и функције у ЈаваСцрипт-у. Такође смо разговарали о томе како ЈаваСцрипт оквири могу да користе ВАСМ за креирање апликација високих перформанси.
Међутим, тренутно не можете учитати ВАСМ модуле као што су ЕС6 модули користећи <сцрипт типе=” модуле”>. Ту долази ЈаваСцрипт. Помаже у учитавању и компајлирању ВАСМ-а у претраживачу. Тачни кораци за то су следећи:
- Учитајте .васм бајтове у АрраиБуффер или укуцани низ.
- Користите ВебАссембли.Модуле за компајлирање бајтова.
- Сада инстанцирајте ВебАссембли.Модуле са увозом да бисте добили извозе који се могу позвати
Дакле, морате да почнете са унапред компајлираним ВАСМ модулом. Овде имате много избора. Можете да користите Руст, Ц/Ц++, АссемблиСцрипт, па чак и ТиниГо(Го) да напишете свој код и касније га трансформишете у .васм модул.
Технички, ВебАссембли је циљ компилације за језике. То значи да ћете морати да напишете код на језику који изаберете, а затим да користите генерисани бинарни код унутар апликације (веб или не-веб). Поред тога, ако намеравате да га користите на серверима, мораћете да користите ВАСИ за повезивање са системима.
Како ВебАссембли користи линеарну меморију преко проширивог низа, и ЈаваСцрипт и ВАСМ могу да јој приступе синхроно, дајући вам могућност да пишете брзе апликације богате функцијама.
ВебАссембли и ЈаваСцрипт примери
Хајде да користимо примере да научимо како можете да користите ВАСМ са ЈаваСцрипт-ом.
Као што је горе поменуто, потребан вам је унапред компајлирани ВАСМ модул. За овај пример користићемо Емсцриптен (Ц/Ц++). Пошто ВАСМ нуди бинарни формат високих перформанси, можемо покренути генерисани код заједно са ЈаваСцрипт-ом или другим језицима.
Подешавање алата
Пошто користимо Емсцриптен, морамо да набавимо емсдк алат. То ће вам омогућити да преведете свој Ц/Ц++ код у .васм код.
Једноставно покрените следећу команду у свом терминалу. Ако немате инсталиран ГИТ, пратите наш Опен Соурце 101: Систем контроле верзија и водич за Гит да бисте то урадили.
git clone https://github.com/emscripten-core/emsdk.git cd emsdk
#Output [email protected]:~/Projects/WASM2$ git clone https://github.com/emscripten-core/emsdk.git Cloning into 'emsdk'... remote: Enumerating objects: 3566, done. remote: Counting objects: 100% (62/62), done. remote: Compressing objects: 100% (49/49), done. remote: Total 3566 (delta 31), reused 38 (delta 13), pack-reused 3504 Receiving objects: 100% (3566/3566), 2.09 MiB | 2.24 MiB/s, done. Resolving deltas: 100% (2334/2334), done. [email protected]:~/Projects/WASM2$ cd emsdk [email protected]:~/Projects/WASM2/emsdk$
У фасцикли емдск позивамо другу команду да добијемо најновију верзију Емсцриптен-а спремну за коришћење.
Да бисте то урадили, потребно је да покренете следеће команде.
./emsdk install latest ./emsdk activate latest source ./emsdk_env.sh
#Output [email protected]:~/Projects/WASM2/emsdk$ ./emsdk install latest Resolving SDK alias 'latest' to '3.1.31' Resolving SDK version '3.1.31' to 'sdk-releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit' Installing SDK 'sdk-releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit'.. Installing tool 'node-14.18.2-64bit'.. Downloading: /home/nitt/Projects/WASM2/emsdk/zips/node-v14.18.2-linux-x64.tar.xz from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v14.18.2-linux-x64.tar.xz, 21848416 Bytes Unpacking '/home/nitt/Projects/WASM2/emsdk/zips/node-v14.18.2-linux-x64.tar.xz' to '/home/nitt/Projects/WASM2/emsdk/node/14.18.2_64bit' Done installing tool 'node-14.18.2-64bit'. Installing tool 'releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit'.. Downloading: /home/nitt/Projects/WASM2/emsdk/zips/1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-wasm-binaries.tbz2 from https://storage.googleapis.com/webassembly/emscripten-releases-builds/linux/1eec24930cb2f56f6d9cd10ffcb031e27ea4157a/wasm-binaries.tbz2, 349224945 Bytes Unpacking '/home/nitt/Projects/WASM2/emsdk/zips/1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-wasm-binaries.tbz2' to '/home/nitt/Projects/WASM2/emsdk/upstream' Done installing tool 'releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit'. Done installing SDK 'sdk-releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit'. [email protected]:~/Projects/WASM2/emsdk$ ./emsdk activate latest Resolving SDK alias 'latest' to '3.1.31' Resolving SDK version '3.1.31' to 'sdk-releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit' Setting the following tools as active: node-14.18.2-64bit releases-1eec24930cb2f56f6d9cd10ffcb031e27ea4157a-64bit Next steps: - To conveniently access emsdk tools from the command line, consider adding the following directories to your PATH: /home/nitt/Projects/WASM2/emsdk /home/nitt/Projects/WASM2/emsdk/node/14.18.2_64bit/bin /home/nitt/Projects/WASM2/emsdk/upstream/emscripten - This can be done for the current shell by running: source "/home/nitt/Projects/WASM2/emsdk/emsdk_env.sh" - Configure emsdk in your shell startup scripts by running: echo 'source "/home/nitt/Projects/WASM2/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile
Последња команда, „соурце ./емсдк_енв.сх“. Осигурава да је путања емцц Емсцриптен компајлерског алата постављена и да је можете користити за компајлирање кода.
#Output [email protected]:~/Projects/WASM2/emsdk$ source ./emsdk_env.sh Setting up EMSDK environment (suppress these messages with EMSDK_QUIET=1) Adding directories to PATH: PATH += /home/nitt/Projects/WASM2/emsdk PATH += /home/nitt/Projects/WASM2/emsdk/upstream/emscripten PATH += /home/nitt/Projects/WASM2/emsdk/node/14.18.2_64bit/bin Setting environment variables: PATH = /home/nitt/Projects/WASM2/emsdk:/home/nitt/Projects/WASM2/emsdk/upstream/emscripten:/home/nitt/Projects/WASM2/emsdk/node/14.18.2_64bit/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin EMSDK = /home/nitt/Projects/WASM2/emsdk EMSDK_NODE = /home/nitt/Projects/WASM2/emsdk/node/14.18.2_64bit/bin/node [email protected]:~/Projects/WASM2/emsdk$
Сада морамо да генеришемо васм код покретањем следеће команде.
emcc hello-techblog.co.rs.c -o hello-techblog.co.rs.js
#Output [email protected]:~/Projects/WASM2$ emcc hello-techblog.co.rs.c -o hello-techblog.co.rs.js shared:INFO: (Emscripten: Running sanity checks) cache:INFO: generating system asset: symbol_lists/1c683af19e290d0b5ca7a8747d74a76f63dcb362.txt... (this will be cached in "/home/nitt/Projects/WASM2/emsdk/upstream/emscripten/cache/symbol_lists/1c683af19e290d0b5ca7a8747d74a76f63dcb362.txt" for subsequent builds) cache:INFO: - ok [email protected]:~/Projects/WASM2$ dir emsdk hello-techblog.co.rs.c hello-techblog.co.rs.js hello-techblog.co.rs.wasm [email protected]:~/Projects/WASM2$
Као што видите, добијате излаз „хелло-вдзвдз.јс“ и хелло-вдзвдз.васм. Можете проверити датотеке покретањем дир у директоријуму пројекта.
Оба ова фајла су неопходна. хелло-геефкларе.васм садржи компајлирани код. Датотека хелл-геефкларе.јс, с друге стране, има ЈаваСцрипт потребан за покретање. Пошто Емсцриптен подржава веб и ноде.јс извршавање, можемо га тестирати са Нодеом.
node hello-techblog.co.rs.js
#Output [email protected]:~/Projects/WASM2$ node hello-techblog.co.rs.js Hello, techblog.co.rs! [email protected]:~/Projects/WASM2$
Ако желите да га видите како ради на вебу, можете да генеришете ХТМЛ датотеку помоћу Емсцриптен-а. Да бисте то урадили, покрените следећу команду.
emcc hello-techblog.co.rs.c -o hello-techblog.co.rs.html
#Output [email protected]:~/Projects/WASM2$ emcc hello-techblog.co.rs.c -o hello-techblog.co.rs.html [email protected]:~/Projects/WASM2$
Да бисте покренули ХТМЛ датотеку, можете користити Питхон 3 ХТТПСервер тако што ћете покренути следећу команду.
питхон3 -м ХТТП.сервер 8000
Сада идите на хттп://лоцалхост:8000/хелло-вдзвдз.хтмл да видите излаз.
Напомена: Већина система долази са унапред инсталираним Питхон-ом. Ако не, можете га лако инсталирати пре него што покушате да покренете Питхон3 сервер.
Коришћење ЈаваСцрипт АПИ-ја за рад са ВАСМ-ом
Овај одељак ће детаљније погледати ЈаваСцрипт ВАСМ АПИ. Уз то ћемо научити како да учитамо ВАСМ код и извршимо га. Али прво, погледајмо код испод.
fetch('hello-techblog.co.rs.wasm').then( response =>
response.arrayBuffer())
.then (bytes =>
WebAssembly.instantiate(bytes))
.then(result=>
alert(result.instance.exports.answer()))
Горњи код користи следеће ЈаваСцрипт АПИ-је.
- фетцх() АПИ претраживача
- ВебАссембли.инстантиате
Осим ових, постоје и други АПИ-ји вредни пажње. Ови укључују:
- ВебАссембли.цомпиле
- ВебАссембли.инстанце
- ВебАссембли.инстантиате
- ВебАссембли.инстантиатеСтреаминг
фетцх() АПИ претраживача
Фетцх() АПИ учитава .васм мрежни ресурс. Ако покушавате да га учитате локално, морате да онемогућите дељење ресурса са више извора да бисте учитали мрежни ресурс. У супротном, можете користити сервер чворова да то уради уместо вас. Да бисте инсталирали и покренули сервер чворова, покрените следећу команду.
sudo apt install npm
Затим покрените следећу команду да покренете сервер.
npx http-server -o
#Output http-server version: 14.1.1 http-server settings: CORS: disabled Cache: 3600 seconds Connection Timeout: 120 seconds Directory Listings: visible AutoIndex: visible Serve GZIP Files: false Serve Brotli Files: false Default File Extension: none Available on: http://127.0.0.1:8080 http://192.168.0.107:8080 Hit CTRL-C to stop the server Open: http://127.0.0.1:8080 [2023-01-28T19:22:21.137Z] "GET /" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.70" (node:37919) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated (Use `node --trace-deprecation ...` to show where the warning was created) [2023-01-28T19:22:21.369Z] "GET /favicon.ico" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36 Edg/109.0.1518.70" [2023-01-28T19:22:21.369Z] "GET /favicon.ico" Error (404): "Not found"
Отвориће се веб прегледач у којем можете видети све своје пројектне датотеке.
Сада отворите хелло-геефкларе.хтмл и покрените алате за веб програмере. Тамо отворите конзолу и откуцајте следеће.
фетцх(“хелло-вдзвдз.васм”);
Вратиће следеће обећање.
#Output
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Response
body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://127.0.0.1:8080/hello-techblog.co.rs.wasm"
[[Prototype]]: Response
Такође можете написати следећу скрипту и покренути је кроз ХТМЛ.
Да бисте покренули ваше васм модуле на серверу, потребно је да користите следећи код у Ноде.јс.
const fs = require('fs');
const run = async() => {
const buffer = fs.readFileSync("./hello-techblog.co.rs.wasm");
const result = await WebAssembly.instantiate(buffer);
console.log(result.instance.exports.answer());
};
run();
Предлажемо да прочитате документацију ВебАссембли ЈаваСцрипт АПИ-ја да бисте сазнали више о томе.
ЈаваСцрипт вс. ВАСМ
Да бисмо разумели повезаност између ВАСМ-а и ЈаваСцрипт-а, такође морамо да их упоредимо. У суштини, ВАСМ је бржи и има бинарни формат за циљну компилацију, док је ЈаваСцрипт језик високог нивоа. ВАСМ-ов бинарни код отежава учење, али постоје начини за ефикасан рад са ВАСМ-ом.
Кључна разлика између ВАСМ-а и ЈаваСцрипт-а укључује следеће:
- ВАСМ је компајлирани језик, док је ЈС интерпретирани језик. Прегледач мора да преузме и рашчлани ЈаваСцрипт у току извршавања, док је ВАСМ код спреман за извршавање са својим унапред компајлираним кодом.
- ВебАссембли је језик ниског нивоа. Насупрот томе, ЈаваСцрипт је језик високог нивоа. Пошто је на високом нивоу, ЈС је лак за рад. Међутим, ВАСМ на ниском нивоу може да се изврши много брже од ЈаваСцрипт-а.
- На крају, ЈаваСцрипт има користи од своје велике заједнице. Дакле, ако тражите боље искуство у развоју, ЈС је очигледан избор. ВебАссембли је, с друге стране, релативно нов и стога му недостају ресурси.
Као програмер, не морате да бринете о избору једног. То је зато што и ЈС и ВАСМ раде заједно, а не једни против других.
Дакле, ако пишете апликацију високих перформанси, можда ћете желети да користите ВебАссембли да кодирате само делове који захтевају перформансе. ЈаваСцрипт АПИ вам може помоћи да преузмете и користите ВАСМ модуле директно у свој ЈаваСцрипт код.
Последње мисли
На крају, ВебАссембли је одличан пратилац ЈаваСцрипт-а. Позива програмере да креирају апликације високих перформанси на вебу и ван њега. Штавише, то ради без покушаја да замени ЈаваСцрипт.
Међутим, да ли ће ВАСМ еволуирати у комплетан пакет и заменити ЈаваСцрипт? Па, то је вероватно, није могуће, с обзиром на циљеве ВебАссембли-а. Међутим, идеја да ВебАссембли замени ЈаваСцрипт у будућности није сасвим оповргнута.
Затим погледајте најбоље ЈаваСцрипт (ЈС) УИ библиотеке за прављење модерних апликација.