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.8k
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
890
Other Decks in Programming
See All in Programming
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
440
Benchmark
sysong
0
270
ニーリーにおけるプロダクトエンジニア
nealle
0
630
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
Goで作る、開発・CI環境
sin392
0
160
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
330
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
170
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
XP, Testing and ninja testing
m_seki
3
220
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Visualization
eitanlees
146
16k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Building Adaptive Systems
keathley
43
2.6k
Agile that works and the tools we love
rasmusluckow
329
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Facilitating Awesome Meetings
lara
54
6.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Scaling GitHub
holman
459
140k
For a Future-Friendly Web
brad_frost
179
9.8k
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