Blazorオープンソースコンポーネントライブラリ-Masa Blazor

ブレイザーの公式説明

Blazor 允许您使用C#而不是 JavaScript构建交互式Web UI`。 Blazor 应用由可重用的 Web UI 组件组成，这些组件使用 C#、HTML 和 CSS 实现。客户端和服务器代码都是用 c#编写的，允许您共享代码和库。

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
NETで記述されたサーバー側とクライアント側のアプリケーションロジックを共有します。
UIをHTMLとCSSにレンダリングし、モバイルブラウザを含む多数のブラウザをサポートします。
与新式托管平台（如 Docker）集成。

NETを使用したクライアントサイドWeb開発には、次のような利点があります。

Java Scriptの代わりにC#を使用してコードを書く。
利用现有的 .NET 库生态系统。
サーバとクライアント間でアプリケーションロジックを共有します。
NETのパフォーマンス、信頼性、セキュリティを活用できます。
在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
安定した機能豊富で使いやすい共通の言語、フレームワーク、ツールのセットに基づいて構築されます。

ここでいくつかの小さなパートナーの手を参照して、いくつかは誇張されている、少なくともVSは3つのプラットフォームで効率的に動作します。残りは食べ続けます。

Blazor Vs MVC

MVCとは？

ASP.NET Core MVCは、“Model-View-Controller”デザインパターンを使用してWebアプリケーションとAPIを構築するためのリッチなフレームワークです。

BlazorはインタラクティブなWeb UI、MVCはWebアプリケーションとAPIです。

インタラクティブWeb UIとは？

Google、Baiduは、この説明なしでラウンドを回しても、Wikiは困惑しています。

インタラクティブなWeb UIはインタラクションに焦点を当てており、Blazorの公式な説明はJava Scriptの代わりにC#を使用することです。Java Scriptの機能を見てみましょう。

HTMLページへの動的テキストの埋め込み
ブラウザイベントへの応答
HTML要素の読み取りと書き込み
データがサーバに送信される前にデータを検证
訪問者のブラウザ情報を検出します。作成および変更を含むクッキーの管理

これらの基本的な機能により、ユーザーは静的なページをジャンプする必要はなく、エクスペリエンスははるかに良くなります。

Blazorの利点は？

純粋に静的なページではなく、MVCはJava Scriptを使用して同じことを達成できますが、Java Scriptをマスターし、jQuery、Angular、Vueなどを学ぶ必要があります。Blazorのインタラクティブ機能はC#を使用しています。

ブローは吹き飛ばされましたが、本当に100% C#になれるのでしょうか？互換性やパフォーマンスなど、さまざまな問題に直面することがあります。それでは、使ってもいいですか？待って、下にメロンがある。

Blazor Vs最新のフロントエンドAngular、Vueなど

いくつかの面から対比してみよう

デバッグデバッグ

Blazor：Vistual Stuidio + F5，VS Code/命令行工具 + dotnet watch

Web Packよりもはるかに高速で、Viteとほぼ同じです。

非複雑なシナリオではHot Reloadは大丈夫ですが、奇妙な問題が多すぎて見通しは良いので、今のところCtrl + F 5で起動するか、コマンドラインで起動します。

VS 2022のCtrl + F 5がホットリロードに対応

最新のフロントエンド：Webpack/Vite

家族のバケツ。

例えば、VueファミリーにはVue Cli、Vue Router、Vuexがあります。

Blazor：

Cli：dotnet cli
Router：Microsoft.AspNetCore.Components.Routing.Router
Vuex：Blazor状態管理、WASM状態はブラウザのメモリに保存され、サーバーはサーバーのメモリに保存される点が異なります。さらに、Blazor状態管理は、永続ストレージ、クロスラインストレージ（サーバーで共有サーバーメモリ）、ASP.NET Core保護されたブラウザストレージ（サーバー専用機能）をネイティブにサポートする. Net機能のおかげでさらに強力です。

コンポーネントライブラリ

主流のBootstrap、Ant Design、Material Designなどの双方がある。しかし、現代のフロントエンドの長年の蓄積のために、品質には一定のギャップがあります。

豊富さに加えて、BlazorはJava Script呼び出しでロードし、AngualrやReactなどのコンポーネントを生成することができます。

Java Scriptの代わりにC#を使うのと少し矛盾するように見えますが、環境に溶け込むのも良いことです。

以下の図は、Blazorが提供するInventory-grid ComponentがReact（もちろんAngular）で参照した例です。

さらに驚くべきことに、Reactで再利用されたBlazor ComponentはHot Reloadをサポートします。Hot Reloadがどうなるかはさておき、この方向性だけでもHot Reloadの未来を見る価値があります。

Reactだけでなく、WPFにも再利用できるコンポーネントを提供できる。

サードパーティ·ライブラリー

いくつかの一般的なフロントエンドを比較する。

ネットワーク：最新のフロントエンドにはaxios、BlazorにはHttpClient
データ操作：最新のフロントエンドにはLodash、BlazorにはLinqがある
最新のフロントエンドにはMoment.js、Day.js、BlazorにはDateTimeがあります。
リアクティブプログラミング：最新のフロントエンドにはrx.jsがあり、BlazorにはRx. Netがあります（使用されていない、理論的には. Netは基本的に使用できます。
Mock：最新のフロントエンドにはMock. Jがあり、BlazorにはMoqがあります。もちろん、mock 以外にもエンドツーエンドのものがあります。

比較すると、. Netはまだ少し利点がありますが、完璧ですか？もちろん違いますが、もう一つの欠点があります。

Charts：最新のフロントエンドにはEChartsなどがあり、Blazorは話したくない

現在、Blazorには成熟した無料のChartsコンポーネントライブラリはありませんが、BlazorはJSと対話できるため、EChartsを呼び出すのは簡単で、パートナーのハンズオン能力を少し試してみてください。

リッチテキストエディタ、ドラッグ。。。。。
ブレイザーはグループの会話から身を引いた。

パッケージの管理

Blazor：NuGet
モダンフロントエンド：NPM、Yarn

パフォーマンス

データは直感的ではありません。まず、. Net Conf 2021のデモスクリーンショットを見てください。

定量的なデータはあるか？あるもの：

视频地址：https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4

AOTは悲しみを解決できるか？どちらもない。少なくともアプリケーションサイズは確かにはるかに大きいですが、AOTが特定のシナリオの問題を解決できることを妨げることはありません。テクノロジーは常に盲目的ではなく、適切なシナリオで使用することを選択する必要がある。

終わったか？

Blazorは. Netの肩の上に立っているため、Blazorはネイティブサポートされているジェネリック、DI、オブジェクト指向設計（TSもそうですが）、多数の. Netライブラリ、クロスプラットフォームアプリケーション（MAUI）など、より多くの明るい点を持っているため、この比較はBlazorにとって不公平です。

Blazorの欠点だけを見る必要はありません。. Net上のフロントエンドがどこまで行くかを見ることもできます。

ここを見て、いくつかの. NETアンティーククラスの大物が出てきて、Silverlight!はい、しかし今回はWASMはプラグインのダウンロードを要求しませんでした。

Web Assembly Vs Serverサーバーサイドレンダリング

Web Assembly：Web Assemblyは、最新のWebブラウザで実行できる新しいコーディング方法です。コンパクトなバイナリ形式を備えた低レベルのアセンブリのような言語で、ネイティブのパフォーマンスに近い実行が可能で、C / C++などの言語のコンパイルターゲットを提供してWeb 上で実行できます。また、Java Scriptと共存できるように設計されており、両方が動作する。
Server Server Side Render SSRコンポーネントをサーバー側のHTML文字列としてレンダリングし、それらを直接ブラウザに送信し、最後にこれらの静的タグをクライアント側で完全にインタラクティブなアプリケーションとして“アクティブ化”します。

SSRを使う理由

サーバーサイドレンダリングSSRの主な利点は次のとおりです。

検索エンジンのクローラーが完全にレンダリングされたページを直接見ることができるため、SEOが向上します。
コンテンツの到着時間の短縮time-to-content

SSRを使うとき

サーバ側レンダリングSSR Server Side Renderingを使用する際には、いくつかのトレードオフが必要です。

開発条件が限られる。ブラウザ固有のコード。一部のライフサイクルフック関数でのみ使用できます。一部の外部拡張ライブラリでは、サーバレンダリングアプリケーションで実行するために特別な処理が必要な場合があります。
ビルドセットアップとデプロイに関する追加要件。任意の静的ファイルサーバにデプロイできる完全に静的な単一ページアプリケーションSPAとは異なり、サーバレンダリングアプリケーションはサーバ側で実行される必要があります。
サーバー側の負荷が増えます。

サーバ侧レンダリング対プリレンダリングSSR対Prerendering

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

Blazor Serverはプレンダリングをサポート

BlazorはWeb AssemblyまたはServerです。

Net Conf 2021カンファレンスのグラフをご覧ください。

要約してください

サーバーはUIレイテンシが高く、長い接続を永続させる
Web Assemblyはダウンロードサイズが大きく、ランタイムパフォーマンスが遅くなります。

何をしている？

もう一つの古い問題は、. Netのカバレッジが広すぎるため、すべての問題を解決することは困難です。トレードオフを検討した後、. Netエコシステムに小さな貢献をすることはできるでしょうか？

オープンソースのコンポーネントライブラリ

コンポーネントライブラリに戻ると、現在の市場にはコンポーネントライブラリがたくさんありますが、なぜこの泥沼に足を挿入し続ける必要がありますか？

コンポーネントライブラリを開発した学生、またはソースコードに貢献した学生は、コンポーネントを書くことがいかに複雑であるかを理解するはずです。デザインに対する美的視点も人によって異なります。好きなデザインが実現しない場合はどうなりますか？最初から書くのはとても疲れたので、一つだけ試してみました。

まず考えを見てみましょう

架构图

簡単なプロファイル：

Blazorをベースに、Blazor Componentという新しいコンポーネントライブラリを構築します。

彼の特徴は何ですか？

インタラクションのみ、スタイルなし。
DOM構造の標準化
カスタマイズ可能なほぼすべてのスロット（Vueからのコンセプト）を開き、スロットのDomを置き換えることができます。

スロットとインタラクションの統合単体テスト（現在38%、短期目標80%、長期目標90%+）
Material Design（Vuetifyからのスタイル）に基づくサンプルプロジェクトは、生産可能になります（当社とフォーチュン500企業が使用しています）。
デザイン+スタイルに基づいてプロパティを制御するだけで、新しいコンポーネントライブラリをすばやく実装できます。

未来は素晴らしいものであり、私たちはこのようになりたい。

暑さの波に乗ってごめんなさい。

MASA Blazor

Blazor ComponentとMaterial Designに基づくBlazorコンポーネントライブラリ

現在、68の基本コンポーネントがあり、今後も追加されます。
Url、ブレッドクラム、メニュー 3リンケージ、高度な検索、i 18 nなどの. Net機能との深い統合と一般的に使用されるクラスコンポーネントの組み合わせを提供するプリセットコンポーネント。
MASA Blazor Proは、一般的なシーンのプリセットレイアウトを提供します。
フルタイムのチームメンテナンス、迅速な対応
有名企業が使用しており、MASA Stack製品ラインは今後も使用され、新機能を追加し続けます。
フリーでオープンソース。

今後は、ワンクリック切り替えテーマ（コード切り替えはすでに利用可能）、プリセットレイアウト、データプレゼンテーションクラスコンポーネント、WorkFlowクラスコンポーネントなどのサポートも予定しています。