Blazor Server vs. Blazor WebAssembly: Just the Facts

ここに問題があります:JavaScriptとは異なるものを使用して、サーバーへの接続やアドオンやプラグインなしでブラウザで.NETを実行する方法は?

解決策: Blazor WebAssembly

ここに別の問題があります:Googleで上位にランク付けされるクライアント向けアプリをどのように構築しますか?

The solution: Blazor Server

Blazor ServerとBlazor WebAssemblyがどのように機能するか、異なるか、いつ使用されるか、そしてそれらが最も興味深く比較的新しいフレームワークの1つであるBlazorをどのように形成するかについてすべて理解するために、記事の次のセクションをまとめました。

Try Ignite UI for Blazor

Blazor WebAssembly とは何ですか?

Blazor WebAssembly は、WASM とも呼ばれ、Web ブラウザーで実行されるソフトウェアを作成するためのW3C (World Wide Web Consortium) によって開発された標準です。JavaScript とは異なり、Blazor WebAssembly は、CPU 上でネイティブに近い速度で実行されるコンパイル済みソフトウェアです。

Blazor WebAssembly プログラムは、C などの他の言語で記述でき、WebAssembly バイトコードにコンパイルできます。WebAssembly は JavaScript を置き換えることを意図したものではなく、できるだけ高速に実行する必要があるプログラム (またはプログラムの一部) に対して JavaScript と一緒に実行するためのものです。

Microsoft がサポートするBlazorは、JavaScript の代わりに .NET と C# を使用してシングルページ アプリを構築するための、オープン ソースのクロスプラットフォーム Web UI フレームワークです。Blazorでは、Web アプリケーションをホストする方法として、Blazor Server とBlazor WebAssembly の 2 つがサポートされています。

Blazor Blazor Server vs Blazor WebAssembly

前述のように、Blazor WebAssembly を使用して、クライアント側の C# コードをブラウザーで直接実行できます。これは WebAssembly 上で動作する実際の .NET であるため、アプリケーションのサーバー側の部分からコードとライブラリを再利用できます。

または、サーバー上でクライアントロジックを実行するBlazorこともできます。クライアント UI イベントは、リアルタイム メッセージング フレームワークである SignalR を使用してサーバーに送り返されます。実行が完了すると、必要な UI の変更がクライアントに送信され、DOM にマージされます。

Blazor Server

Blazor Server は、標準のASP.NET Coreアプリケーションを使用します。そのアプリケーション内では、Entity Framework (もともと .NET Framework の不可欠な部分として出荷されたオープンソースのオブジェクト リレーショナル マッピング フレームワーク) を使用して SQL Server データベースを統合するなど、サーバー側の機能を統合できます。

Blazor Server アプリケーションは、SignalR を使用して常時接続を介してブラウザーと通信します。クライアント側ページは、RazorコンポーネントまたはRazorページを使用して作成できます。

Blazor Server アプリは、読み込みが速く、実装も簡単です。Blazor Server のサポートは、.NET Core 3.1 LTS で利用できます。

Blazor Webアセンブリ

Blazor WebAssembly を使用すると、ブラウザーはBlazorアプリケーションをダウンロードできます。

これは、Blazorアプリケーションが Web ブラウザーで実行されることを意味します。アプリケーションを動作させるために、サーバーと常時接続する必要はありません。

ただし、これはクライアント側のアプリケーションのみであるため、サーバー側の機能をBlazorアプリケーションに直接統合することはできません。

そのためには、ASP.NET Core Web API などのサーバー側アプリケーションに接続する必要があります。

Blazor Serverと同様に、RazorコンポーネントまたはRazorページを使用してクライアント側のページを作成できます。

JavaScript と同様に、Blazor WebAssembly アプリは、ブラウザーのセキュリティサンドボックス内からユーザーのデバイス上で安全に実行されます。これらのアプリは、.NET サーバー コンポーネントをまったく使用せずに完全にスタンドアロンの静的サイトとしてデプロイすることも、ASP.NET Coreと組み合わせて .NET を使用したフルスタック Web 開発を可能にし、クライアントとサーバーとコードを簡単に共有することもできます。

Blazor機能のフルライン

• Blazor WebAssembly には、次の Web アプリプロジェクトの生産性を維持するための機能が満載です。
• C# の生産性と強力なランタイム型指定を活用
• 安定した成熟した .NET エコシステム上に構築する
• クライアントとサーバー上のコードと既存の .NET 標準ライブラリを簡単に再利用
• ​Razorコンポーネントファイルに実装されたBlazorサーバーアプリとの共有コンポーネントモデル
• アプリをスタンドアロンの静的サイトとしてデプロイするか、ASP.NET Coreでホストします
• オフライン機能とネイティブOS統合を備えたプログレッシブWebアプリ(PWA)の構築​
• ​認証の組み込みサポート
• 統合されたグローバリゼーションとローカリゼーションのサポート
• Environment-based configuration
• IL trimming and build-time precompression
• Full stack debugging
• Visual Studio、Visual Studio for Mac、Visual Studio Code の優れたツール

SignalR とは

SignalR は、ASP.NET 開発者がアプリケーションにリアルタイム Web 機能を追加するプロセスを簡略化するためのライブラリです。リアルタイム Web 機能とは、クライアントが新しいデータを要求するのをサーバーが待つのではなく、接続されたクライアントが利用可能になるとすぐにサーバー コードでコンテンツをプッシュする機能です。チャット アプリケーションは、SignalR の例としてよく使用されます。

Blazor Server vs Blazor WebAssembly – When to Use?

使用すべきホスティングモデルは、アプリケーションで提供したい目的と機能によって異なります。インターネット接続が弱い場所でアプリケーションを使用する予定がある場合は、サーバー接続がなくても正常に機能するため、Blazor WebAssembly を選択できます。また、オフラインでの作業を好む場合にも適しています。

一方、Googleで上位にランク付けされるクライアント向けアプリケーションの構築を検討している場合は、Blazor Serverの方が適しています。

Blazor WebAssembly vs Angular

AngularJSの後継であるAngularは、フロントエンド開発者がフロントエンドとバックエンドの両方を同時に操作できるようにするためにGoogleによって作成されました。Angularは JavaScript ベースであるため、操作するリソースがたくさんあります。

Angularは、Blazorとは異なり、長い間存在しています。これは、MVC/MVVMアプリケーションを完全にサポートする本番環境対応のフレームワークであり、多くの大企業で使用されています。一方、Blazorは絶えず変化しており、非常に有望であるにもかかわらず、Angularに対抗するのに十分な成熟度をまだ達成していません。Angularツールは、VS Code などの IDE での完全なデバッグ サポートにより、より成熟しています。

比較の詳細については、2022 年のBlazorとAngularの比較に関するブログをご覧ください。

Blazor WebAssembly に組み込まれた米国大統領選挙ダッシュボード

Blazorアプリケーションでサポートできる視覚化と分析の種類を示すために、Infragistics のチームは、現在のデータと過去のデータを比較し、データの傾向を特定するサンプル アプリケーションであるU.S. Presidential Election Dashboardを作成しました。

このダッシュボードでは、2020 年の選挙までの選挙データを対話形式で視覚化できます。ビルトインBlazor (WASM) Ignite UI for Blazorを使用したこのサンプルアプリケーションは、Blazor Data Grid、Blazor Tree Map、Blazor Map、Blazorデータ チャートコンポーネントを備えています。

Blazor WebAssembly Components

Infragistics のIgnite UI for Blazorには、Blazor Server、Blazor WebAssembly、.NET 6 の完全サポートなど、プロが設計したBlazorコンポーネントが含まれています。C#のスキルを使用してリッチなWebアプリケーションを作成し、複雑で習得が難しいJavaScriptを排除できます。Ignite UI for Blazorコントロールには、最速のデータグリッド、60+の高性能チャート(株価チャート、財務チャート、地理空間マップ、複数列コンボボックス)などが含まれます。

フル機能で軽量なBlazor Data GridとBlazor Table は、大量のデータを表示するという課題に対応しながら、お客様が期待するすべてのインタラクティブ機能を提供するために構築されました。Data Grid とすべてのIgnite UI Blazorコンポーネントは、Blazor WebAssembly の完全サポートを含む最新の C# Blazorアプリ向けに設計されているため、最新のブラウザーにデプロイして最高のユーザーエクスペリエンスを実現できます。

そして、Blazor開発者にとってエキサイティングなものがあります。Blazor App Builderをリリースしました!これはアプリ開発プロセスにとってどのような意味を持つのでしょうか?

• App Builderは、アプリやテーマを作成し、データバインディングを簡単に追加できるクラウドベースのIDEを使用して、UIデザインの複雑さを排除する完全なクラウドベースのWYSIWYGドラッグアンドドロップツールです。
• Blazorアプリを10倍速く作成できます。
• App Builderがローコード開発ツールとして機能するため、設計するすべてのものがBlazorの本番環境に対応したコードになります。
• Code Preview では、アプリをビルドしながら、クリーンでテストしやすいソース コードが生成されていることをリアルタイムで確認できます。

超高速のBlazor Data Gridの詳細とBlazorグリッドの例については、こちらをご覧ください。

If you are considering Blazor and have any questions, shoot me an email jasonb@infragistics.com!

また、興味がある場合は、Blazor対AngularおよびBlazor対Reactの比較記事を読むことができます。

Happy Coding!