Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
.NET 8のBlazorについてみてみよう
Search
tomokusaba
August 26, 2023
Programming
0
1.7k
.NET 8のBlazorについてみてみよう
.NETラボ勉強会2023年8月
.NET 8のBlazorについてみてみよう
https://dotnetlab.connpass.com/event/291485/
tomokusaba
August 26, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
170
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
380
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
220
.NET Conf 2024の振り返り
tomokusaba
0
270
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
48
C#/.NETのこれまでのふりかえり
tomokusaba
1
250
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
840
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
310
Other Decks in Programming
See All in Programming
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
140
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
180
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
Writing documentation can be fun with plugin system
okuramasafumi
0
120
DROBEの生成AI活用事例 with AWS
ippey
0
140
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
12
4.4k
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
140
Code smarter, not harder - How AI Coding Tools Boost Your Productivity | Angular Meetup Berlin
danielsogl
0
100
Ruby on cygwin 2025-02
fd0
0
150
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
430
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Building Your Own Lightsaber
phodgson
104
6.2k
Navigating Team Friction
lara
183
15k
Site-Speed That Sticks
csswizardry
4
390
Into the Great Unknown - MozCon
thekraken
35
1.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Practical Orchestrator
shlominoach
186
10k
A Tale of Four Properties
chriscoyier
158
23k
Code Reviewing Like a Champion
maltzj
521
39k
Transcript
.NET 8のBlazorについて みてみよう 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ 2023年8月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2023 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • .NET 8は現在Preview版です。 • リリースされたときに実装が異なるところがある可能性がありま
す • #dotnetlabでtweetすると左側に表示されます
今日の目的 • .NET8のBlazorについておおよその姿が見えてきました。 • そこで、.NET7のBlazorとテンプレートベースで動きを比較して みたいと思います。 • テンプレートに含まれているサンプルアプリケーションには多くの 示唆が含まれておりここから読み取れることを解説していきたい。
.NET 7のBlazor • 今回取り上げるホスティングモデルは以下の通り • Blazor Server • Blazor WebAssembly
• Blazor WebAssembly ASP.NET Core Hosted • 主に、ネットワーク接続に注目して見ていきます。
Blazor Server • あらゆるページがサーバーに 接続された状態が必要 • サーバが停止すると白くなる。
Blazor WebAssembly • ブラウザ上でアプリケーション が実行される。 • 一度、アプリケーションが読み 込まれたあとはネットワークが 発生するのは外部リソースを 読み込むときのみ。(このテン
プレではjsonファイル)
Blazor WebAssembly Hosted • ブラウザ上でアプリケーション が実行される。 • 一度、アプリケーションが読み 込まれたあとはネットワークが 発生するのは外部リソースを
読み込むときのみ。(このテン プレートではWebAPIアクセ ス)
まとめ Blazor Server Blazor WebAssembly 実行場所 サーバー クライアント データベースアクセス 可能
直接はできない .NET Core APIの機能 最大限使用可能 一部機能制限 ダウンロードサイズ 小 大 アプリコンポーネント .NET/C#のコードはclientに 提供されない .NET/C#のコードはclientにて 実行 オフラインサポート なし あり CDN 不可能 可能 多数のユーザの処理 多くのclient接続を処理するた めのサーバリソースが必要 CDNを活用できる
.NET 8のBlazorテンプレート • Blazor Appsというテンプレートが追加されているこれを詳しく 見ていく
Homeページ • ページの読み込みが終わると ネットワークの接続がなくなる。 • サーバーを停止しても表示し たページは白くならない。
Counterページ • Click meボタンの動作をサー バー側で行うため、サーバーと の間に回線が張られている。 • サーバを停止させた時、画面 は白くなる。
Fetch dataページ • ページの読み込みが終わると ネットワークの接続がなくなる。 • まず、タイトルなど静的要素が 表示され実アプリでは WebAPIやDBなどから取ら れるグリッドデータは非同期的
に表示される。 • サーバーを停止させても白く ならない。
ここまでのまとめ • Blazor ServerとBlazor WebAssemblyとのいいところどり をしたような動作をしている。 • 一つのアプリケーション内でこれらのモデルの使い分けをするこ とが可能。 •
次に、実際のコードを見てみましょう。
Program.cs • 既定でRazorコンポーネント のSSR用に設定されています。 • AddRazorComponentsさ れてさらにBlazorサーバーの 対話機能を追加するため、 AddServerComponents( )されています。
App.razor • App.razorでは blazor.web.jsスクリプトが 追加されています。 • ストリーミングレンダリングを 有効にするためにこのスクリプ トが追加されています。
Homeページ • Homeページではサーバー側レンダリング(SSR)が行われサー バーが要求に応じてHTMLを生成しています。 • UIをレンダリングする作業がすべてサーバー上で行われているた め読み込みが高速になります。 • ASP.NET CoreではMVCとRazorページを利用したSSRが以
前からありますが、再利用可能なWeb UIを構築するためのUIコ ンポーネントモデルがありません。 • Blazorコンポーネントを使ってSSRを実行し、WebAssembly とかWebSocket接続は使っていません。
Homeページ
Counterページ • RenderModeServerとい う属性が追加されている • ページを参照するとサーバと の回線接続が確立 • ボタンクリックでイベントが発 生してカウントアップ
Fetch dataページ • ストリーミングレンダリングに対応 • API呼び出しなどの非同期タスクが終わる前にページ全体がプ レースホルダーコンテンツでレンダリング • 非同期操作が終わると、更新されたコンテンツがさらに送信され てBlazorによってDOMパッチされる
• これがないと・・・非同期タスクの完了してからページ全体のレンダ リングが開始されるのでページの表示開始が遅くなるのでユー ザーエクスペリエンスが低下する
Fetch dataページ • StreamRendering属性が 追加されています。 • API呼び出しやDBアクセスな ど完全にレンダリングするのに 長時間かかる非同期タスクを 実行させるSSRページのユー
ザーエクスペリエンスを向上さ せます。
SSR Form • フォームのデータをバインドす るにはコンポーネントプロパ ティに属性をつける • razorの有効期間に注意。 Htmlを生成したらオブジェク ト廃棄
HtmlForm • formタグを使えるようになっ た。
参考文献 • 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 のホスティング モデル
おしまい おしまい