翻译自 Waqas Anwar 2021 年 3 月 12 日的文章 《A Beginner’s Guide To Blazor Server and WebAssembly Applications》
NETの世界で最新のトレンドを常に把握しているなら、Blazorを聞いたことがあるでしょう。現在、. NETコミュニティではBlazorについて多くの宣伝が行われていますが、その最も一般的な理由は、ほとんどの. NET開発者が10年以上にわたって夢見てきたこと、すなわちC#をサーバーとブラウザの両方で実行できる機能を導入したことです。Blazorは、Java Scriptの代わりにHTML、CSS、C#を使用してインタラクティブなWebアプリケーションを構築することができます。このチュートリアルでは、Blazorの基本的な概念を紹介し、Blazorで使用できるさまざまなホスティングモデルの概要を説明します。また、各ホスティングモデルの長所と短所についても説明し、次のBlazorプロジェクトのホスティングモデルに最適な決定を下すことができます。
Blazorとは？
Blazorは、開発者がサーバ側とクライアント側でC#を使用してインタラクティブなWebアプリケーションを構築できるようにする、フリーでオープンソースの単一ページアプリケーションSPA開発フレームワークです。Blazorは、ブラウザでC #/. NETコードを実行するためにクライアントにプラグインをインストールする必要はありません。すべての主要ブラウザでサポートされているWeb標準であるWeb Assemblyを使用して. NETコードを実行します。Blazorはサーバー側で. NETコードを実行してUIを構築し、SignalR接続を介して更新されたDOMのみをクライアントに転送することもできます。
Web Assembly って何？
Web Assembly（Wasmと略されることもある）は、これらの命令を解釈できる任意のホスト上で実行するように設計されたポータブルなバイナリ形式（低レベル命令セット）です。Web Assemblyの主な目標は、開発者が高性能なWebアプリケーションを構築できるようにすることですが、そのフォーマットは他の環境でも実行し統合できるように設計されています。Web Assemblyは現在、Chrome、Chrome for Android、Edge、Firefox、Safari、Operaなど、すべての主要なブラウザでサポートされています。
Blazorホストモデル
BlazorコンポーネントモデルはBlazorの心臓部であり、UIの変更の計算とUIのレンダリングを分離するように設計されています。そのため、アプリケーションのレンダリング方法にかかわらず、基本的なコンポーネントモデルは変わりません。執筆時点では、4つのレンダリング/ホスティングモデルが利用可能であり、すべて開発段階の異なるものです。
- Blazor Server
- Blazor WebAssembly
- Blazor Electron
- Mobile Blazor Bindings
Blazor ElectronとMobile Blazor Bindingsは現在実験段階にあり、マイクロソフトはこれらのホスティングモデルのリリースを約束していないため、この記事では説明しません。
Blazorサーバーアプリとは？
Blazor Serverアプリケーションはサーバー上で実行され、. NET Coreランタイムを完全にサポートします。すべての処理はサーバー上で行われ、UI/DOMの変更はSignalR接続を介してクライアントに返されます。この双方向SignalR接続は、ユーザーがブラウザからアプリケーションを初めてロードしたときに確立されます。. NETコードはすでにサーバー上で実行されるため、フロントエンド用のAPIを作成する必要はありません。サービス、データベースなどに直接アクセスし、従来のサーバーサイドテクノロジーでは何でもできます。
Blazor Serverを使用する場合
- 完全な. NET Coreランタイムでアプリケーションを実行したい場合
- アプリの初期ダウンロードサイズを非常に小さく保ちたい場合
- アプリケーションの起動時間を非常に速く保ちたい場合
- アプリケーションのコードをクライアントにダウンロードせずにサーバー上に残したい場合
- 既存の. NET開発者が学習曲線をほとんど必要としない、高速なアプリケーション開発サイクルが必要な場合
- アプリを検索エンジンフレンドリーにしたい場合
- Web Assemblyに依存せずに、古いブラウザでアプリケーションを実行したい場合
- Visual Studioで通常の. NETアプリケーションと同じように. NETコードをデバッグしたい場合
- イントラネットや低需要のパブリック向けアプリケーションを構築したい場合
Blazorサーバーを使用しない場合
- アプリケーションが高レイテンシ環境で実行される場合
- サーバーへの固定SignalR接続なしでアプリケーションをオフラインで動作させたい場合
- 多数の接続を持つSignalRクライアントに応答するためにサーバーリソースを増やしたくない場合
Blazor Web Assemblyとは？
このホスティングモデルは、Angular、Vue、Reactなどの現代の人気SPAフレームワークの直接の競争相手であり、ほとんどの開発者がBlazorを学ぶことに興味を持つ主な理由です。開発者はすべてのフロントエンドUIロジックをJava Scriptの代わりにC#で記述できますこのホスティングモデルでは、アプリケーションのDLLは、すべての依存関係と小さなサイズのMono.NETランタイムとともに、最初のリクエストでクライアントにダウンロードされます。クライアント側のMonoランタイムがアプリケーションコードをロードして実行します。Blazor Web Assemblyプログラムは、C、C#などの他の言語で記述でき、Web Assemblyバイトコードにコンパイルされます。
Blazor Web Assemblyを使用する場合
- アプリケーション全体を静的ファイルにコンパイルして、サーバー上の. NETランタイムを必要とせずにクライアントに提供したい場合。つまり、バックエンドはPHP、Node、Railsで記述でき、Blazorで記述されたフロントエンドアプリケーションにサービスを提供できます。
- サーバーに常時接続することなく、クライアント側でオフラインで実行できるアプリケーションを構築したい場合。
- 処理をクライアントに転送し、サーバの負荷を軽減したい場合。
- クライアントとサーバ間でコードとライブラリを共有したい場合。
Blazor Web Assemblyを使わない場合
- クライアントにダウンロードされるファイル/DLLが多すぎて、ペイロードに妥協できない場合。
- 遅い起動時間に妥協できない場合（特にネットワーク接続が悪い場合）。
- アプリケーションが完全なセキュリティ制限でブラウザのサンドボックス環境で実行されなければならないことに妥協できないとき。
Blazorホスティングモデルをよりよく理解するために、Visual Studio 2019でBlazor ServerアプリケーションとBlazor Web Assemblyアプリケーションを別々に作成しましょう。
Visual Studio 2019でBlazor Serverアプリを作成する
Visual Studio 2019を開き、新しいプロジェクトを作成します。利用可能なテンプレートのリストからBlazor Appテンプレートを選択し、次へをクリックします。
プロジェクト名（Blazor ServerAppなど）を指定し、[次へ]をクリックします。以下のダイアログが表示され、作成するBlazorアプリケーションの種類を選択するよう求められます。Blazor Serverアプリを作成するので、Blazor Serverアプリを選択して作成ボタンをクリックします。
Visual Studioは、ソリューションエクスプローラに以下のフォルダとファイルを含むBlazor Serverアプリケーションを作成します。
Blazor Server Appで利用可能な重要なファイルとフォルダについて説明しましょう。
§Program.cs
このファイルには、プロジェクトのエントリポイントであるMainメソッドが含まれます。MainメソッドでCreateHostBuilderメソッドを呼び出して、デフォルトのASP.NET Coreホストを設定します。
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<startup>();
});
}
§Startup.cs
它与我们在标准 ASP.NET Core 项目中使用的文件相同。需要重点注意的一点是 ConfigureServices 方法中调用了 AddServerSideBlazor，该方法添加 Blazor Server App 相关的服务。
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<weatherforecastservice>();
}
在此文件的 Configure 方法中我们还有以下两行重要的代码。MapBlazorHub 方法配置 Blazor Server App 所需的 SignalR Hub Endpoints。MapFallbackToPage 方法会将所有未与任何控制器、razor 页面等匹配的请求映射到 _Host 页面，这将允许所有动态内容请求路由到 SPA 框架，而不是抛出 404 Not Found。
app.UseEndpoints(endpoints =>
{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
§_Host.cshtml
这是应用程序的根页面，每个 Razor 组件/页面都将在此 host 页面中呈现。它具有基本的 HTML 元素，例如 html、head 和 body，以及一些特殊元素。请注意，Blazor 是一个基于组件的框架，Blazor 中的每一内容都是一个组件。<component> 指定了我们想让应用程序根组件呈现的位置。
<component type="typeof(App)" render-mode="ServerPrerendered"></component>
该文件还在末尾注入了 blazor.server.js 文件，此 JavaScript 文件包含设置 SignalR 连接到服务端的代码。此连接在浏览器加载应用程序后立即建立，然后被用于服务端和客户端浏览器之间的实时通信。如果您想了解有关 SignalR 的更多知识，请阅读我的文章 Display Live Sports Updates using ASP.NET Core SignalR。
<script src="_framework/blazor.server.js"></script>
§App.razor
これはBlazor Appの主要コンポーネントであり、その主な仕事はルートを傍受して ** Found ** または ** NotFound ** コンポーネントをレンダリングすることです。ルートに一致するコンポーネントが見つかった場合は ** Found ** コンポーネントが、一致するコンポーネントが見つからなかった場合は ** NotFound ** コンポーネントがレンダリングされます。
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
§MainLayout.cshtml
MainLayoutファイルにはアプリケーションのメインレイアウトが含まれており、マークアップは複数のRazorコンポーネントで共有できます。このレイアウトコンポーネントには通常、ヘッダー、メニュー、フッター、サイドバーなど、アプリケーションの一般的なUI要素が含まれます。作成したデフォルトのMainLayoutには、** NavMenu ** コンポーネントをレンダリングするサイドバーがあります。また、Razor構文 **@Body *** を使用して、他のコンポーネントのコンテンツがレイアウトタグ内でレンダリングされる場所を指定します。
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">@Body</div>
</div>
</div>
§ wwwrootフォルダ
このフォルダには、画像、フォント、アイコン、CSS、Java Scriptファイルなどの静的ファイルが含まれます。
§ PagesおよびSharedフォルダ
このフォルダには、先ほど説明した_Host.cshtmlファイルとRazorコンポーネントが含まれています。Blazorアプリケーションは、拡張子が. razorを持つRazorコンポーネントのコレクションです。これらのコンポーネントのいくつかは、ルーティングを使用してアクセスできるため、ルーティング可能コンポーネントと呼ばれます。例えば、アプリケーションのルートURLに移動すると、以下の ** Index.razor ** コンポーネントが表示されます。URLは、** Index.razor ** コンポーネントの上部にある **@page ** ディレクティブを使用して指定します。
§Index.razor
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
上のページはサブコンポーネント ** SurveyPrompt ** も使用しています。**@page ** ディレクティブがないため、他のコンポーネントに埋め込むことができます。
Pagesフォルダには、ファイルの上部に指定されたパスを使用してアクセスできる他のrazorコンポーネントがいくつかあります。例えば、/counter ** パスに移動すると、 Counter ** コンポーネントがレンダリングされます。同様に、** FetchData ** コンポーネントは **/fetchdata ** パスでレンダリングされます。
Razor Serverアプリケーションには、共有コンポーネントを含む共有フォルダもあります。これらのコンポーネントは、上記のSurveyPromptコンポーネントのように、アプリケーション全体の任意のコンポーネントで使用できます。共有フォルダ内のもう一つの興味深い共有コンポーネントは、Blazor ServerアプリケーションのトップナビゲーションバーをレンダリングするNavMenuコンポーネントです。
§_Imports.razor
このファイルは、ASP.NET MVC Webアプリケーションの_ViewImports.cshtmlファイルに似ており、さまざまなrazorコンポーネントで使用できる名前空間のリストが含まれています。_Imports.razorファイルでこれらすべての名前空間を宣言する利点は、razorコンポーネントごとに繰り返し導入する必要がないことです。
@using System.Net.Http @using Microsoft.AspNetCore.Authorization @using
Microsoft.AspNetCore.Components.Authorization @using
Microsoft.AspNetCore.Components.Forms @using
Microsoft.AspNetCore.Components.Routing @using
Microsoft.AspNetCore.Components.Web @using
Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop
现在是时候运行我们的 Blazor Server 应用程序并在浏览器中查看它的运行情况了。在 Visual Studio 中按 F5，您将看到一个漂亮的默认 Blazor Server 应用程序。试试从侧边栏导航到不同的页面，并尝试在 Counter 页面上使用计数器，您会注意到没有页面刷新或回传到服务器。一切都像经典的 SPA 那样流畅和快速，浏览器和服务端的所有通信都是使用 SignalR 连接进行的。
ブラウザ開発ツールを開くと、すべての標準CSSおよびJava Scriptファイル（blazor.server.jsファイルを含む）がクライアントにダウンロードされ、Web Socket経由でSignalR接続が確立されていることがわかります。
Visual Studio 2019でBlazor Web Assemblyアプリケーションを作成する
Blazor Server Appの基本を理解し、ブラウザでどのように動作するかを確認しました。次に、Blazor Web Assemblyアプリを作成して、違いを理解しましょう。上記と同じ手順に従い、** Blazor App ** テンプレートを使用してVisual Studioで新しいBlazorアプリケーションを作成します。Blazor Appの種類を選択するよう求められたら、今回は ** Blazor Web Assembly App ** を選択する必要があります。
Visual Studioは、ソリューションエクスプローラに次のフォルダとファイルを含むBlazor Web Assemblyアプリケーションを作成します。
この2つのタイプのアプリケーションの違いを簡単に見つけることができます。たとえば、Blazor Web Assemblyアプリケーションには以下のファイルがありません。
- _Host.cshtml
- Error.cshtml
- Startup.cs
- appsettings.json
§index.html
Blazor Web Assemblyアプリケーションでは、メインページとして機能する ** w w wroot ** フォルダに ** index.html ** ファイルがあり、最後に ** blazor.webassembly.js ** ファイルが挿入されています。このファイルは、. NETランタイム、Blazorアプリケーション、およびすべての依存関係のダウンロードを処理するためにフレームワークによって提供されます。また、アプリケーションを実行するためにランタイムを初期化するコードも含まれます。
§Program.cs
Blazor Web Assemblyアプリケーションでは、アプリケーションのルートコンポーネントはProgram.csファイルのMainメソッドで指定されます。アプリケーションのルートコンポーネントは ** App.razor ** で、RootComponentsコレクションにどのように追加されたかを見ることができます。
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<app>("#app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
在 Visual Studio 中按 F5，您将看到一个相似的 Blazor WebAssembly 应用程序。尝试从侧边栏导航到不同的页面，并尝试像之前在 Blazor Server App 中所做的那样在 Counter 页面上使用计数器。 一切看起来感觉一模一样，也没有服务器端回传。
すでに知っているように、Blazor Web Assemblyアプリケーションはアプリケーションとそのすべての依存関係をクライアント側にダウンロードするため、ブラウザ開発ツールを開くと、クライアント側が多数のDLLをダウンロードしていることがわかります（最初のブラウジング時にのみダウンロードされます）。
上記のすべてのファイルは、最初のリクエストでのみダウンロードされ、ブラウザにキャッシュされます。ページをもう一度更新すると、今回はダウンロードされたファイルがほとんどないことがわかります。
まとめまとめまとめ
この記事では、Blazor SPAフレームワークの基本的な概念を紹介しようとしましたが、2つの異なるホスティングモデルでホスティングされている2つのBlazorアプリケーションを見ました。Blazorフレームワークはrazorコンポーネントに大きく依存しているため、コードとファイルの大部分は両方のプロジェクトで同じです。これらのコンポーネントはBlazorアプリケーションの構成要素であり、どのホスティングモデルを使用しても同様の方法で構築できます。この記事が好きなら、共有し、知識を広めてください。
著者：ワカス·アンワル
翻译： 技术译站
链接： 英文原文