web-dev-qa-db-ja.com

ブレイザーvsレイザー

Blazorの発明により、これらの2つの言語の間に（コードの作成と実際のコンパイル/実行の両方で）かなりの効率があるのだろうか？

https://github.com/SteveSanderson/Blazor

誰かが実際にそれを実装している場合、パフォーマンステストを実施しましたか？

c#razorasp.net-coreblazor
20
benpage

以下に示す情報は、主に 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");
        }
     }
}
36
Felipe