Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Rustハンズオン第5回 WebAssembly編

Yuki Toyoda
May 15, 2021
2.5k

Rustハンズオン第5回 WebAssembly編

2021/05/12に開催した社内向けハンズオンの資料です。

Yuki Toyoda

May 15, 2021
Tweet

Transcript

  1. Yew で体験する Rust によるフロントエンド開発 1. Yew とは 2. 裏の仕組み 3.

    動かす前の事前準備 4. カウンタアプリを書いて、動かしてみる 4
  2. カウンタアプリを書いて、動かしてみる use wasm_bindgen::prelude::*; use yew::prelude::*; struct Model { link: ComponentLink<Self>,

    value: i64, } enum Msg { AddOne, } impl Component for Model { type Message = Msg; type Properties = (); fn create(_: Self::Properties, link: ComponentLink<Self>) -> Self { Self { link, value: 0, } } fn update(&mut self, msg: Self::Message) -> ShouldRender { match msg { Msg::AddOne => self.value += 1 } true } fn change(&mut self, _props: Self::Properties) -> ShouldRender { false } fn view(&self) -> Html { html! { <div> <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button> <p>{ self.value }</p> </div> } } } #[wasm_bindgen(start)] pub fn run_app() { App::<Model>::new().mount_to_body(); } 13
  3. カウンタアプリを書いて、動かしてみる static というディレクトリを作る。 下記を含む index.html を書く。 <!DOCTYPE html> <html lang="en">

    <head> <meta charset="utf-8" /> <title>Yew Sample App</title> <script type="module"> import init from "./wasm.js"; init(); </script> </head> <body></body> </html> 14
  4. カウンタアプリを書いて、動かしてみる Component トレイト 重要な内容を取り出して説明します。 pub trait Component: Sized + 'static

    { type Message: 'static; type Properties: Properties; fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self; fn update(&mut self, msg: Self::Message) -> ShouldRender; fn change(&mut self, _props: Self::Properties) -> ShouldRender; fn view(&self) -> Html; } 17
  5. カウンタアプリを書いて、動かしてみる view HTML を書いて UI を宣言できる。 html! マクロにより素の HTML が書ける

    ← 黒魔術すぎてすごい fn view(&self) -> Html { html! { <div> <button onclick=self.link.callback(|_| Msg::AddOne)>{ "+1" }</button> <p>{ self.value }</p> </div> } } 23
  6. wasm と wat WebAssembly はバイナリフォーマットなので、(なれていない限り)読むことはでき ない。 WebAssembly Text Format に直すと読める。

    wasm2wat というツールを使うか、 ブラウザで: https://webassembly.github.io/wabt/demo/wasm2wat/ wat は S 式で表現される形式。 先ほど作った Yew の wasm を wat にして見てみましょう。 29
  7. WebAssembly はどこで使われているの? Google Meet のぼかし機能: https://zenn.dev/kounoike/articles/google-meet-bg- features Google Earth: https://medium.com/google-earth/google-earth-comes-to-more-

    browsers-thanks-to-webassembly-1877d95810d6 eBay のバーコード読み取り: https://medium.com/ebaytech/webassembly-at-ebay-a- real-world-use-case-ef888f38b537 弊社でも利用した記事を見つけた。mp3 エンコーダを WebAssembly 化して使用すると いう手: https://developers.cyberagent.co.jp/blog/archives/20506/ vim.wasm: https://github.com/rhysd/vim.wasm 画像処理関係、音声関係(Google Meet では雑音抑制にも使われているらしい)での利 用事例が多い。あるいは、ブラウザゲームでの利用が期待されると言われている。 37
  8. WebAssembly ランタイムという存在 WASI に対応した WebAssembly ランタイムが作られている。 ランタイムをインストールした環境であればどこでも実行可能ということ。 代表的なものは下記。 Wasmer: サポート言語やコンパイラバックエンドが広い。

    Wasmtime: 小さいのがウリらしい。 Lucet: Fastly 社が作っている。 WebAssembly を出力可能な言語なら、この上で普通に動かせる。Go でも C でも Rust でも Swift でも…! 41
  9. Web の外の WebAssembly の具体的な利用例 Proxy-Wasm: プロキシサーバと拡張機能との間の ABI を定義するもの。たとえば Envoy に使用されているものが最近話題。

    Krustlet: Kubernetes 上で wasm コンテナを実現するプロジェクト Kernel-wasm: Linux カーネル上でコンテキストスイッチなしで wasm バイナリを動かせ る。 42