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
210
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
980
Давайте все заблокируем
hellsquirrel
0
310
Wasmысле?
hellsquirrel
0
230
Магия декларативныx схем.
hellsquirrel
0
350
ML for HolyJS
hellsquirrel
0
150
Идеальный способ заблюрить белочку
hellsquirrel
0
160
ML/DL на фронте
hellsquirrel
0
200
InsertableStreams
hellsquirrel
0
93
WebRTC-404
hellsquirrel
0
520
Other Decks in Programming
See All in Programming
Ruby Parser progress report 2025
yui_knk
1
440
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2.5k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
380
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Reading Rails 1.0 Source Code
okuramasafumi
0
230
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
220
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
450
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Music & Morning Musume
bryan
46
6.8k
RailsConf 2023
tenderlove
30
1.2k
A Modern Web Designer's Workflow
chriscoyier
696
190k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Faster Mobile Websites
deanohume
309
31k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
379
70k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
246
12k
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