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.4k
.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
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
910
プロンプトエンジニアリング入門
tomokusaba
2
1.2k
Sementic Kernelのネイティブ関数について
tomokusaba
0
930
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
410
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
330
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
290
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
310
Sementic Kernelのネイティブ関数について
tomokusaba
0
270
Other Decks in Programming
See All in Programming
Micro Frontends for Java Microservices - Utah JUG 2024
mraible
PRO
1
110
Ruby Function Composition
bkuhlmann
1
340
Elm 0.19.0 Changes
bkuhlmann
0
510
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
6
1.3k
Open standards for building event-driven applications in the cloud
meteatamel
0
190
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
440
Elm Form Validation
bkuhlmann
0
520
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.4k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
470
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
460
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
260
PHPはいつから死んでいるかの調査
chiroruxx
2
420
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
32
47k
A Philosophy of Restraint
colly
197
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Bash Introduction
62gerente
605
210k
How GitHub (no longer) Works
holman
305
140k
Atom: Resistance is Futile
akmur
260
25k
Writing Fast Ruby
sferik
622
60k
Designing for Performance
lara
601
67k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
We Have a Design System, Now What?
morganepeng
43
6.8k
What's in a price? How to price your products and services
michaelherold
238
11k
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 のホスティング モデル
おしまい おしまい