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
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
190
Semantic Kernelのネイティブプラグインで知識拡張をしてみる
tomokusaba
0
210
.NET Conf 2024の振り返り
tomokusaba
0
260
.NET Conf 2024 .NETラボ 勉強会 2024年12月
tomokusaba
1
41
C#/.NETのこれまでのふりかえり
tomokusaba
1
240
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
830
Cloud Adoption Frameworkにみる組織とクラウド導入戦略(縮小版)
tomokusaba
1
300
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
430
Semantic Kernelの最新状況及び入門
tomokusaba
0
310
Other Decks in Programming
See All in Programming
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
170
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
190
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
270
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
0
220
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
4.2k
振り返れば奴(Cline)がいる
keiyagi
0
130
Lookerは可視化だけじゃない。UIコンポーネントもあるんだ!
ymd65536
1
140
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
240
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
29
4.8k
Linux && Docker 研修/Linux && Docker training
forrep
22
4k
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
18
3.3k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Rails Girls Zürich Keynote
gr2m
94
13k
Adopting Sorbet at Scale
ufuk
74
9.2k
Facilitating Awesome Meetings
lara
51
6.2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
It's Worth the Effort
3n
184
28k
Six Lessons from altMBA
skipperchong
27
3.6k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Writing Fast Ruby
sferik
628
61k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
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 のホスティング モデル
おしまい おしまい