$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WASM
Search
Polina Gurtovaya
January 22, 2020
Programming
2
220
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
340
Wasmысле?
hellsquirrel
0
250
Магия декларативныx схем.
hellsquirrel
0
360
ML for HolyJS
hellsquirrel
0
170
Идеальный способ заблюрить белочку
hellsquirrel
0
180
ML/DL на фронте
hellsquirrel
0
220
InsertableStreams
hellsquirrel
0
100
WebRTC-404
hellsquirrel
0
540
Other Decks in Programming
See All in Programming
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
syumai
7
2.2k
AIコーディングエージェント(skywork)
kondai24
0
180
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
360
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
270
GISエンジニアから見たLINKSデータ
nokonoko1203
0
160
Cell-Based Architecture
larchanjo
0
130
Flutter On-device AI로 완성하는 오프라인 앱, 박제창 @DevFest INCHEON 2025
itsmedreamwalker
1
120
FluorTracer / RayTracingCamp11
kugimasa
0
240
AIエージェントを活かすPM術 AI駆動開発の現場から
gyuta
0
440
チームをチームにするEM
hitode909
0
350
Cap'n Webについて
yusukebe
0
140
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
2
220
Featured
See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
310
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Writing Fast Ruby
sferik
630
62k
The Invisible Side of Design
smashingmag
302
51k
Agile that works and the tools we love
rasmusluckow
331
21k
Are puppies a ranking factor?
jonoalderson
0
2.3k
It's Worth the Effort
3n
187
29k
The Language of Interfaces
destraynor
162
25k
Raft: Consensus for Rubyists
vanstee
141
7.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
141
34k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Stop Working from a Prison Cell
hatefulcrawdad
273
21k
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