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

WASM

 WASM

WebAssebmly for beginners

C27317d1ebe4e4a01504acab9d87fe61?s=128

Polina Gurtovaya

January 22, 2020
Tweet

Transcript

  1. WASM

  2. Давным-давно, когда кода на С++ было много, а на JS

    мало 2 Появился emscripten
  3. 3

  4. И зачем тогда изобретать велосипед? 4 Потому что JS слишком

    долго парсить. Говорят что WASM в 20 раз быстрее Кое-что, связанное со скоростью, но об этом позже
  5. Опыт “портирования” позволил быстро запилить `emcc WASM=1` 5

  6. Смотрим демку 6

  7. На самом деле все примерно так 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"
  8. А что насчет RUST? 8 https://rustwasm.github.io/wasm-pack/installer/ https://rustwasm.github.io/docs/book/game-of-life/setup.html

  9. AssemblyScript — почти как typescript, но компилируется в WASM 9

  10. 10 Это была история про portability

  11. А теперь начинается история про WASM 11

  12. WASM — binary instruction format for a stack-based virtual machine

    12
  13. WASM для WEB ? 13

  14. Принципы: • Модульность из коробки • Живет в песочнице •

    Работает быстро • Не ломает Web
  15. У 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.
  16. У WASM 2 формата 16

  17. Так как бинарники особо не поразбираешь, давайте поговорим про текстовый

    формат 17
  18. Выглядит он вот так: 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"))
  19. Демка wat2wasm 19

  20. Локальная демка 20

  21. Окей, что насчет скорости? 21

  22. Как работает JS в браузере на примере V8 22 V8

    это движок, написаный на C++. Он используется с Chromium и NodeJS. V8 заставляет код работать. Раньше это был только JS код. Теперь это JS и WASM
  23. 23

  24. Как работает компилятор? :) 24 Сложно он работает :)

  25. 25

  26. В общем: 26 Как быстро произойдет “interactive” предсказать сложно Скорость

    *не* определяется размером бандла (хотя это афектит) На мобилках все может быть в 5 раз медленнее
  27. 27

  28. Помните вот это? 28 WebAssembly.instantiateStreaming WASM можно компилировать еще *до*

    загрузки
  29. WASM = predictable performance 29

  30. Статус WASM: MVP 30 Пока лучше всего поддерживается компиляция из

    С/C++ Работает в V8 примерно с февраля 2017 LLVM based-projects Все достаточно “сыро”
  31. WASM дополняет JavaScript а не заменяет 31

  32. 32 Примерчики с MDN