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
Azure Well-Architected Framework入門
tomokusaba
1
90
Microsoft Playwright Testing廃止!
tomokusaba
0
56
Azure Well-Architected Framework入門
tomokusaba
1
380
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
260
Azure Cloud Adoption Framework(計画編)
tomokusaba
1
96
速報Visual Studio 2026(Insiders)
tomokusaba
0
42
Cloud Adoption Framework(導入戦略)
tomokusaba
0
38
.NET開発者のためのAzureの概要
tomokusaba
0
300
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
530
Other Decks in Programming
See All in Programming
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
190
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
520
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
810
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
220
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.3k
Ktorで簡単AIアプリケーション
tsukakei
0
100
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
490
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
280
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Mobile First: as difficult as doing things right
swwweet
225
10k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Pragmatic Product Professional
lauravandoore
36
7k
The Invisible Side of Design
smashingmag
302
51k
Context Engineering - Making Every Token Count
addyosmani
8
300
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
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
おしまい おしまい