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
190
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
880
Давайте все заблокируем
hellsquirrel
0
270
Wasmысле?
hellsquirrel
0
190
Магия декларативныx схем.
hellsquirrel
0
320
ML for HolyJS
hellsquirrel
0
110
Идеальный способ заблюрить белочку
hellsquirrel
0
130
ML/DL на фронте
hellsquirrel
0
170
InsertableStreams
hellsquirrel
0
73
WebRTC-404
hellsquirrel
0
490
Other Decks in Programming
See All in Programming
なぜselectはselectではないのか
taiyow
2
280
AIエージェントを活用したアプリ開発手法の模索
kumamotone
1
730
requirements with math
moony
0
510
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
2.9k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
500
eBPF Updates (March 2025)
kentatada
0
120
RubyKaigiで手に入れた HHKB Studioのための HIDRawドライバ
iberianpig
0
180
ローコードサービスの進化のためのモノレポ移行
taro28
1
320
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
RCPと宣言型ポリシーについてのお話し
kokitamura
2
140
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
100
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
180
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
How to Ace a Technical Interview
jacobian
276
23k
The Invisible Side of Design
smashingmag
299
50k
Embracing the Ebb and Flow
colly
84
4.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.6k
We Have a Design System, Now What?
morganepeng
51
7.5k
Become a Pro
speakerdeck
PRO
26
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Language of Interfaces
destraynor
156
24k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
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