play-ruby の仕組みを調べてみた

play-ruby の仕組みを調べてみた okarin 1

play-ruby の仕組みを調べてみた 自己紹介 岡部 京太 (okarin) 所属 ● 株式会社ハイヤールー ○ エンジニア募集中！！ Activities ● X: @okarin_dev ● community: Ehime.go エンジニアリング領域 ● バックエンド ● 認証・認可 好きなもの ● ブロッコリー ● ランニング 2

• https://hireroo.io/
• https://twitter.com/okarin_dev
• https://ehimego.connpass.com/

play-ruby の仕組みを調べてみた テックブログの紹介 Hireroo Tech Blog 3

• https://hireroo.io/journal/tech

play-ruby の仕組みを調べてみた play-ruby https://ruby.github.io/play-ruby/ 使ったことはありますか？ 4

• https://ruby.github.io/play-ruby/

play-ruby の仕組みを調べてみた play-ruby https://github.com/ruby/play-ruby > This project is very early in development. Feedback and contributions are welcome :) まだまだ小さいプロジェクト とはいえ仕組みが面白い 5

• https://github.com/ruby/play-ruby

play-ruby の仕組みを調べてみた play-ruby を実際に使ってみよう https://ruby.github.io/play-ruby/ 6

• https://ruby.github.io/play-ruby/

play-ruby の仕組みを調べてみた play-ruby を実際に使ってみよう ● zip ファイルをダウンロードしている ● メインスレッドとは別で worker が起動している ● 実行時にネットワーク通信が発生していない どういう仕組みで動いているんだろう？ 🤔🤔🤔 7

play-ruby の仕組みを調べてみた

play-ruby のコードを見てみる

●

zip ファイル（ruby.wasm）のダウンロード

async function downloadBuiltinRuby(version, rubyVersion) {
const tarball = `...`
const url =

ruby/ruby.wasm/releases/download/${

`https://github.com/
version}/${tarball}`

}

await downloadUrl(url, destination)
const zip = spawn("zip", ["-j", zipDest, destination])
https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/bin/build.mjs#L32
8

• https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/bin/build.mjs#L32
• https://github.com/ruby/ruby.wasm/

play-ruby の仕組みを調べてみた

play-ruby のコードを見てみる

●

Worker の生成

const RubyWorkerClass =
Comlink.wrap(
new

Worker("build/src/ruby.worker.js",

{ type: "module" },
))
https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/index.ts#L227

9

• https://developer.mozilla.org/en-US/docs/Web/API/Worker
• https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/index.ts#L227

play-ruby の仕組みを調べてみた play-ruby のコードを見てみる ● worker のコード ○ ruby.wasm の zip ファイルを読み込んで、 WebAssembly.Module に変換 await installer.installZip(fs, new Response(zipBuffer)) const rubyModuleEntry = fs.readFileSync("/usr/local/bin/ruby") const rubyModule = WebAssembly.compile(rubyModuleEntry as Uint8Array) https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/ruby.worker.ts#L200 10

• https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/Module
• https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/ruby.worker.ts#L200

play-ruby の仕組みを調べてみた

play-ruby のコードを見てみる

●

worker のコード
○ Ruby のコードが送信されたら実行する
import { WASI } from "@bjorn3/browser_wasi_shim"
const wasi = new WASI(...);
const instnace: any = await
WebAssembly.instantiate(this.module, imports);
wasi.start(instnace);
https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/ruby.worker.ts
11

• https://github.com/ruby/play-ruby/blob/9d774d73abaf6defc616e5913dd608c6eb187663/src/ruby.worker.ts

play-ruby の仕組みを調べてみた 全体観 12

play-ruby の仕組みを調べてみた まとめ ● play-ruby は WebAssembly で Ruby のコードを実行している ● WebAssembly を使うことで、サーバーとの通信が不要になっている 13