Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WASM
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Polina Gurtovaya
January 22, 2020
Programming
240
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
1k
Давайте все заблокируем
hellsquirrel
0
360
Wasmысле?
hellsquirrel
0
270
Магия декларативныx схем.
hellsquirrel
0
390
ML for HolyJS
hellsquirrel
0
190
Идеальный способ заблюрить белочку
hellsquirrel
0
190
ML/DL на фронте
hellsquirrel
0
240
InsertableStreams
hellsquirrel
0
120
WebRTC-404
hellsquirrel
0
570
Other Decks in Programming
See All in Programming
Spec Driven Development | AI Summit Lisbon
danielsogl
PRO
0
170
例外の正しい扱い方 そのエラー try-catchして大丈夫?
jinwatanabe
0
180
LLMによるContent Moderationの本番運用の裏側と品質担保への挑戦
suikabar
2
270
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
daitasu
0
200
Javaの型とAI時代に型が大事な理由 / java types and type in AI era
kishida
2
120
メソッドのジェネリクスでGoの夢は広がるか? / Kyoto.go #65
utgwkk
3
660
Hunting Vulnerabilities in Symfony with LLMs
vinceamstoutz
0
530
Vite+ Unified Toolchain for the Web
naokihaba
0
220
Webフレームワークの ベンチマークについて
yusukebe
0
150
AI駆動開発で崩れていくコードベースを立て直す
kyoko_nr_nr
1
450
AIチームを指揮するOSS「TAKT」活用術 / How to Use “TAKT,” an OSS Tool for Orchestrating AI Teams
nrslib
6
860
AIとASP.NET Coreで雑Webアプリを作った話
mayuki
0
480
Featured
See All Featured
Un-Boring Meetings
codingconduct
0
310
Navigating Team Friction
lara
192
16k
Unlocking the hidden potential of vector embeddings in international SEO
frankvandijk
0
840
Stewardship and Sustainability of Urban and Community Forests
pwiseman
0
220
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
270
End of SEO as We Know It (SMX Advanced Version)
ipullrank
3
4.2k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
1.4k
Visualization
eitanlees
152
17k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
2
290
Prompt Engineering for Job Search
mfonobong
0
340
Transcript
WASM
Давным-давно, когда кода на С++ было много, а на JS
мало 2 Появился emscripten
3
И зачем тогда изобретать велосипед? 4 Потому что JS слишком
долго парсить. Говорят что WASM в 20 раз быстрее Кое-что, связанное со скоростью, но об этом позже
Опыт “портирования” позволил быстро запилить `emcc WASM=1` 5
Смотрим демку 6
На самом деле все примерно так 7 "emcc -O3 -s
WASM=1 -s ENVIRONMENT=\"web\" -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s MODULARIZE=1 -s ‘EXPORT_NAME=\”blah-blah\"' -I src/wasm/ libwebp src/wasm/libwebp/src/ {dec,dsp,demux,enc,mux,utils}/*.c -I src/wasm/zlib src/ wasm/zlib/inf*.c src/wasm/zlib/ {zutil.c,adler32.c,crc32.c} -o src/wasm/encoders.js src/ wasm/encoders.c"
А что насчет RUST? 8 https://rustwasm.github.io/wasm-pack/installer/ https://rustwasm.github.io/docs/book/game-of-life/setup.html
AssemblyScript — почти как typescript, но компилируется в WASM 9
10 Это была история про portability
А теперь начинается история про WASM 11
WASM — binary instruction format for a stack-based virtual machine
12
WASM для WEB ? 13
Принципы: • Модульность из коробки • Живет в песочнице •
Работает быстро • Не ломает Web
У WASM есть спека (даже не одна) И там ни
слова о web :) 15 A WebAssembly implementation will typically be embedded into a host environment. An embedder implements the connection between such a host environment and the WebAssembly semantics.
У WASM 2 формата 16
Так как бинарники особо не поразбираешь, давайте поговорим про текстовый
формат 17
Выглядит он вот так: 18 (module (func $i (import "imports"
"logger") (param i32)) (memory (import "imports" "importedMemory") 1) (func (export "exportedFunc") i32.const 42 call $i) (func (export "add") (param i32 i32) (result i32) local.get 0 local.get 1 i32.add) (data (i32.const 0) "Fifty"))
Демка wat2wasm 19
Локальная демка 20
Окей, что насчет скорости? 21
Как работает JS в браузере на примере V8 22 V8
это движок, написаный на C++. Он используется с Chromium и NodeJS. V8 заставляет код работать. Раньше это был только JS код. Теперь это JS и WASM
23
Как работает компилятор? :) 24 Сложно он работает :)
25
В общем: 26 Как быстро произойдет “interactive” предсказать сложно Скорость
*не* определяется размером бандла (хотя это афектит) На мобилках все может быть в 5 раз медленнее
27
Помните вот это? 28 WebAssembly.instantiateStreaming WASM можно компилировать еще *до*
загрузки
WASM = predictable performance 29
Статус WASM: MVP 30 Пока лучше всего поддерживается компиляция из
С/C++ Работает в V8 примерно с февраля 2017 LLVM based-projects Все достаточно “сыро”
WASM дополняет JavaScript а не заменяет 31
32 Примерчики с MDN