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
FFI: RustとWebAssemblyとJavaScriptと
Search
d0iasm
January 27, 2020
Programming
1
1.1k
FFI: RustとWebAssemblyとJavaScriptと
2020/1/17にRust LT #8 で発表した資料です。
https://rust.connpass.com/event/160225/
d0iasm
January 27, 2020
Tweet
Share
More Decks by d0iasm
See All by d0iasm
WebAssembly outside of the browser
d0iasm
12
3.6k
Hello World in coreboot
d0iasm
3
800
Other Decks in Programming
See All in Programming
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
CSC509 Lecture 09
javiergs
PRO
0
110
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
910
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
役立つログに取り組もう
irof
26
8.6k
Macとオーディオ再生 2024/11/02
yusukeito
0
160
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
220
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Fireside Chat
paigeccino
32
3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Faster Mobile Websites
deanohume
304
30k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Building Your Own Lightsaber
phodgson
102
6k
Done Done
chrislema
181
16k
Facilitating Awesome Meetings
lara
49
6k
Transcript
FFI: RustとWebAssemblyと JavaScriptと @d0iasm
何をしてきた? • インターンシップ @ Google ◦ Chrome OS / Chrome
browser • Coreboot (オープンソースBIOS) 開発 @ GSoC 今は何してる? • インターンシップ @ Wasmer (Rust 使用) • RISC-Vエミュレータ開発 @ 趣味 (Rust 使用) • 修論 @ 大学 (Rust 不使用) Doi Asami d0iasm
rvemu: RISC-V Emulator Web上で動くRustで書かれたRISC-Vエミュレータ ブログ: https://d0iasm.github.io/blog/risc-v/2019/12/19/fibonacci-numbers-on-my-riscv-emulator.html • 現在RV64Gをサポート • まだ実用レベルでは無い
• ほとんどの部分がRustで書 かれている
rvemu: RISC-V Emulator 仕組み • バックエンドの仕組みは必要なく、ブラウザだけで動く • メインのコード(CPUエミュレーション)がRustで書かれている • ブラウザがサポートしている言語は
JavaScriptのみ 疑問 • Rustでフロントエンド開発するために、どうやって JavaScriptとやり取りする? Rust JavaScript Browser
RustをWebAssemblyにコンパイル Rust JavaScript Browser WebAssembly compile • スタック形式のVMで動くバイ ナリ •
LLVMが生成形式のターゲッ トとしてサポート
RustをWebAssemblyにコンパイル Rust JavaScript Browser WebAssembly compile i32 | i64 |
f32 | f64 の型しか サポートしていない OK: fn add(a: i32, b: i32) -> i32 NG: fn concat(a: &str, b: &str) -> String
wasm-bindgen (https://github.com/rustwasm/wasm-bindgen) • RustとJS間のグルーコードを生成してくれるツール • FFI (foreign function interface) の一種
◦ 異なるプログラミング言語間でやりとりをするための仕組み • JSから呼び出したいRustの関数に #[wasm_bindgen] をつけると、文字列等の データのやりとりが可能になる wasm_bindgenによって生成される ファイル • sample.js: グルーコード • sample_bg.wasm: 関数本体 sample.rs $ wasm-pack build --target web
wasm-bindgen (https://github.com/rustwasm/wasm-bindgen) sample.rs index.js $ wasm-pack build --target web sample.js
sample_bg.wasm
使い方はわかった。 で、 どういう仕組み? wasm-bindgenの実装と 生成されたコードを読んでみました
wasm-bindgenで文字列を扱う仕組み lib.rs hoge.js (プロジェクト名.js) 生成 生成されたJSコードから予想できること 1. Wasmが持つメモリ領域に対して mallocを し、文字列を保存する
2. 確保したメモリのポインタを ptr0とする 3. Rust関数の本体(wasm.bar)に対し、ポイン タ(ptr0)と変数の長さ(len0)を引数として渡 す。型はどちらもi32
wasm-bindgenで文字列を扱う仕組み src/lib.rs in rustwasm/wasm-bindgen JSコードからの予想通り、 Wasmが持つメモリ領域に対し てメモリ確保をしていることを確 認
wasm-bindgenで文字列を扱う仕組み Rust JavaScript WebAssembly fn bar(a: &str) fn bar(ptr: i32,
len: i32) 変形&生成 f o o bar(“foo”); 1. メモリ確保 2. 文字列保存 3. ポインタと文字列の長さを 使ってWasmの関数を呼ぶ Linear Memory
まとめ • RustとJS間をWebAssemblyを介することによってやりとり可能にする wasm-bindgenのツールについて紹介した • wasm-bindgenがどのように文字列をやりとりしているのかを説明した • 今回は触れなかったが、 web-sysという、DOMをRustから操作できるライブラリも 存在する
FFIの技術を使用することで Rustでフロントエンド開発ができる! ―― Rust is everywhere ありがとうございました @d0iasm 今回使用したコード : https://github.com/d0iasm/wasm-bindgen-sample
• Rust, WebAssembly, and Javascript Make Three: An FFI Story
◦ https://youtu.be/nvLw_XKlZaU • rustwasm/wasm-bindgen/examples/without-a-bundler ◦ https://github.com/rustwasm/wasm-bindgen/tree/master/exampl es/without-a-bundler • Design of wasm-bindgen ◦ https://rustwasm.github.io/docs/wasm-bindgen/contributing/desi gn/index.html References