ブレザーvsカミソリ

以下に紹介する情報は、主にSteven Andersonの2月2日のブログエントリと、プロジェクトの目標に対する私自身の理解からの言い換えです。

Blazorは、現在の.NET Razorスタックのアイデアと最新のSPAフレームワークアーキテクチャを組み合わせることを目的としています。

コード作成

この例に見られるように、柔軟にすることを目的としており、コンポーネントベースのレイアウトを推奨します。

<div class="my-styles">
   <h2>@Title</h2>
   @RenderContent(Body)
   <button onclick=@OnOK>OK</button>
</div>

@functions {
    public string Title { get; set; }
    public Content Body { get; set; }
    public Action OnOK { get; set; }
}

HTMLマークアップで再利用可能なコンポーネントを作成します。

<MyDialog Title="Ski Lift controls" onOK="DismissSkiDialog">
    Gondola @gondolaId is now <em>running</em>
</MyDialog>

実行

webAssemblyは高速であるため、Blazorは高速であると予想されます。ブラウザのwasmローダーによって直接実行されるバイトコードにコンパイルされます。たとえば、javascriptでは、 .jsファイルを最初にロードし、個別のファイルを結合してから、解析およびトークン化してツリー構造に組み込む必要があります。その後、ブラウザのjavascriptエンジン（たとえば、 chromeのv8エンジン ）で解釈できます。

webAssemblyとJavaScriptの実行の詳細な比較については、 この投稿を参照してください。

SPAのアーキテクチャと設計

Web用のJavaScriptで既に構築された優れたフレームワークがあるため、Blazorは、React、Vue、Angularなどの現代のフレームワークで既に使用されているアイデアに触発され、次のような詳細なコンセプトを特集します。

• レイアウト
• ルーティング
• 依存性注入
• 遅延読み込み
• 単体テスト

これらの概念はRazorのサーバー側に存在しますが、すべてがクライアント側に存在するわけではないことに注意してください。フロントエンドルーティングはRazorでは使用できず、多くの場合、そのシナリオを満たすためにjavascriptフレームワークと組み合わされています。

私は個人的にRazorページをAngularJsとともに提供するエンタープライズアプリケーションに取り組んできました。それは時々乱雑になることができ、決して「きれい」に感じた。

要約すれば

Razorは、APIロジックとサーバー側のテンプレートを処理できるサーバーベースのアーキテクチャ向けのソリューションですが、javascriptの外部にクライアント側のロジックを提供することはできません。

Blazorは、Razorと同じサーバー側の機能を許可する次のステップ（できれば後継者）ですが、javascriptの代わりにC#を使用してクライアント側のロジックを統合します。

私は現在、Blazorで小さなテストプロジェクトに取り組んでおり、これまでのところ、使いやすいと感じています。しかし、ブログとGitHubページの警告が示すように、本番環境に近いものではありません。

2018-09-26からのサードパーティ編集

.NET Conf 2018で、 Razorコンポーネント（「サーバー側Blazor」）が.NET Core 3.0の一部になることが発表されました。このコードは示されました：

// inside index.cshtml - serverside use of blazor
<SurveyPrompt Title="How is Blazor working for you?" />
<div>
     <img id="bot" src="@imageurl" />
<div>
<button class="btn btn-primary" onclick="@changeImage">Click me</button>

@functions{

    string imageurl = "/images/dotnet-bot-1.png";

    void changeImage()
    {
        if(imageurl.Contains("1"))
        {
            imageurl= imageurl.Replace("1", "2");
        } 
        else 
        {
            imageurl= imageurl.Replace("2", "1");
        }
     }
}