Rustでフロントエンドをやる話

RustJPのLTで発表(https://youtu.be/6wXqnQfhCVg?t=1391)した内容になります。https://rust.connpass.com/event/234637/

Rustでフロントエンドをやるときの選択肢や感想をまとめた話になります。

Transcript

1. Rustでフロントエンド をやる話 @higumachan
2. 自己紹介 名前: 日熊悠太 所属: 株式会社KICONIA WORKS 趣味: APEX・漫画 Rust歴: 趣味3年 仕事1年 Twitter: @higumachan725 Github: @higumachan
3. 前置き • 私は専業のフロントエンドエンジニアではありません。(Rustでは主には経路探索と かそこら辺のアルゴリズム作ったりWeb server書いたりしてます) • 仕事上でフロントエンドを書くこともあったりするので、その際に使える選択肢として 調査した結果になります。 • 私は仕事ではVuejs/TS(2系) + Rust or Yewでフロント書いてます。 ※一旦、「JS/TSはなるべく書きたくない」というポジションを取りますがあくまでポジショ ンを取ってるだけなのであんまり殴らないでください。
4. なぜRustで書くのか？
5. なぜRustで書くのか？ • Rustのほうがアプリケーションを適当に 書くのは難しい • Rustのほうがアプリケーションをしっか りに書くのは簡単 • Rustを勉強する方がCSにおいて重要 な知識を一緒に勉強できる
6. なぜRustで書くのか？
7. なぜRustで書くのか？ Rustだけを褒めていてもあれなのでバラン スを取るための話 • Rustはライブラリレベルのコードをしっ かり書くのはとても難しい ⚠CSにおいて重要な知識を全部含んだの はミス
8. フロントエンドにRustを入れる時の大きな選択肢 1. フロントで利用できるライブラリをRustで書く(wasm-pack) 2. コードのほぼすべてをRustで書く(yew, dioxus, seed-rs …)
9. フロントで利用できるライブラリをRustで書く Rustで書かれたコードをJS側からnpm packageとして読み込む。 始め方: wasm-packのGetStartsから始めると簡単にnpmのパッケージにする方法がわかるの で自分のJS/TSのプロジェクトに導入することが出来ます。(npmにアップロードするのも 簡単でした) 例: lindera-js: Rust製の形態素解析ライブラリのポート
10. メリデメ(フロントで利用できるライブラリをRustで書く) メリット: • Rust既存のライブラリを既存のJS/TSのプロジェクトに適用することが出来る • 描画部分はJS/TS、データ処理部分はRustのような感じで得意分野を活かせる デメリット: • JS/TS製オンリーで作った場合に比べると配布ファイルが大きくなりがち • 2つ以上のRust製のnpm packageに依存した場合でも依存関係の共通化が出来ない • JS/TSとの接続部分を書かないといけない(データの接続周りにたまに落とし穴がある) • 結局JS/TSを書かないといけない
11. 学習資源(フロントで利用できるライブラリをRustで書く) • wasm-packのチュートリアル • wasm-bindgenのexamples
12. 体験談(フロントで利用できるライブラリをRustで書く) プロジェクト: 建設業向けの自動設計できるCADを作るプロジェクト 利用用途: • 一般的では無い形式のファイルのParseを行う。 • SVGの描画の高速化を行うためのSVGのコンパイル処理 • フロントサイドでの自動設計アルゴリズムの実行(試験的導入後断念) ステータス: • 顧客提供ずみ • 顧客活用中
13. 体験談(フロントで利用できるライブラリをRustで書く) プロジェクト: 建設業向けの自動設計できるCADを作るプロジェクト 雑な感想や使用感: • 既存のserver sideで動かしていたRust crateからのコンパイルはほとんど障壁なく 通った • 大きなstructの受け渡しをしていた部分でJS側のGCが動いてしまい、大きなボトル ネックになっていたので解決した。(需要があるなら記事化するかも) • アルゴリズム実行は当時は並列処理がサポートされていなかったため断念 • デフォルトの設定だとエラー時の報告が雑なので設定が必要 • 顧客から上がってくるバグ報告でWASM起因のものは無い
14. コードのほぼすべてをRustで書く Rust製のWeb Frontend Frameworkを利用してエントリーポイント以外をRustで書いて しまう方法。 Rust Web Frontend Framework例: • Yew: Star 18.8k • Seed: Star 3.1k • dioxus: Star 2.2k
15. Yew • Rust WFW一番Starが多いリポジトリ(だと思う) • 一番こなれてる感がある(Hot Reload, エラー伝搬周りとか) • もともとはElmっぽいEventLoopでStructベースなComponentを使う書き方だった が、0.19系からFunctionComponentというReactのHookみたいなものが追加され てシフトチェンジしようとしてる感がある。 • renderはJSXみたいな感じでHTML in Rustみたいな書き方
16. Yew use yew::html; html! { <div> <div data-key="abc"></div> <div class="parent"> <span class="child" value="anything"></span> <label for="first-name">{ "First Name" }</label> <input type="text" id="first-name" value="placeholder" /> <input type="checkbox" checked=true /> <textarea value="write a story" /> <select name="status"> <option selected=true disabled=false value="">{ "Selected" }</option> <option selected=false disabled=true value="">{ "Unselected" }</option> </select> </div> </div> };
17. Seed • exampleが充実している。 • Rust WFWの中で唯一Auth0 + GraphQLのサンプルが用意されていた • Rust側でpanic!するとやばいことになった(何も言わずに死ぬ) • renderは下みたいな感じ div![ C!["container"], div![ C!["columns"], column("Continents", continents), column("Countries", countries), column("Country", model.country.as_ref().map(country_detail)), ] ]
18. dioxus • 個人的に一押し • Reactにかなり寄せている印象 ◦ hookベース ◦ rsxというrender • Renderのno-stdとか並行実行性などは無視しているらしい • Multi Platformにゴリゴリ対応していくぞという気持ち ◦ Web, SSR, Windows, Linux, Mac, iOS, Android, Terminal ◦ しかし、デスクトップ環境もモバイル環境もまだまだという感じ • renderは下みたいな感じ rsx!( h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } )
19. コードのほぼすべてをRustで書く メリット: • 自分の記述するコードのすべてをRustで書くことが出来る • 完全に型のついた状態でコードを書けるのでリファクタリングが簡単 • npmを使わなくて済む • 必要に応じてJSのライブラリも呼べる デメリット: • JS/TS製のプロジェクトに比べると配布ファイルのサイズが大きい • コンポーネントベースのCSSフレームワークのWrapperが無いことが多い • RESTやGraphQLのState管理ライブラリ(apollo client的なの)の決定版が無い • Sync + Send境界周りの問題がたまに発生するのである程度のRustの知識がある人 (LinkedinのRustバッチテスト保持者)がチームにいたほうが良い • コンパイル遅い
20. 体験談(コードのほぼすべてをRustで書く) プロジェクト: お金の貸し借りを管理するアプリ(自社開発) 利用用途: • ほぼ全部 構成技術:Yew + Auth0 + Hasura(GraphQL) ステータス: • 社内検証利用中
21. 体験談(コードのほぼすべてをRustで書く) プロジェクト: お金の貸し借りを管理するアプリ(自社開発) 雑な感想や使用感: • Vueを使ってた身からするとElm likeなメッセージループはめんどくさい • Auth0とGraphQLを利用したサンプルがYewに無いので苦労した • GraphQLはちゃんと扱うなら大変(Stateライブラリみたいなのを自作して対応) • Auth0はJS側のライブラリをRustから呼んで対応した • CSSフレームワークがいい感じにラップされてないので面倒 • html!の中は補完が効いたり効かなかったりでよくわからん(Clion + IJ Rust) • html!の中でCommetが動かないのでめんどくさい(Clion + IJ Rust)
22. Rustフロントエンド導入チャート