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
2.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
Semantic Kernelの最新状況及び入門
tomokusaba
0
7
Fluent UI Blazor 最新Update
tomokusaba
1
200
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
270
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
280
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.5k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
670
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
370
Other Decks in Programming
See All in Programming
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
AWS CDKにおける「再利用性」を考える / aws-cdk-reusability
gotok365
6
1.3k
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
How to use Macrobenchmark
veronikapj
0
160
生成AIをkintoneに連携してみた
hideg
0
230
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
CSC307 Lecture 05
javiergs
PRO
0
210
Introduction to GitOps
hwchiu
0
110
Terraformテスト入門
msato
0
530
CSC307 Lecture 06
javiergs
PRO
0
360
英語
s_shimotori
1
220
CSC307 Lecture 09
javiergs
PRO
1
500
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Navigating Team Friction
lara
181
13k
Bash Introduction
62gerente
607
210k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Building Your Own Lightsaber
phodgson
101
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Web Components: a chance to create the future
zenorocha
307
41k
We Have a Design System, Now What?
morganepeng
46
7k
Teambox: Starting and Learning
jrom
130
8.6k
RailsConf 2023
tenderlove
16
720
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
おしまい おしまい