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
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Polina Gurtovaya
January 22, 2020
Programming
240
2
Share
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
180
Идеальный способ заблюрить белочку
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
過去のレビュー知見をSkillsで資産化した話
pkshadeck
PRO
1
2.2k
Kubernetesを使わない環境にもCloud Nativeなデプロイを実現する / Enabling Cloud Native deployments without the complexity of Kubernetes
linyows
3
450
AlarmKitで明後日起きれるアラームアプリを作る
trickart
0
140
Copilot CLI の継戦能力を高める コンテキスト管理
nozomutu
1
510
なぜあなたのコードには「コシ」がないのか?〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
shogogg
0
220
CLIであることを活かしたGitHub Copilot CLI活用術 / GitHub Copilot CLI Pro Tips & Tricks
nao_mk2
1
540
GitHub Copilot CLIのいいところ
htkym
2
560
サーバーレスで作る、動画データ管理基盤
oyasumipants
0
240
開発体験を左右するライブラリの API 設計 - GraphQL スキーマ構築ライブラリから考える #tskaigi
izumin5210
2
370
tsserverとは何だったのか_これからどうなるのか
nowaki28
1
310
These Five Tricks Can Make Your Apps Greener, Cheaper, & Nicer
hollycummins
0
120
ビジネスモデルから紐解く、AI+型駆動開発
hirokiomote
2
1.1k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.7k
Speed Design
sergeychernyshev
33
1.7k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
290
Faster Mobile Websites
deanohume
310
31k
The Pragmatic Product Professional
lauravandoore
37
7.3k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.2k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
300
Discover your Explorer Soul
emna__ayadi
2
1.1k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
61
44k
What does AI have to do with Human Rights?
axbom
PRO
1
2.1k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.2k
Writing Fast Ruby
sferik
630
63k
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