Slide 1

Slide 1 text

Wasm 101

Slide 2

Slide 2 text

2

Slide 3

Slide 3 text

3

Slide 4

Slide 4 text

4

Slide 5

Slide 5 text

5 Ссылка на слайды и прочие материалы будет в конце доклада

Slide 6

Slide 6 text

Wasm 101

Slide 7

Slide 7 text

7 Wasm можно использовать везде кроме IE

Slide 8

Slide 8 text

8 WebAssembly Core

Slide 9

Slide 9 text

9 WebAssembly is a binary instruction format for a stack-based virtual machine.

Slide 10

Slide 10 text

10 (func (export "add") (param i32) (param i32) (result i32) local.get 0 local.get 1 i32.add) add(1, 2) Module Memory Function Instruction Table

Slide 11

Slide 11 text

11 .wasm и .wat У WebAssembly есть текстовое представление

Slide 12

Slide 12 text

12 (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"))

Slide 13

Slide 13 text

Embeddings 13

Slide 14

Slide 14 text

Wasm и JavaScript — лучшие друзья 14 (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) "tver.io")) const importedMemory = new WebAssembly.Memory({ initial: 1, maximum: 10 }); WebAssembly.instantiateStreaming(fetch("simple.wasm"), { imports: { logger: function(arg) { console.log("first function call", arg); }, importedMemory } }).then(obj => { obj.instance.exports.exportedFunc(); const three = obj.instance.exports.add(1, 2); console.log("1 + 2 =", three); var memoryArray = new Uint32Array(importedMemory.buffer, 0, 10); console.log( "reading from memory", new TextDecoder("utf8").decode(memoryArray) ); });

Slide 15

Slide 15 text

Мы поняли, что: Wasm = IR Wasm легко парсить Wasm = легкий формат Wasm = песочница 15

Slide 16

Slide 16 text

Portability в примерах Pyodide Squoosh Unity 16

Slide 17

Slide 17 text

17 WebAssembly embeddings

Slide 18

Slide 18 text

18 Wasm это технология для Web?

Slide 19

Slide 19 text

19 Да: пилится под Web

Slide 20

Slide 20 text

20 Wasm design principles Модульность из коробки Живет в песочнице Работает быстро Не ломает Web

Slide 21

Slide 21 text

21 Нет: может быть любой embedder

Slide 22

Slide 22 text

22 C/C++ wasm (emscripten)

Slide 23

Slide 23 text

23 JS vs. asm.js vs. wasm

Slide 24

Slide 24 text

Hello world на 300Кб 24

Slide 25

Slide 25 text

25 emcc -O3 \ -s ENVIRONMENT="web" \ -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' \ -I libwebp libwebp/src/{dec,dsp,demux,enc,mux,utils}/*.c \ -o encoder.js encoder.c Вот так можно скомпилировать libwebp в wasm

Slide 26

Slide 26 text

26 Что насчет других языков? wasm-pack Assembly Script

Slide 27

Slide 27 text

27 Performance

Slide 28

Slide 28 text

28 Скорость wasm зависит окружения

Slide 29

Slide 29 text

29 V8

Slide 30

Slide 30 text

30 V8

Slide 31

Slide 31 text

31 Чтобы все было быстро, делайте так: WebAssembly.instantiateStreaming Content-Type: application/wasm

Slide 32

Slide 32 text

32 Что планируется дальше? Status: MVP SIMD Threads

Slide 33

Slide 33 text

33 Wasm и webpack { test: /\.wasm$/, type: "javascript/auto", loader: "file-loader" },

Slide 34

Slide 34 text

34 Как дебажить?

Slide 35

Slide 35 text

35 Как дебажить?

Slide 36

Slide 36 text

36 Wasm дополняет JS-экосистему Wasm = predictable performance Фууух, почти все :)

Slide 37

Slide 37 text

37 Спасибо! @polina_gurtovaya @pgurtovaya [email protected] 37 @evilmartians @evilmartians_ru evilmartians.com github.com/HellSquirrel/wasm-101-talk