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
Polina Gurtovaya
January 22, 2020
Programming
2
200
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
920
Давайте все заблокируем
hellsquirrel
0
290
Wasmысле?
hellsquirrel
0
200
Магия декларативныx схем.
hellsquirrel
0
330
ML for HolyJS
hellsquirrel
0
130
Идеальный способ заблюрить белочку
hellsquirrel
0
140
ML/DL на фронте
hellsquirrel
0
180
InsertableStreams
hellsquirrel
0
81
WebRTC-404
hellsquirrel
0
500
Other Decks in Programming
See All in Programming
Boast Code Party / RubyKaigi 2025 After Event
lemonade_37
0
310
知識0からカンファレンスやってみたらこうなった!
syossan27
5
320
Cache Strategies with Redisson & Exposed
debop
0
120
バリデーションライブラリ徹底比較
nayuta999999
1
210
『Python → TypeScript』オンボーディング奮闘記
takumi_tatsuno
1
120
Storybookの情報をMCPサーバー化する
shota_tech
3
1.6k
iOSアプリ開発もLLMで自動運転する
hiragram
6
1.9k
PT AI без купюр
v0lka
0
150
JSAI2025 RecSysChallenge2024 優勝報告
unonao
1
300
人には人それぞれのサービス層がある
shimabox
2
310
當開發遇上包裝:AI 如何讓產品從想法變成商品
clonn
0
110
tsconfigのオプションで変わる型世界
keisukeikeda
1
110
Featured
See All Featured
Making Projects Easy
brettharned
116
6.2k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Navigating Team Friction
lara
185
15k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Building Applications with DynamoDB
mza
95
6.4k
Practical Orchestrator
shlominoach
187
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Speed Design
sergeychernyshev
30
960
GraphQLとの向き合い方2022年版
quramy
46
14k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
A designer walks into a library…
pauljervisheath
205
24k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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