Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebAssembly outside of the browser
Search
d0iasm
February 08, 2020
Programming
12
3.9k
WebAssembly outside of the browser
「カーネル/VM探検隊@関西 10回目」での発表資料です。
https://connpass.com/event/161201/
d0iasm
February 08, 2020
Tweet
Share
More Decks by d0iasm
See All by d0iasm
FFI: RustとWebAssemblyとJavaScriptと
d0iasm
1
1.3k
Hello World in coreboot
d0iasm
3
910
Other Decks in Programming
See All in Programming
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.6k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
CSC305 Summer Lecture 12
javiergs
PRO
0
130
🔨 小さなビルドシステムを作る
momeemt
3
630
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
4
1.3k
AIコーディングAgentとの向き合い方
eycjur
0
250
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
130
Kiroで始めるAI-DLC
kaonash
2
500
Claude Codeで挑むOSSコントリビュート
eycjur
0
190
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
350
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Docker and Python
trallard
45
3.5k
Code Reviewing Like a Champion
maltzj
525
40k
Rails Girls Zürich Keynote
gr2m
95
14k
Navigating Team Friction
lara
189
15k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Speed Design
sergeychernyshev
32
1.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Transcript
WebAssembly outside of the browser カーネル/VM探検隊@関西 2020/02/08 @d0iasm
2 何をしてきた? • インターンシップ @ Google ◦ Chrome OS /
Chrome browser • Coreboot (オープンソースBIOS) 開発 @ GSoC 今は何してる? • インターンシップ @ Wasmer • RISC-Vエミュレータ開発 @趣味 • 修論発表準備 @ 大学 Doi Asami @d0iasm
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 What is WebAssembly? • Webブラウザで動くバイトコード • スタックベース仮想マシンのバイナリ形式 (.wasm) ◦
テキスト形式 (.wat) も定義 • コンパイラのターゲット言語 ◦ 自分で書くのではなく、コンパイラが生成する ◦ C, C++, Rustだけでなく、様々な言語から生成でき る ▪ appcypher/awesome-wasm-langs
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 • 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 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス
◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html
8 Why WebAssembly is Fast? • バイトコードである ◦ より機械語に近いため、変換が速い •
バイナリサイズが小さい ◦ サーバーからダウンロードする速度が速くな る ◦ スタックマシンはサイズが小さくなりやすい • Streaming compilation + 今後更なる機能の追加
9 Why WebAssembly is Fast? Bytecode https://hackernoon.com/webassembly-the-journey-what-is-wasm-caf9871108aa
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 WebAssembly Sections • WebAssemblyのバイナリフォーマットのおかげ で、Streaming compilationを可能にしている • バイナリは複数のセクションから成り立つ ◦
11個の決められたセクション ▪ 各セクションは必須ではない ▪ 各セクションは決められた順に並んでい ないといけない ◦ 任意のセクション
12 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8
13 WebAssembly Sections https://livebook.manning.com/book/webassemb ly-in-action/chapter-2/8 Import 他モジュールに定義 されている関数をイン ポートする Code
関数本体 1番バイナリが大きく なる可能性があるた め、後方に配置 インポート情報を早く知ることで、並列コンパイルが可能 Type 引数と返り値の 型情報
14 • Fast, safe, and portable semantics: ◦ Fast: ネイティブコードに近いパフォーマンス
◦ Safe: コードの検証、メモリ安全なサンドボッ クス環境 Design Goal of WebAssembly https://webassembly.github.io/spec/core/intro/introduction.html
15 Why WebAssembly is Safe? • サンドボックス環境 ◦ メモリ空間の分離 •
Control Flow Integrity ◦ 制御フローの制限
16 Why WebAssembly is Safe? Memory isolation • WebAssemblyはホスト環境のメモリには直接ア クセスできない
• 代わりに単なるバイト列として表されるLinear memoryを使用できる • Linear memoryの範囲は64KiB×ページ数 ◦ ホスト環境がページ数の初期値と最大値を 指定できる ◦ 範囲を超えてのアクセスは禁止
17 Why WebAssembly is Safe? Memory isolation https://hacks.mozilla.org/2019/11/announcing-the-bytecode-alliance/
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 WebAssembly is... • Webブラウザで動く、スタックベース仮想マシンのバイナ リ形式 ◦ 速い ◦ 安全
• ツールチェーンや仕様がどんどん充実してきている • Webブラウザだけで使うのはもったいなくない…?
20 WebAssembly runtime for outside of the browser • ブラウザにWebAssemblyを動かすランタイムが内包
• ブラウザ外で動かすためにはWebAssemblyのランタイムが 必要 ◦ Wasmer ▪ Wasmer社によって開発 ◦ Wasmtime ▪ Bytecode allianceコミュニティによって開発 • Mozilla、Fastly、Intel、RedHatがメンバー
21 WebAssembly is Neither Web nor Assembly “WebでもAssemblyでもないWebAssembly” https://www.infoq.com/presentations/webassembly-intro/
22 Use cases: WebAssembly outside of the browser • コマンドラインツールを作る
• 他の言語との統合 ◦ GoやPythonからWasm関数を呼び出す ◦ なんと、PostgreSQLからWasm関数を呼び 出す拡張ツールも • サーバー上で動かす • ブロックチェーンで使う ◦ EthereumにおけるSolidityの代わり
23 Client-side JavaScript WebAssembly Server-side Node.js wasmer / wasmtime Use
cases: WebAssembly outside of the browser \ Node.jsの歴史の再来 /
24 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い
https://diveintodocker.com/
25 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い
WebAssembly WebAssembly runtime https://diveintodocker.com/
26 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い
WebAssembly WebAssembly runtime ファイルアクセスやネットワークは?
27 WebAssembly on the server-side Virtual Machine Container 軽い・起動速い 自由度が高い
WebAssembly WebAssembly runtime ファイルアクセスやネットワークは? WASIによってできるようになります
28 WASI: WebAssembly system interface • WebAssemblyがシステムとやりとりするためのインター フェースの標準 ◦ 例えば、putc(int
character, FILE * stream) のよう にAPI ◦ POSIXみたいな感じ • WebAssembly/WASIリポジトリで仕様策定中 ◦ まだまだ始まったばかり
Co-founder of Docker “もしWASMとWASIが2008年に存在してたら、Docker は必要なかっただろう ” 29
30 WebAssemblyをブラウザの 外で使う流れがきている! @d0iasm
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 • 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
Appendix
34 閑話休題: WebAssemblyのロゴ • ロゴのデザイン決定は全て GitHubのissueを 用いて行われた • JSのロゴである黄色と、色相環において補 色の関係
◦ JSと相補的な関係であることを表す https://github.com/WebAssembly/design/issues/980
35 閑話休題: WebAssemblyのロゴ 没案 https://github.com/WebAssembly/design/issues/980 https://github.com/WebAssembly/design/issues/112
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