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

.NET 8のBlazorについてみてみよう

tomokusaba
August 26, 2023

.NET 8のBlazorについてみてみよう

.NETラボ勉強会2023年8月
.NET 8のBlazorについてみてみよう

https://dotnetlab.connpass.com/event/291485/

tomokusaba

August 26, 2023
Tweet

More Decks by tomokusaba

Other Decks in Programming

Transcript

  1. .NET 8のBlazorについて
    みてみよう
    株式会社SAKURUG
    エンジニアリングユニット
    草場 友光
    .NETラボ 2023年8月

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 注意
    • 個人の見解・解釈が多分に入っています。
    • 見解の相違・事実誤認などありましたらご指摘ください。
    • .NET 8は現在Preview版です。
    • リリースされたときに実装が異なるところがある可能性がありま

    • #dotnetlabでtweetすると左側に表示されます

    View full-size slide

  5. 今日の目的
    • .NET8のBlazorについておおよその姿が見えてきました。
    • そこで、.NET7のBlazorとテンプレートベースで動きを比較して
    みたいと思います。
    • テンプレートに含まれているサンプルアプリケーションには多くの
    示唆が含まれておりここから読み取れることを解説していきたい。

    View full-size slide

  6. .NET 7のBlazor
    • 今回取り上げるホスティングモデルは以下の通り
    • Blazor Server
    • Blazor WebAssembly
    • Blazor WebAssembly ASP.NET Core Hosted
    • 主に、ネットワーク接続に注目して見ていきます。

    View full-size slide

  7. Blazor Server
    • あらゆるページがサーバーに
    接続された状態が必要
    • サーバが停止すると白くなる。

    View full-size slide

  8. Blazor WebAssembly
    • ブラウザ上でアプリケーション
    が実行される。
    • 一度、アプリケーションが読み
    込まれたあとはネットワークが
    発生するのは外部リソースを
    読み込むときのみ。(このテン
    プレではjsonファイル)

    View full-size slide

  9. Blazor WebAssembly Hosted
    • ブラウザ上でアプリケーション
    が実行される。
    • 一度、アプリケーションが読み
    込まれたあとはネットワークが
    発生するのは外部リソースを
    読み込むときのみ。(このテン
    プレートではWebAPIアクセ
    ス)

    View full-size slide

  10. まとめ
    Blazor Server Blazor WebAssembly
    実行場所 サーバー クライアント
    データベースアクセス 可能 直接はできない
    .NET Core APIの機能 最大限使用可能 一部機能制限
    ダウンロードサイズ 小 大
    アプリコンポーネント .NET/C#のコードはclientに
    提供されない
    .NET/C#のコードはclientにて
    実行
    オフラインサポート なし あり
    CDN 不可能 可能
    多数のユーザの処理 多くのclient接続を処理するた
    めのサーバリソースが必要
    CDNを活用できる

    View full-size slide

  11. .NET 8のBlazorテンプレート
    • Blazor Appsというテンプレートが追加されているこれを詳しく
    見ていく

    View full-size slide

  12. Homeページ
    • ページの読み込みが終わると
    ネットワークの接続がなくなる。
    • サーバーを停止しても表示し
    たページは白くならない。

    View full-size slide

  13. Counterページ
    • Click meボタンの動作をサー
    バー側で行うため、サーバーと
    の間に回線が張られている。
    • サーバを停止させた時、画面
    は白くなる。

    View full-size slide

  14. Fetch dataページ
    • ページの読み込みが終わると
    ネットワークの接続がなくなる。
    • まず、タイトルなど静的要素が
    表示され実アプリでは
    WebAPIやDBなどから取ら
    れるグリッドデータは非同期的
    に表示される。
    • サーバーを停止させても白く
    ならない。

    View full-size slide

  15. ここまでのまとめ
    • Blazor ServerとBlazor WebAssemblyとのいいところどり
    をしたような動作をしている。
    • 一つのアプリケーション内でこれらのモデルの使い分けをするこ
    とが可能。
    • 次に、実際のコードを見てみましょう。

    View full-size slide

  16. Program.cs
    • 既定でRazorコンポーネント
    のSSR用に設定されています。
    • AddRazorComponentsさ
    れてさらにBlazorサーバーの
    対話機能を追加するため、
    AddServerComponents(
    )されています。

    View full-size slide

  17. App.razor
    • App.razorでは
    blazor.web.jsスクリプトが
    追加されています。
    • ストリーミングレンダリングを
    有効にするためにこのスクリプ
    トが追加されています。

    View full-size slide

  18. Homeページ
    • Homeページではサーバー側レンダリング(SSR)が行われサー
    バーが要求に応じてHTMLを生成しています。
    • UIをレンダリングする作業がすべてサーバー上で行われているた
    め読み込みが高速になります。
    • ASP.NET CoreではMVCとRazorページを利用したSSRが以
    前からありますが、再利用可能なWeb UIを構築するためのUIコ
    ンポーネントモデルがありません。
    • Blazorコンポーネントを使ってSSRを実行し、WebAssembly
    とかWebSocket接続は使っていません。

    View full-size slide

  19. Homeページ

    View full-size slide

  20. Counterページ
    • RenderModeServerとい
    う属性が追加されている
    • ページを参照するとサーバと
    の回線接続が確立
    • ボタンクリックでイベントが発
    生してカウントアップ

    View full-size slide

  21. Fetch dataページ
    • ストリーミングレンダリングに対応
    • API呼び出しなどの非同期タスクが終わる前にページ全体がプ
    レースホルダーコンテンツでレンダリング
    • 非同期操作が終わると、更新されたコンテンツがさらに送信され
    てBlazorによってDOMパッチされる
    • これがないと・・・非同期タスクの完了してからページ全体のレンダ
    リングが開始されるのでページの表示開始が遅くなるのでユー
    ザーエクスペリエンスが低下する

    View full-size slide

  22. Fetch dataページ
    • StreamRendering属性が
    追加されています。
    • API呼び出しやDBアクセスな
    ど完全にレンダリングするのに
    長時間かかる非同期タスクを
    実行させるSSRページのユー
    ザーエクスペリエンスを向上さ
    せます。

    View full-size slide

  23. SSR Form
    • フォームのデータをバインドす
    るにはコンポーネントプロパ
    ティに属性をつける
    • razorの有効期間に注意。
    Htmlを生成したらオブジェク
    ト廃棄

    View full-size slide

  24. HtmlForm
    • formタグを使えるようになっ
    た。

    View full-size slide

  25. 参考文献
    • ASP.NET Core updates in .NET 8 Preview 3
    • ASP.NET Core updates in .NET 8 Preview 4
    • ASP.NET Core updates in .NET 8 Preview 5
    • ASP.NET Core updates in .NET 8 Preview 6
    • ASP.NET Core Blazor のホスティング モデル

    View full-size slide

  26. おしまい
    おしまい

    View full-size slide