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

WebAssembly outside of the browser

7227d09608e04e86ef8e87b95d9d4580?s=47 d0iasm
February 08, 2020

WebAssembly outside of the browser

「カーネル/VM探検隊@関西 10回目」での発表資料です。
https://connpass.com/event/161201/

7227d09608e04e86ef8e87b95d9d4580?s=128

d0iasm

February 08, 2020
Tweet

Transcript

  1. WebAssembly outside of the browser カーネル/VM探検隊@関西 2020/02/08 @d0iasm

  2. 2 何をしてきた? • インターンシップ @ Google ◦ Chrome OS /

    Chrome browser • Coreboot (オープンソースBIOS) 開発 @ GSoC 今は何してる? • インターンシップ @ Wasmer • RISC-Vエミュレータ開発 @趣味 • 修論発表準備 @ 大学 Doi Asami @d0iasm
  3. 3 rvemu: RISC-V Emulator on the Web • 現在RV64Gをサポート •

    まだ実用レベルでは無い • ほとんどの部分がRustで書 かれている Emulate 32-Bit And 64-Bit RISC-V In Your Browser With Asami’s Open Source rvemu | Gareth Halfacree, Hackster.io Rustで書かれているのにな ぜWebブラウザ上で動く? → WebAssemblyを使用し ているから
  4. 4 What is WebAssembly? • Webブラウザで動くバイトコード • スタックベース仮想マシンのバイナリ形式 (.wasm) ◦

    テキスト形式 (.wat) も定義 • コンパイラのターゲット言語 ◦ 自分で書くのではなく、コンパイラが生成する ◦ C, C++, Rustだけでなく、様々な言語から生成でき る ▪ appcypher/awesome-wasm-langs
  5. 5 .wasm and .wat C++ Text (.wat) Binary (.wasm) int

    factorial(int n) { if (n == 0) return 1; else return n * factorial(n-1); } get_local 0 i64.const 0 i64.eq if i64 i64.const 1 else get_local 0 get_local 0 i64.const 1 i64.sub call 0 i64.mul end 20 00 42 00 51 04 7e 42 01 05 20 00 20 00 42 01 7d 10 00 7e 0b https://webassembly.org/docs/text-format/
  6. 6 • Fast, safe, and portable semantics: ◦ Fast ◦

    Safe ◦ Well-defined ◦ Hardware-independent ◦ Language-independent ◦ Platform-independent ◦ Open • Efficient and portable representation: ◦ Compact ◦ Modular ◦ Efficient ◦ Streamable ◦ Parallelizable ◦ Portable Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html
  7. 7 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス

    ◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html
  8. 8 Why WebAssembly is Fast? • バイトコードである ◦ より機械語に近いため、変換が速い •

    バイナリサイズが小さい ◦ サーバーからダウンロードする速度が速くな る ◦ スタックマシンはサイズが小さくなりやすい • Streaming compilation + 今後更なる機能の追加
  9. 9 Why WebAssembly is Fast? Bytecode https://hackernoon.com/webassembly-the-journey-what-is-wasm-caf9871108aa

  10. 10 (func $sum (; 0 ;) (param $0 i32) (param

    $1 i32) (result i32) (i32.add (get_local $1) (get_local $0) ) ) (func $sub (; 1 ;) (param $0 i32) (param $1 i32) (result i32) (i32.sub (get_local $0) (get_local $1) ) ) wasm-function[0]: sub rsp, 8 mov ecx, esi mov eax, ecx add eax, edi nop add rsp, 8 ret • コードの全てが届くのを待つのではなく、届 いた順にコンパイルする .wasm machine code Why WebAssembly is Fast? Streaming Compilation
  11. 11 WebAssembly Sections • WebAssemblyのバイナリフォーマットのおかげ で、Streaming compilationを可能にしている • バイナリは複数のセクションから成り立つ ◦

    11個の決められたセクション ▪ 各セクションは必須ではない ▪ 各セクションは決められた順に並んでい ないといけない ◦ 任意のセクション
  12. 12 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8

  13. 13 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8 Import 他モジュールに定義 されている関数をイン ポートする Code

    関数本体 1番バイナリが大きく なる可能性があるた め、後方に配置 インポート情報を早く知ることで、並列コンパイルが可能 Type 引数と返り値の 型情報
  14. 14 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス

    ◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html
  15. 15 Why WebAssembly is Safe? • サンドボックス環境 ◦ メモリ空間の分離 •

    Control Flow Integrity ◦ 制御フローの制限
  16. 16 Why WebAssembly is Safe? Memory isolation • WebAssemblyはホスト環境のメモリには直接ア クセスできない

    • 代わりに単なるバイト列として表されるLinear memoryを使用できる • Linear memoryの範囲は64KiB×ページ数 ◦ ホスト環境がページ数の初期値と最大値を 指定できる ◦ 範囲を超えてのアクセスは禁止
  17. 17 Why WebAssembly is Safe? Memory isolation https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/

  18. 18 Why WebAssembly is Safe? Control flow integrity • 制御フローを制限することで、Control

    hijacking attacks(攻撃者が任意のコードを実行すること) を防ぐ ▪ Return oriented programming • コールスタックはメモリ上に存在しない • アクセスする全ての関数と型の宣言が必要 call $hoge 関数hoge code code function table 0 1 2 hoge(i32, i32) -> i32
  19. 19 WebAssembly is... • Webブラウザで動く、スタックベース仮想マシンのバイナ リ形式 ◦ 速い ◦ 安全

    • ツールチェーンや仕様がどんどん充実してきている • Webブラウザだけで使うのはもったいなくない…?
  20. 20 WebAssembly runtime for outside of the browser • ブラウザにWebAssemblyを動かすランタイムが内包

    • ブラウザ外で動かすためにはWebAssemblyのランタイムが 必要 ◦ Wasmer ▪ Wasmer社によって開発 ◦ Wasmtime ▪ Bytecode allianceコミュニティによって開発 • Mozilla、Fastly、Intel、RedHatがメンバー
  21. 21 WebAssembly is Neither Web nor Assembly “WebでもAssemblyでもないWebAssembly” https://www.infoq.com/presentations/webassembly-intro/

  22. 22 Use cases: WebAssembly outside of the browser • コマンドラインツールを作る

    • 他の言語との統合 ◦ GoやPythonからWasm関数を呼び出す ◦ なんと、PostgreSQLからWasm関数を呼び 出す拡張ツールも • サーバー上で動かす • ブロックチェーンで使う ◦ EthereumにおけるSolidityの代わり
  23. 23 Client-side JavaScript WebAssembly Server-side Node.js wasmer / wasmtime Use

    cases: WebAssembly outside of the browser \ Node.jsの歴史の再来 /
  24. 24 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    https://diveintodocker.com/
  25. 25 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime https://diveintodocker.com/
  26. 26 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime ファイルアクセスやネットワークは?
  27. 27 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い

    WebAssembly WebAssembly runtime ファイルアクセスやネットワークは? WASIによってできるようになります
  28. 28 WASI: WebAssembly system interface • WebAssemblyがシステムとやりとりするためのインター フェースの標準 ◦ 例えば、putc(int

    character, FILE * stream) のよう にAPI ◦ POSIXみたいな感じ • WebAssembly/WASIリポジトリで仕様策定中 ◦ まだまだ始まったばかり
  29. Co-founder of Docker “もしWASMとWASIが2008年に存在してたら、Docker は必要なかっただろう ” 29

  30. 30 WebAssemblyをブラウザの 外で使う流れがきている! @d0iasm

  31. 31 • https://webassembly.github.io/spec/core/intro/introduction.ht ml • https://www.infoq.com/presentations/webassembly-intro/ • https://hacks.mozilla.org/2018/01/oxidizing-source-maps-wit h-rust-and-webassembly/ •

    https://livebook.manning.com/book/webassembly-in-action/ chapter-2/8 • https://hacks.mozilla.org/2017/02/what-makes-webassembl y-fast/ • https://hacks.mozilla.org/2017/02/where-is-webassembly-no w-and-whats-next/ Reference
  32. 32 • https://calendar.perfplanet.com/2017/tracking-cpu-with-long -tasks-api/ • https://hackernoon.com/webassembly-the-journey-what-is- wasm-caf9871108aa • https://hacks.mozilla.org/2017/07/memory-in-webassembly- and-why-its-safer-than-you-think/

    • https://diveintodocker.com/ • https://wasi.dev/ • https://hacks.mozilla.org/2019/03/standardizing-wasi-a-web assembly-system-interface/ スライドはslidegoのテンプレートを使用しました。 Reference
  33. Appendix

  34. 34 閑話休題: WebAssemblyのロゴ • ロゴのデザイン決定は全て GitHubのissueを 用いて行われた • JSのロゴである黄色と、色相環において補 色の関係

    ◦ JSと相補的な関係であることを表す https://github.com/WebAssembly/design/issues/980
  35. 35 閑話休題: WebAssemblyのロゴ 没案 https://github.com/WebAssembly/design/issues/980 https://github.com/WebAssembly/design/issues/112

  36. 36 https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/ Speed: JavaScript vs WebAssembly • 赤色がJS • 青緑色がWasm

    • Wasmのほうが標準偏 差が小さい ◦ 予測しやすい! January 18, 2018 の記事のため、 今は結果が異なるかも Chrome Firefox Safari