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
1k
Давайте все заблокируем
hellsquirrel
0
330
Wasmысле?
hellsquirrel
0
240
Магия декларативныx схем.
hellsquirrel
0
350
ML for HolyJS
hellsquirrel
0
160
Идеальный способ заблюрить белочку
hellsquirrel
0
170
ML/DL на фронте
hellsquirrel
0
210
InsertableStreams
hellsquirrel
0
98
WebRTC-404
hellsquirrel
0
540
Other Decks in Programming
See All in Programming
AIエージェントでのJava開発がはかどるMCPをAIを使って開発してみた / java mcp for jjug
kishida
4
630
GraalVM Native Image トラブルシューティング機能の最新状況(2025年版)
ntt_dsol_java
0
140
仕様がそのままテストになる!Javaで始める振る舞い駆動開発
ohmori_yusuke
8
4.1k
Tangible Code
chobishiba
3
560
CSC509 Lecture 10
javiergs
PRO
0
170
ビルドプロセスをデバッグしよう!
yt8492
0
310
チーム開発の “地ならし"
konifar
7
4.5k
「正規表現をつくる」をつくる / make "make regex"
makenowjust
1
410
Claude Code on the Web を超える!? Codex Cloud の実践テク5選
sunagaku
0
550
Amazon Bedrock Knowledge Bases Hands-on
konny0311
0
150
JEP 496 と JEP 497 から学ぶ耐量子計算機暗号入門 / Learning Post-Quantum Crypto Basics from JEP 496 & 497
mackey0225
2
280
Chart.jsで長い項目を表示するときのハマりどころ
yumechi
0
110
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
670
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Documentation Writing (for coders)
carmenintech
76
5.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Facilitating Awesome Meetings
lara
57
6.6k
How GitHub (no longer) Works
holman
315
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Speed Design
sergeychernyshev
32
1.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
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