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
2k
.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
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
200
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
940
プロンプトエンジニアリング入門
tomokusaba
2
1.2k
Sementic Kernelのネイティブ関数について
tomokusaba
0
940
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
420
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
330
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
300
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
320
Sementic Kernelのネイティブ関数について
tomokusaba
0
280
Other Decks in Programming
See All in Programming
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
230
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
Open standards for building event-driven applications in the cloud
meteatamel
0
190
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Try creating your own orderedmap
kazamori
1
270
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
330
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
360
新宿ダンジョンを可視化してみた
satoshi7190
3
420
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
見た目から始める生産性向上
ikumatadokoro
10
1.5k
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Web development in the modern age
philhawksworth
203
10k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
What's in a price? How to price your products and services
michaelherold
238
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
0
51
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
GraphQLとの向き合い方2022年版
quramy
33
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
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
おしまい おしまい