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
250
Магия декларативныx схем.
hellsquirrel
0
360
ML for HolyJS
hellsquirrel
0
160
Идеальный способ заблюрить белочку
hellsquirrel
0
170
ML/DL на фронте
hellsquirrel
0
210
InsertableStreams
hellsquirrel
0
99
WebRTC-404
hellsquirrel
0
540
Other Decks in Programming
See All in Programming
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
minodriven
10
3.3k
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
120
Agentに至る道 〜なぜLLMは自動でコードを書けるようになったのか〜
mackee
5
2k
DartASTとその活用
sotaatos
2
150
AIと協働し、イベントソーシングとアクターモデルで作る後悔しないアーキテクチャ Regret-Free Architecture with AI, Event Sourcing, and Actors
tomohisa
2
8.6k
GraalVM Native Image トラブルシューティング機能の最新状況(2025年版)
ntt_dsol_java
0
170
All(?) About Point Sets
hole
0
210
Eloquentを使ってどこまでコードの治安を保てるのか?を新人が考察してみた
itokoh0405
0
3.2k
『実践MLOps』から学ぶ DevOps for ML
nsakki55
2
470
AWS CDKの推しポイントN選
akihisaikeda
1
180
チーム開発の “地ならし"
konifar
8
6k
Private APIの呼び出し方
kishikawakatsumi
3
900
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Scaling GitHub
holman
464
140k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
How STYLIGHT went responsive
nonsquared
100
5.9k
Bash Introduction
62gerente
615
210k
Done Done
chrislema
186
16k
Producing Creativity
orderedlist
PRO
348
40k
Designing Experiences People Love
moore
142
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
How GitHub (no longer) Works
holman
315
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
680
Git: the NoSQL Database
bkeepers
PRO
432
66k
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