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.5k
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
1k
Hello World in coreboot
d0iasm
3
740
Other Decks in Programming
See All in Programming
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
250
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.2k
Elm 0.19.0 Changes
bkuhlmann
0
480
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
Milestoner
bkuhlmann
1
400
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.7k
プールにゆこう
irof
2
120
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
220
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
SpringBoot+MyBatisで例外が出たときどこを見るか
syukai
0
110
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
110
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
In The Pink: A Labor of Love
frogandcode
137
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.3k
The Mythical Team-Month
searls
214
42k
Practical Orchestrator
shlominoach
181
9.7k
Optimizing for Happiness
mojombo
369
69k
Unsuck your backbone
ammeep
662
57k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
4 Signs Your Business is Dying
shpigford
175
21k
Design by the Numbers
sachag
274
18k
Navigating Team Friction
lara
177
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
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