Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wasm 101

Wasm 101

WebAssembly с нуля :)

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

March 19, 2020
Tweet

Transcript

  1. Wasm 101

  2. 2

  3. 3

  4. 4

  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