Blazor vs Razor

私が下で提示している情報は、主にスティーブン・アンダーソンの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>

実行

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

webAssemblyとjavascriptの実行を詳細に比較するには、 この記事を参照してください。

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

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」）が.N​​ET 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");
        }
     }
}