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
November 24, 2023
Programming
1
3.1k
.NET 8世代のBlazorについて
.NETラボ勉強会2023年11月
.NET 8世代のBlazorについて
https://dotnetlab.connpass.com/event/299544/
tomokusaba
November 24, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Microsoft Playwright Testing廃止!
tomokusaba
0
47
Azure Well-Architected Framework入門
tomokusaba
1
350
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
240
Azure Cloud Adoption Framework(計画編)
tomokusaba
1
91
速報Visual Studio 2026(Insiders)
tomokusaba
0
41
Cloud Adoption Framework(導入戦略)
tomokusaba
0
32
.NET開発者のためのAzureの概要
tomokusaba
0
280
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
510
Cloud Adoption Framework入門
tomokusaba
1
45
Other Decks in Programming
See All in Programming
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
150
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
460
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
970
What's new in Spring Modulith?
olivergierke
1
140
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
briete
0
140
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
120
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
970
The Flutter Journey of Building a Live Streaming App — With a Side of Performance Tuning
u503
1
110
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.8k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
Embracing the Ebb and Flow
colly
88
4.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Thoughts on Productivity
jonyablonski
70
4.9k
A Tale of Four Properties
chriscoyier
160
23k
Facilitating Awesome Meetings
lara
56
6.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Mobile First: as difficult as doing things right
swwweet
224
10k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Site-Speed That Sticks
csswizardry
11
890
Statistics for Hackers
jakevdp
799
220k
Transcript
.NET 8世代のBlazorにつ いて 株式会社SAKURUG プロダクトDiv 草場 友光 .NETラボ 2023年11月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • #dotnetlabでtweetすると左側に表示されます
今日の目的 • .NET 8がリリースされました。 • なかでも、BlazorはBlazor Web Appsが加わるという大きな 変更があります。 •
これまでのBlazorを振り返るとともにこれからのBlazorアプリ 開発のあり方について探っていきましょう。
Blazor Server • サーバ上で実行 • UIの更新、イベント処理、 JavaScriptの呼び出しなど はSignalR接続経由で処理 • オフラインサポートがない
• 常に回線接続が必要 • ASP.NET Coreサーバが必 要
Blazor WebAssembly • クライアント側の WebAssemblyベース の.NETランタイム上でコン ポーネントを実行 • スタンドアロンBlazor WebAssemblyの場合
ASP.NET Coreサーバが必 要ありません。CDNから配信 することが可能 • ダウンロードサイズが大きい
Blazor Serverでアプリを作る問題点 • アプリケーションがサーバーから離れられない。 • 回線が切れると即時アプリケーションが停止する。
Blazor WASMでアプリを作る問題点 • Blazor WASMのみでは実用的なアプリにならない。必ず WebAPIなどのデータソースと組み合わせる必要あり。 • WebAPI≒RESTAPIの知識が不可欠 • 多くはWebAPIとBlazor
WASMを一体として設計する Hostedですすめていた。 • 当然、求められる知識はServerに比べて多い。
Blazor WebAssembly テンプレートの変更点 • Blazor WebAssembly ASP.NET Core Hostedのプロ ジェクトテンプレートは廃止
• これに伴い、認証認可のドキュメントも.NET 8のドキュメントから は同プロジェクトテンプレートに基づいた記述が消えている • もちろん同じやり方でできないかと言われれば多分できる(未検 証) • .NET 6,7のテンプレから.NET 8にアップグレードするのが早い?
プライマリーコンストラクタ • クラスの直後に()をつけてパラメータを書くことでコンストラクタ を簡単にかけるようになりました。 • DIサービスとなるクラスに他のサービスが必要になる場合がユー スケースになります。
フルスタックWeb UI
レンダーモード 名前 説明 場所 インタラクティブ プロジェクト スタティック 静的サーバーレンダリン グ(SSR) サーバー
× サーバー 対話型サーバ Blazor Serverを利用 したサーバーレンダリン グ サーバー ◦ サーバー 対話型 WebAssembly Blazor WebAssemblyを利用 したクライアントレンダリ ング クライアント ◦ クライアント 対話型自動 最初にBlazor Server を利用しその後後続のア クセスにBlazor WebAssemblyを利用 する対話型クライアントレ ンダリング クライアント ◦ クライアント
レンダーモード 名前 説明 場所 インタラクティブ プロジェクト スタティック 静的サーバーレンダリン グ(SSR) サーバー
× サーバー 対話型サーバ Blazor Serverを利用 したサーバーレンダリン グ サーバー ◦ サーバー 対話型 WebAssembly Blazor WebAssemblyを利用 したクライアントレンダリ ング クライアント ◦ クライアント 対話型自動 最初にBlazor Server を利用しその後後続のア クセスにBlazor WebAssemblyを利用 する対話型クライアントレ ンダリング クライアント ◦ クライアント 1 2 3
1の選択肢 • 従来のBlazor Server的な選択肢 • 最も開発効率が高い • 従来のBlazor Serverに比べてSSRにして回線接続が切れれば サーバー負荷の軽減が狙える。
• イントラネット内での使用など比較的安定した環境で使用する場 合では第一選択肢
2の選択肢 • 従来のBlazor WebAssembly的な選択肢 • 従来のBlazor WebAssemblyの場合ASP.NET Core Hostedの後継として検討 •
WebAPIは別サーバとして用意 • インターネットに広くサービスを公開する場合には第一選択肢
3の選択肢 • 2の亜種 • 全く新しい選択肢 • 基本的な構築方法としては2と同様
Blazor スキャフォールディング(Preview) • Entity Framework Coreのモデルに基づいてCRUDページ を生成する。 • Blazor静的サーバーレンダリングのページを生成する。 •
サーバー側のレンダリングに基づいているのでWebAssembly で実行する場合はサポートされません。 • QuickGridを使用してデータを表示します。
デモ
.NET Aspire • 回復性・可観測性・構成可能なクラウドネイティブアプリケーション を.NETで構築するためのアプリケーションスタック。 • サービス検出・テレメトリ・回復性・ヘルスチェックの機能を使用で きます。 • 時間の限り紹介
デモ
参考文献 • ASP.NET Core Blazor • Announcing ASP.NET Core in
.NET 8 • Introducing .NET Aspire: Simplifying Cloud-Native Development with .NET 8 • .NET Aspire overview
おしまい おしまい