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.8k
.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 2026(Insiders)
tomokusaba
0
38
Cloud Adoption Framework(導入戦略)
tomokusaba
0
27
.NET開発者のためのAzureの概要
tomokusaba
0
250
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
470
Cloud Adoption Framework入門
tomokusaba
1
39
GitHub Copilot の概要
tomokusaba
1
180
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
550
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
340
Part1 GitHubってなんだろう?その1
tomokusaba
3
1k
Other Decks in Programming
See All in Programming
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
OSS開発者という働き方
andpad
5
1.7k
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
testingを眺める
matumoto
1
140
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
180
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
為你自己學 Python - 冷知識篇
eddie
1
350
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
Kiroで始めるAI-DLC
kaonash
2
630
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Site-Speed That Sticks
csswizardry
10
820
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Into the Great Unknown - MozCon
thekraken
40
2k
Bash Introduction
62gerente
615
210k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Practical Orchestrator
shlominoach
190
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
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 のホスティング モデル
おしまい おしまい