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
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
2.8k
Vue.js学習の振り返り
hiro_xre
2
130
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
23k
ECS Service Connectのこれまでのアップデートと今後のRoadmapを見てみる
tkikuc
2
210
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Code Reviewing Like a Champion
maltzj
519
39k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
It's Worth the Effort
3n
183
27k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Designing for Performance
lara
604
68k
What's new in Ruby 2.0
geeforr
342
31k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
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