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

.NET 8世代のBlazorについて

tomokusaba
November 24, 2023

.NET 8世代のBlazorについて

.NETラボ勉強会2023年11月
.NET 8世代のBlazorについて
https://dotnetlab.connpass.com/event/299544/

tomokusaba

November 24, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. .NET 8世代のBlazorにつ
    いて
    株式会社SAKURUG
    プロダクトDiv
    草場 友光
    .NETラボ 2023年11月

    View full-size slide

  2. 自己紹介
    • 普段は主にシステムをAzureにモダナ
    イズする仕事をしています。
    • コミュニティ活動を通じて知識をアッ
    プデートしています。
    • 2022/08-2024 Microsoft MVP
    (Developer Technologies)
    • tomo_kusaba

    View full-size slide

  3. 宣伝
    【VISION】ひとの可能性を開花させる企業であり続ける
    VISIONに共感できる仲間募集中。

    View full-size slide

  4. 注意
    • 個人の見解・解釈が多分に入っています。
    • 見解の相違・事実誤認などありましたらご指摘ください。
    • #dotnetlabでtweetすると左側に表示されます

    View full-size slide

  5. 今日の目的
    • .NET 8がリリースされました。
    • なかでも、BlazorはBlazor Web Appsが加わるという大きな
    変更があります。
    • これまでのBlazorを振り返るとともにこれからのBlazorアプリ
    開発のあり方について探っていきましょう。

    View full-size slide

  6. Blazor Server
    • サーバ上で実行
    • UIの更新、イベント処理、
    JavaScriptの呼び出しなど
    はSignalR接続経由で処理
    • オフラインサポートがない
    • 常に回線接続が必要
    • ASP.NET Coreサーバが必

    View full-size slide

  7. Blazor WebAssembly
    • クライアント側の
    WebAssemblyベース
    の.NETランタイム上でコン
    ポーネントを実行
    • スタンドアロンBlazor
    WebAssemblyの場合
    ASP.NET Coreサーバが必
    要ありません。CDNから配信
    することが可能
    • ダウンロードサイズが大きい

    View full-size slide

  8. Blazor Serverでアプリを作る問題点
    • アプリケーションがサーバーから離れられない。
    • 回線が切れると即時アプリケーションが停止する。

    View full-size slide

  9. Blazor WASMでアプリを作る問題点
    • Blazor WASMのみでは実用的なアプリにならない。必ず
    WebAPIなどのデータソースと組み合わせる必要あり。
    • WebAPI≒RESTAPIの知識が不可欠
    • 多くはWebAPIとBlazor WASMを一体として設計する
    Hostedですすめていた。
    • 当然、求められる知識はServerに比べて多い。

    View full-size slide

  10. Blazor WebAssembly
    テンプレートの変更点
    • Blazor WebAssembly ASP.NET Core Hostedのプロ
    ジェクトテンプレートは廃止
    • これに伴い、認証認可のドキュメントも.NET 8のドキュメントから
    は同プロジェクトテンプレートに基づいた記述が消えている
    • もちろん同じやり方でできないかと言われれば多分できる(未検
    証)
    • .NET 6,7のテンプレから.NET 8にアップグレードするのが早い?

    View full-size slide

  11. プライマリーコンストラクタ
    • クラスの直後に()をつけてパラメータを書くことでコンストラクタ
    を簡単にかけるようになりました。
    • DIサービスとなるクラスに他のサービスが必要になる場合がユー
    スケースになります。

    View full-size slide

  12. フルスタックWeb UI

    View full-size slide

  13. レンダーモード
    名前 説明 場所 インタラクティブ プロジェクト
    スタティック 静的サーバーレンダリン
    グ(SSR)
    サーバー × サーバー
    対話型サーバ Blazor Serverを利用
    したサーバーレンダリン

    サーバー ○ サーバー
    対話型
    WebAssembly
    Blazor
    WebAssemblyを利用
    したクライアントレンダリ
    ング
    クライアント ○ クライアント
    対話型自動 最初にBlazor Server
    を利用しその後後続のア
    クセスにBlazor
    WebAssemblyを利用
    する対話型クライアントレ
    ンダリング
    クライアント ○ クライアント

    View full-size slide

  14. レンダーモード
    名前 説明 場所 インタラクティブ プロジェクト
    スタティック 静的サーバーレンダリン
    グ(SSR)
    サーバー × サーバー
    対話型サーバ Blazor Serverを利用
    したサーバーレンダリン

    サーバー ○ サーバー
    対話型
    WebAssembly
    Blazor
    WebAssemblyを利用
    したクライアントレンダリ
    ング
    クライアント ○ クライアント
    対話型自動 最初にBlazor Server
    を利用しその後後続のア
    クセスにBlazor
    WebAssemblyを利用
    する対話型クライアントレ
    ンダリング
    クライアント ○ クライアント
    1
    2
    3

    View full-size slide

  15. 1の選択肢
    • 従来のBlazor Server的な選択肢
    • 最も開発効率が高い
    • 従来のBlazor Serverに比べてSSRにして回線接続が切れれば
    サーバー負荷の軽減が狙える。
    • イントラネット内での使用など比較的安定した環境で使用する場
    合では第一選択肢

    View full-size slide

  16. 2の選択肢
    • 従来のBlazor WebAssembly的な選択肢
    • 従来のBlazor WebAssemblyの場合ASP.NET Core
    Hostedの後継として検討
    • WebAPIは別サーバとして用意
    • インターネットに広くサービスを公開する場合には第一選択肢

    View full-size slide

  17. 3の選択肢
    • 2の亜種
    • 全く新しい選択肢
    • 基本的な構築方法としては2と同様

    View full-size slide

  18. Blazor スキャフォールディング(Preview)
    • Entity Framework Coreのモデルに基づいてCRUDページ
    を生成する。
    • Blazor静的サーバーレンダリングのページを生成する。
    • サーバー側のレンダリングに基づいているのでWebAssembly
    で実行する場合はサポートされません。
    • QuickGridを使用してデータを表示します。

    View full-size slide

  19. .NET Aspire
    • 回復性・可観測性・構成可能なクラウドネイティブアプリケーション
    を.NETで構築するためのアプリケーションスタック。
    • サービス検出・テレメトリ・回復性・ヘルスチェックの機能を使用で
    きます。
    • 時間の限り紹介

    View full-size slide

  20. 参考文献
    • ASP.NET Core Blazor
    • Announcing ASP.NET Core in .NET 8
    • Introducing .NET Aspire: Simplifying Cloud-Native
    Development with .NET 8
    • .NET Aspire overview

    View full-size slide

  21. おしまい
    おしまい

    View full-size slide