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
Cloud Adoption Framework(導入戦略)
tomokusaba
0
26
.NET開発者のためのAzureの概要
tomokusaba
0
240
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
440
Cloud Adoption Framework入門
tomokusaba
1
35
GitHub Copilot の概要
tomokusaba
1
180
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
540
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
330
Part1 GitHubってなんだろう?その1
tomokusaba
3
1k
Part1 GitHubってなんだろう?その2
tomokusaba
2
970
Other Decks in Programming
See All in Programming
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
730
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
A Gopher's Guide to Vibe Coding
danicat
0
190
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
1
740
Laravel Boost 超入門
fire_arlo
2
170
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
270
OSS開発者という働き方
andpad
5
1.6k
旅行プランAIエージェント開発の裏側
ippo012
1
560
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
350
rage against annotate_predecessor
junk0612
0
140
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.5k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How STYLIGHT went responsive
nonsquared
100
5.8k
What's in a price? How to price your products and services
michaelherold
246
12k
Writing Fast Ruby
sferik
628
62k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
570
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 のホスティング モデル
おしまい おしまい