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
1から理解するWeb Push
dora1998
7
1.9k
為你自己學 Python - 冷知識篇
eddie
1
350
はじめてのMaterial3 Expressive
ym223
2
880
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
チームのテスト力を鍛える
goyoki
3
730
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
testingを眺める
matumoto
1
140
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
概念モデル→論理モデルで気をつけていること
sunnyone
3
290
Kiroで始めるAI-DLC
kaonash
2
610
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Optimizing for Happiness
mojombo
379
70k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Balancing Empowerment & Direction
lara
3
620
Raft: Consensus for Rubyists
vanstee
140
7.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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