New Features of DotNet 6 Blazor WASM

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

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

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

• https://www.dotnetconf.net/

Blazor Server と Blazor WebAssembly

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

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

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

.NET 6 における Blazor 新機能

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

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

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

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

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

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

• https://github.com/SteveSandersonMS/BlazeOrbital
• https://twitter.com/stevensanderson/
• https://www.dotnetconf.net/

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

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

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

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

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/

• https://minblazor.anthonychu.com/

まとめ＆リソース

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

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

• https://blazor.net/

リソース ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 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://www.dotnetconf.net/ https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical

• https://github.com/dotnet-presentations/dotNETConf/tree/master/2021/MainEvent/Technical
• https://www.dotnetconf.net/

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

• https://t.co/Gd3sMEW262?amp=1
• https://twitter.com/hashtag/Microsoft?src=hashtag_click
• https://twitter.com/hashtag/elasticsearch?src=hashtag_click
• https://twitter.com/hashtag/kibana?src=hashtag_click

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

• https://www.elastic.co/jp/virtual-events/evolution-of-observability-with-elastic-and-azure

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

• https://www.elastic.co/jp/virtual-events/elastic-observability-workshop

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

• https://www.meetup.com/ja-JP/Tokyo-Elastic-Fantastics/events/281836255/

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

• https://events.elastic.co/elasticawsdevdayjapan

Thank you for your attention!