Wasm 101

WebAssembly с нуля :)

Transcript

1. Wasm 101
5. 5 Ссылка на слайды и прочие материалы будет в конце доклада
6. Wasm 101
7. 7 Wasm можно использовать везде кроме IE
8. 8 WebAssembly Core
9. 9 WebAssembly is a binary instruction format for a stack-based virtual machine.
10. 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
11. 11 .wasm и .wat У WebAssembly есть текстовое представление
12. 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"))
13. Embeddings 13
14. 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) ); });
15. Мы поняли, что: Wasm = IR Wasm легко парсить Wasm = легкий формат Wasm = песочница 15
16. Portability в примерах Pyodide Squoosh Unity 16
17. 17 WebAssembly embeddings
18. 18 Wasm это технология для Web?
19. 19 Да: пилится под Web
20. 20 Wasm design principles Модульность из коробки Живет в песочнице Работает быстро Не ломает Web
21. 21 Нет: может быть любой embedder
22. 22 C/C++ wasm (emscripten)
23. 23 JS vs. asm.js vs. wasm
24. Hello world на 300Кб 24
25. 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
26. 26 Что насчет других языков? wasm-pack Assembly Script
27. 27 Performance
28. 28 Скорость wasm зависит окружения
29. 29 V8
30. 30 V8
31. 31 Чтобы все было быстро, делайте так: WebAssembly.instantiateStreaming Content-Type: application/wasm
32. 32 Что планируется дальше? Status: MVP SIMD Threads
33. 33 Wasm и webpack { test: /\.wasm$/, type: "javascript/auto", loader: "file-loader" },
34. 34 Как дебажить?
35. 35 Как дебажить?
36. 36 Wasm дополняет JS-экосистему Wasm = predictable performance Фууух, почти все :)
37. 37 Спасибо! @polina_gurtovaya @pgurtovaya hellsquirrel@evl.ms 37 @evilmartians @evilmartians_ru evilmartians.com github.com/HellSquirrel/wasm-101-talk