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

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

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

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

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

Yuta Hinokuma

January 24, 2022
Tweet

Other Decks in Programming

Transcript

  1. 体験談(フロントで利用できるライブラリをRustで書く) プロジェクト: 建設業向けの自動設計できるCADを作るプロジェクト 雑な感想や使用感: • 既存のserver sideで動かしていたRust crateからのコンパイルはほとんど障壁なく 通った •

    大きなstructの受け渡しをしていた部分でJS側のGCが動いてしまい、大きなボトル ネックになっていたので解決した。(需要があるなら記事化するかも) • アルゴリズム実行は当時は並列処理がサポートされていなかったため断念 • デフォルトの設定だとエラー時の報告が雑なので設定が必要 • 顧客から上がってくるバグ報告でWASM起因のものは無い
  2. Yew • Rust WFW一番Starが多いリポジトリ(だと思う) • 一番こなれてる感がある(Hot Reload, エラー伝搬周りとか) • もともとはElmっぽいEventLoopでStructベースなComponentを使う書き方だった

    が、0.19系からFunctionComponentというReactのHookみたいなものが追加され てシフトチェンジしようとしてる感がある。 • renderはJSXみたいな感じでHTML in Rustみたいな書き方
  3. 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> };
  4. 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)), ] ]
  5. 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!" } )
  6. コードのほぼすべてをRustで書く メリット: • 自分の記述するコードのすべてをRustで書くことが出来る • 完全に型のついた状態でコードを書けるのでリファクタリングが簡単 • npmを使わなくて済む • 必要に応じてJSのライブラリも呼べる

    デメリット: • JS/TS製のプロジェクトに比べると配布ファイルのサイズが大きい • コンポーネントベースのCSSフレームワークのWrapperが無いことが多い • RESTやGraphQLのState管理ライブラリ(apollo client的なの)の決定版が無い • Sync + Send境界周りの問題がたまに発生するのである程度のRustの知識がある人 (LinkedinのRustバッチテスト保持者)がチームにいたほうが良い • コンパイル遅い
  7. 体験談(コードのほぼすべてをRustで書く) プロジェクト: お金の貸し借りを管理するアプリ(自社開発) 雑な感想や使用感: • Vueを使ってた身からするとElm likeなメッセージループはめんどくさい • Auth0とGraphQLを利用したサンプルがYewに無いので苦労した •

    GraphQLはちゃんと扱うなら大変(Stateライブラリみたいなのを自作して対応) • Auth0はJS側のライブラリをRustから呼んで対応した • CSSフレームワークがいい感じにラップされてないので面倒 • html!の中は補完が効いたり効かなかったりでよくわからん(Clion + IJ Rust) • html!の中でCommetが動かないのでめんどくさい(Clion + IJ Rust)