778a0aの日記

戦略シミュレーションゲーム開発、本の感想、ソフトウェア技術についてなど

Blazor Hybridの雑メモ（Blazor + Windows Forms or WPF）

技術系

さくっとデスクトップアプリを作るのにBlazor Hybrid（Blazor + Windows Forms or WPF or MAUI）が思ったより良い感じだったので、雑メモを残しておきます。

セットアップ方法など

プロジェクトテンプレートないのか...という感じですが、一度セットアップしてしまえばRazorコンポーネントのホットリロードもデフォルトで普通に動いて開発者体験は良い感じでした。

ホットリロードはWPFのそれに比べるとちょっと遅い（数百ms程度の遅延）ですが個人的には許容範囲でした。今後の高速化に期待です。

画面をHTMLで書きつつ、ボタンクリック時の動作などをC#で書けて、自由に.NETのAPIでスレッドを作れるしファイルも読み書きできるしで快適です。軽く触っただけではどこまでがWebAssemblyで動いていて、どこまでがSignalRを通してサーバープロセス側？で実行されているのかよく分からない（≒意識しなくて良い）感じでよくできているなと思いました。（未だによく分かっていません）

とてもいい出来なので、Windows向けデスクトップアプリ作りにおいては、ElectronもTauriもFlutterもWPFもWinUIもいらない感じになるかもと思いました。（少なくともXAML系のUIフレームワークよりは遥かに開発生産性が良いです）

Blazor向けUIライブラリについて

参考リンク:

以下は、Blazor Hybrid（Windows Forms）で適当にいくつかのBlazor向けUIライブラリを使って、1アイテムに多数のボタンやチェックボックスが含まれた、数千個のリストアイテムを表示するまあまあ重めの画面を作ってみたときの雑メモです。重さについて色々書いていますが、極端な例での話なので普通に作る分にはどのUIライブラリも十分に高速だと思います。

  • MudBlazor: いまのところ一番人気。マテリアルデザインベースなのが好みが分かれそう。コンポーネントをカスタマイズしやすいのは◯。あとやや重い気がする。Tailwind風の機能は便利でいい。ただ、素のHTML要素には反映してくれない？のがMudBlazorのコンポーネントとHTML要素を併用する場合に面倒そう
  • Fluent UI Blazor: MS謹製。Fluent UIのWeb Components版のBlazor用ラッパー？。見た目はシンプルで良い感じ。だけどWeb Components化されていたり、アクセシビリティ対応していたりする影響からかMudBlazorより大分重い。あとFluentStackにflexが設定されないバグ？がある（Blazor Hybridで使っているせい？）。書き方もやや冗長で面倒。フォーム系のコンポーネントが重いので、それを使わず必要なところだけ使う形にすればいいかも。かといってレイアウト系が他と比べて優れているわけでもないし、上記のflexにならないバグなど根本的なところの信頼性・品質がまだ不安
  • Ant Design Blazor: AntグループのUIライブラリのBlazor版。チャートとかも揃っていてFluent UI Blazorより人気がある。見た目はシンプル寄り。書き味はいい感じ。重さはFluent UI BlazorほどではないけどMudBlazorよりは重い気がする
  • Radzen: Redditでなんか評判が高かった。MudBlazorと同じくマテリアルデザインチックなリップル効果やアニメーションがついている
  • 素のHTML: やっぱりダントツで速い。スタイル付けにTailwind等を使うとホットリロードの動作がrazorファイル更新反映→少し遅れてcssファイル更新反映、という感じになるのが微妙といえば微妙だけどそこまでは気にならない

まとめとしては、マテリアルデザインで問題ないならMudBlazorが良い、そうでないならAntBlazorが良さそう、アクセシビリティ対応が必要かWeb ComponentsやMS謹製が好きならFluent UI Blazorでもまあなんとかなるかも、高度なカスタマイズが必要なら素のHTMLもあり、という感じでした。

次は時間があればBlazor + MAUIでモバイルアプリを作るのがどんな感じなのか調べてみたいと思います。

その他参考記事

以上です。