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
140
WASM
WebAssebmly for beginners
Polina Gurtovaya
January 22, 2020
Tweet
Share
More Decks by Polina Gurtovaya
See All by Polina Gurtovaya
Не учите алгоритмы
hellsquirrel
1
810
Давайте все заблокируем
hellsquirrel
0
260
Wasmысле?
hellsquirrel
0
150
Магия декларативныx схем.
hellsquirrel
0
310
ML for HolyJS
hellsquirrel
0
77
Идеальный способ заблюрить белочку
hellsquirrel
0
93
ML/DL на фронте
hellsquirrel
0
130
InsertableStreams
hellsquirrel
0
58
WebRTC-404
hellsquirrel
0
450
Other Decks in Programming
See All in Programming
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.6k
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
XStateでReactに秩序を与えたい
gizm000
0
730
今インフラ技術をイチから学び直すなら
yuhta28
1
140
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
状態管理ライブラリZustandの導入から運用まで
k1tikurisu
3
470
Architecture Decision Record (ADR)
nearme_tech
PRO
1
690
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
GraphQLの魅力を引き出すAndroidクライアント実装
morux2
3
660
Prolog入門
qnighy
4
1k
Featured
See All Featured
How to Ace a Technical Interview
jacobian
274
23k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Building Adaptive Systems
keathley
36
2.1k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Designing with Data
zakiwarfel
98
5k
Designing for humans not robots
tammielis
248
25k
Teambox: Starting and Learning
jrom
131
8.7k
Raft: Consensus for Rubyists
vanstee
135
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
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