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
3k
.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
GitHub Copilot の概要
tomokusaba
1
150
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
440
Azure AI Foundry Agent Serviceを使用してコードファースト アプリを構築する
tomokusaba
1
290
Part1 GitHubってなんだろう?その1
tomokusaba
3
940
Part1 GitHubってなんだろう?その2
tomokusaba
2
910
Part2 GitHub Copilotってなんだろう
tomokusaba
2
1k
Global Azure2025(GitHub Copilot ハンズオン)
tomokusaba
2
920
ASP.NETアプリケーションのモダナイゼーションについて
tomokusaba
0
340
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
260
Other Decks in Programming
See All in Programming
GraphRAGの仕組みまるわかり
tosuri13
8
520
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.7k
5つのアンチパターンから学ぶLT設計
narihara
1
140
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
520
CursorはMCPを使った方が良いぞ
taigakono
1
210
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
420
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
140
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Adopting Sorbet at Scale
ufuk
77
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How to Ace a Technical Interview
jacobian
277
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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
おしまい おしまい