New Features of DotNet 6 Blazor WASM

.NET 6 における
Blazor WebAssembly の新機能
鈴木章太郎
Elastic テクニカルプロダクトマーケティングマネージャー/エバンジェリスト
デジタル庁ソリューションアーキテクト

Elastic
Technical Product Marketing
Manager/Evangelist
デジタル庁
ソリューションアーキテクト
元 Microsoft Technical Evangelist
Twitter : @shosuz
Shotaro Suzuki

アジェンダ
● Blazor Server と Blazor WebAssembly
● .NET 6 における Blazor 新機能
● まとめ＆リソース
https://www.dotnetconf.net/

Blazor Server と Blazor WebAssembly

Modern Web UI with .NET & Blazor
Server WebAssembly Hybrid
HTML、CSS、.NET、C#... JavaScript の代わりに Open Web 標準でアプリ開発
どこにでもホストできる

MVC
Razor
Pages
Blazor
HTTP
APIs
SignalR
Part of the ASP.NET Core family
Web UI Services
Worker gRPC
SPA

Web アプリ開発における両者の違い
Blazor Server Blazor WebAssembly
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
✓ DB アクセス含むサーバー機能へのフルアクセス
✓ 高速なスタートアップ
✓ コードがサーバーから離れない
✓ 古いブラウザとシンクライアントをサポート
✓ 永続的な接続が必要
✓ UI の遅延が高い
✓完全にクライアント側で実行
✓必要なサーバーコンポーネントなし
✓静的サイトとしてホスト
✓オフラインで実行可能
✓大きなダウンロードサイズ
✓ランタイムパフォーマンスの低下

.NET 6 における
Blazor 新機能

Blazor in .NET 6
• .NET Hot Reload
• プリレンダリング中の状態の永続化
• エラー境界
• WebAssembly AOT
• ランタイム再リンク
• Native Reference
• ダウンロードサイズが小さい
• 動的コンポーネントレンダリング
• JS からコンポーネントをレンダリング可能
• カスタムイベント引数
• 初期化子
• コンポーネントごとの JavaScript
モジュール
• 親からジェネリック型を推論する
• ジェネリック型の制約
• 大きなバイナリデータを処理する
• SignalR メッセージサイズの制限を削除
• 必須パラメータ
• クエリ文字列パラメーターの処理
• HTML ヘッドに影響を与える
• SVG サポート

Blazor – .NET 6 による強化
DOM
Blazor
WebAssembly
.NET
Razor Components
Blazor
.NET
Razor Components
DOM
SignalR
✓ DB アクセス含むサーバー機能へのフルアクセス
✓ 高速なスタートアップ
✓ コードがサーバーから離れない
✓ 古いブラウザとシンクライアントをサポート
✓ 永続的な接続が必要
✓ UI の遅延が高い
✓完全にクライアント側で実行
✓必要なサーバーコンポーネントなし
✓静的サイトとしてホスト
✓オフラインで実行可能
✓大きなダウンロードサイズ
✓ランタイムパフォーマンスの低下
Blazor WebAssembly の事前 (AOT) コンパイル対応
Blazor WebAssembly アプリのダウンロードサイズの縮小
Error Boundaries
Razor コンポーネント型の推論とジェネリック型の制約
動的コンポーネント
プリレンダリング中の Blazor コンポーネント状態の永続性
Hot Reload, Native File Reference, 他
.NET 6

.NET 6 における
Blazor コンポーネントモデルの改善
• 必須パラメータ
• 親からジェネリック型を推論
• ジェネリック型の制約
• コンポーネントごとの JavaScript モジュール
• 初期化子
• JavaScript ビルドプロセスの統合

Blazor Fluent UI
Components
• 40+ Blazor コンポーネント
• Light、Dark、ハイコントラストモードで
完全にアクセス可能
• 既定のスタイルは、最新の Windows
11 Fluent ビジュアルと一致
• Web、Windows、Teams、Office、
および他のとの統合
aka.ms/blazor-fluent-ui

Web Assembly （WASM）とは
• Web ブラウザ上でバイナリコードを直接実行できる
• 2019 年 12 月 W3C 勧告、正式なウェブ標準に認定
• 様々な言語のバイナリコードを主要なブラウザのサンドボックス内で動作可能
• Web Assembly バイナリコードへのコンパイラなどのツールセットが必要
Edge
Chrome
Safari
Firefox
Web Assembly
バイナリコード
（W3C 標準技術）
C++ WASM
コンパイラ
Rust WASM
コンパイラ
C WASM
コンパイラ
SQLite ソースコード（C）
Rust ソースコード
C++ ソースコード

.NET 6 における
Blazor WebAssembly 新機能
• 事前 (AOT) 実行コンパイル
• カスタム要素
• 小規模なアプリサイズ
• Native File Reference
• Hot Reload
• Component, .NET, HTML, CSS…
…その他数十個の更新あり

.NET Web Assembly ビルドツール
Runtime
relinking
Ahead-of-time
(AOT)
compilation
Native
dependencies

Blazor WebAssembly 小規模なアプリサイズ
.NET 5
• Publish size: 1.7 MB
.NET 6
• Publish size: 1.0 MB
• ~40% size reduction

Rust
Central Server
Manufacturing Hub Mission Control Accounting Libraries
Blazor React WPF
gRPC
ASP.NET Core
• サンプルプロジェクト
• 新インベントリ管理 UI
• サーバーロード軽減
• オフラインでのアプリ活用
• Native Reference
• 3プラットフォームのアプリを統合
• Rust の QR コードライブラリ利用
https://github.com/SteveSandersonMS/BlazeOrbital
“Warp-speed WebAssembly with Blazor in .NET 6”
Steve Sanderson

AOT 速度への影響
Debug
Release
AOT
4200 satellites
4600 satellites
52,000 satellites
10x gains on intensive CPU-bound computation

The “JBAM stack” pattern
迅速で安全で回復力のあるアプリケーションの構築を中心とした一連のアーキテクチャ上の意思決定とベスト・プラクティスを網羅

Blazor WebAssembly のホスティング
ASP.NET
Blazor
WebAssembly
APIs
Globally
distributed
hosting
Blazor
WebAssembly
Microservices
APIs
Hosted Standalone

Blazor WebAssembly のホスティング
ASP.NET
Blazor
WebAssem
bly
APIs
Globally
distributed
hosting
Blazor
WebAssem
bly
Serverless
functions
APIs
Hosted Azure Static Web Apps
ASP.NET
Globally
distributed
hosting Microservices
Blazor
WebAssembly
APIs
Blazor
WebAssembly
APIs

Azure Static Web Apps
• グローバル分散型ホスティング
• Azure Functions を使用したサーバーレス API
• リポジトリから自動的にビルドおよびデプロイ
• 組み込みの認証とルーティングルール
• カスタムドメインと無料の TLS 証明書
• ステージング環境
• 豊富なフロントエンドテクノロジーの選択肢

Azure Static Web Apps による
.NET 6 サポート
自動的にビルドおよびデプロイ:
• .NET 6 Blazor WebAssembly
• 事前 (AOT) コンパイルを含む
• .NET 6 Azure Functions APIs
• インプロセスおよび分離された .NET Functions アプリ
aka.ms/SWA-Blazor
https://minblazor.anthonychu.com/

Get started with Blazor
• Go to https://blazor.net
• Install the .NET SDK
Visual Studio Visual Studio for Mac Visual Studio Code
+ C# extension

● C＃10 新機能
● .NET6 を搭載したエンタープライズグレードの Blazor アプリ
● .NET MAUI の概要
● F＃6 の新機能
● ホットリロードで .NET 開発をスピードアップ
● .NET およびクロスプラットフォームアプリのテストツール
● Roslyn と AI で生産性を強化
● .NET6 Minimal API
● .NET6 の ASP.NET Core MVC および Razor ページ
● .NET6 を搭載した次世代の Blazor コンポーネント
● EF Core 6 の新機能
● .NET Framework から.NET6 へのアップグレード
● .NET MAUI と Blazor を使用してクロスプラットフォームのネイティブアプリを構築する
● ・.NET6 と Microsoft Identity を使用して Minimal API を保護する
● ・.NET Everywhere-Windows、Linux、およびそれ以降
リソース
https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical

【無料 e-Book
ダウンロード開始！
Elastic on Microsoft
Azure：データをさらに
活用する 4 つの方法】
msft.it/6010XhzVe
#Microsoft
#elasticsearch
#kibana
#Azure ポータルから #Elastic Cloud
を使ってデータ投入、検索、システム監視、
管理する手順をご紹介したガイドを、無料
公開中です。

Elastic x Microsoft Azure 統合による
Observability / APM の進化
https://www.elastic.co/jp/virtual-events/evolution-of-observability-with-elastic-and-azure
12/1 Webinar
Microsoft Japan Digital Days 2021 Recap

Elastic オブザーバビリティワークショップ
https://www.elastic.co/jp/virtual-events/elastic-observability-workshop
12/8 Hands on Webinar

Elastic Meetup
https://www.meetup.com/ja-JP/Tokyo-Elastic-Fantastics/events/281836255/
12/8 Community

VIRTUAL DEVDAY
Elastic Observability で
AWS 環境の健全性とパフォーマンス
を監視する - Search. Observe. Protect.
https://events.elastic.co/elasticawsdevdayjapan
12/15
Webinar

New Features of DotNet 6 Blazor WASM

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to New Features of DotNet 6 Blazor WASM

Similar to New Features of DotNet 6 Blazor WASM (20)

More from Shotaro Suzuki

More from Shotaro Suzuki (20)

Recently uploaded

Recently uploaded (10)

New Features of DotNet 6 Blazor WASM