New Features of DotNet 6 Blazor WASM

318 Views

November 27, 21

スライド概要

https://dotnetlab.connpass.com/event/229577/
「.NET 6 における Blazor WebAssembly の新機能」
Elastic Technical Product Marketing Manager/Evangelist
デジタル庁プロジェクトマネージャ 鈴木 章太郎

インスタント・ホット・リロード、改善された Razor エディタなど、新機能を紹介しながら Blazor WebAssembly を使ったアプリケーションを構築していきます。

profile-image

ヴイエムウェア株式会社 ソリューションアーキテクト本部 プリンシパルエンタープライズアーキテクト。 Microsoft で13年間、テクニカルエバンジェリストとして .NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け最新技術啓発活動を実施。その後、Dell、Accenture、Elastic で開発者向け技術啓発活動等を経て現職。 モダンアプリケーション開発、マルチクラウド対応、アーキテクチャ策定等を中心に、技術者向けに最新技術の啓発活動を実施中。 2019年4月〜2021年8月迄、内閣官房 IT 総合戦略室 政府 CIO 補佐官を兼務、2021年9月〜2024年3月迄、デジタル庁 PjM ユニット ソリューションアーキテクトを兼務。

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

Blazor Server と Blazor WebAssembly

5.

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

6.

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

7.

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

8.

.NET 6 における Blazor 新機能

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

“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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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/

24.

まとめ&リソース

25.

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

26.

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

27.

リソース ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● 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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

Thank you for your attention!