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.7k
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.1k
Hello World in coreboot
d0iasm
3
800
Other Decks in Programming
See All in Programming
Creating a Free Video Ad Network on the Edge
mizoguchicoji
0
120
最新TCAキャッチアップ
0si43
0
190
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.3k
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
2
1.1k
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Jakarta EE meets AI
ivargrimstad
0
210
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
RubyLSPのマルチバイト文字対応
notfounds
0
120
Kaigi on Rails 2024 〜運営の裏側〜
krpk1900
1
230
Jakarta EE meets AI
ivargrimstad
0
660
subpath importsで始めるモック生活
10tera
0
310
Click-free releases & the making of a CLI app
oheyadam
2
120
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
Typedesign – Prime Four
hannesfritz
40
2.4k
Bash Introduction
62gerente
608
210k
Side Projects
sachag
452
42k
KATA
mclloyd
29
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Making Projects Easy
brettharned
115
5.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
RailsConf 2023
tenderlove
29
900
What's in a price? How to price your products and services
michaelherold
243
12k
Building Adaptive Systems
keathley
38
2.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
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