【2021版】Blazor与Angular对比 – 该选择哪个?

f:id:mika-kura:20200326184205j:plain

(原文:Jason Beres/翻译:Infragistics日本公司)

最近,C#开发者多数情况下都使用JavaScript,这是最常用的编程语言,来进行前端编码。然而,Web开发界正迅速变化,开发者已不再需要依赖JavaScript来进行高端Web应用程序的开发。借助名为WebAssembly的技术,Blazor能够在浏览器上运行.NET,而无需使用附加组件或插件。

在本文中,我们将详细比较目前Blazor的现状、功能以及是否可在生产级别上使用,与最受欢迎的框架之一Angular进行对比。

Blazor是什么?

Blazor是微软的新一代Web开发框架,开发者可以使用C#来编写适用于浏览器的代码。尽管Blazor基于现有的HTML和CSS等Web技术,但开发者可以使用C#和Razor语法来代替JavaScript。Razor是.NET中一种受欢迎的模板标记语言。使用Blazor(Browser + Razor),开发者可以构建运行在WebAssembly上的客户端应用程序的Web用户界面,该界面使用.NET编写且实现了端到端的.NET应用程序开发,同时共享代码和库,可以开发最新的单页应用程序(SPA)用于客户端和服务器端。

这个新技术最值得关注的地方是利用最新的Web标准并无需额外的插件或附加组件即可执行。这得益于WebAssembly的出现。

了解WebAssembly

WebAssembly(通常简称为Wasm)是一种能够在最新的网络浏览器中运行的新标准,为Web平台带来了语言多样性。 Wasm是一种紧凑的二进制格式,类似于低级汇编语言,几乎能在Web上以近乎本机性能的方式运行使用C / C ++、Java、Rust等多种语言编写的代码。

WebAssembly的目的是在Web上促进高性能应用程序。但是,它的格式是设计为在其他环境中执行和集成的,并且可以与JavaScript一起执行。

Blazor的特点是什么?

    • JavaScriptやTypeScriptの代わりにC#を使用してWebUIを構築する

 

    • プログレッシブウェブアプリ(PWA)を構築する (PWAs)

 

    • C#で記述された再利用可能なコンポーネントを作成して使用する

 

    • サーバー側での完全なデバッグサポートとクライアント側でのいくつかの制限付きのデバッグ

 

    • HTML DOMを使用したデータバインディング(制限付き双方向バインディング)

 

    • C#でクライアントとサーバー間でコードを共有

 

    • サーバー側とクライアント側のモデル

 

    • パフォーマンスを向上させるためのサーバー側レンダリング(別名プリレンダリング)

 

    • WebSocket接続

 

    • オフラインでの動作(クライアント側のWebAssemblyのみ)

 

    • モバイルブラウザを含むすべての最新のWebブラウザで動作

 

    • JavaScriptと同じセキュリティサンドボックス

 

    • JavaScript interopを使用したJavaScriptフレームワークとライブラリの呼び出し

 

    オープンソース

Angular是什么?

Angular是Google创建的一款JavaScript基础的框架,它是AngularJS的继任者,旨在使前端开发人员能够同时操作前端和后端。Angular使用了许多资源来进行构建。

Angular是一个完全支持MVC/MVVM应用程序的框架,可以在生产环境中进行操作,并长期以来被许多大型企业所使用。而Blazor虽然不断变化,并且非常有前途,但与Angular相比,还没有足够成熟来与之竞争。

Angular支持渐进式网络应用程序(PWA),但Blazor仅支持Blazor WebAssembly中的PWA。 Angular还具有在IDE(如VSCode)中进行完整调试支持的功能。

Angular非常受欢迎。与Blazor相比,Angular在Github存储库中有70.2K星和18.4K分支,而Blazor只有9.3K星和689分支。在Stack Overflow上,Angular有243,930个问题,而Blazor只有4,695个问题。与Blazor相比,Angular拥有大量教材、书籍、博客、视频和其他资料。Angular在全球范围内举办技术活动和庞大的社区,作为第三方集成是一个很好的选择。

Angular使用了一个被称为”AOT预编译器”的优秀概念,以缩短加载时间并增强安全性。AOT将在浏览器下载并执行之前的构建阶段,将Angular HTML和TypeScript代码转换为高效的JavaScript代码。通过在构建过程中编译应用程序,可以加快在浏览器中的渲染速度。

在Angular中,可以使用作用域样式,并应用于相关的组件专用CSS样式。

这个框架使用Angular元素和模块,被设计为完全可自定义的,并赋予开发者和设计师更多的权力。Angular支持延迟加载,本地化和I18n国际化标准,以及适用于iOS和Android的Ionic跨平台移动应用等功能。

根据以下概述,Angular开发者可以使用许多开源软件包。

    • Ignite UI for Angular

 

    • NgBootstrap

 

    • Angular Google Maps

 

    • NgRx

 

    • NgTranslate

 

    • AngularFire

 

    • NgxTextEditor

 

    • Angular Material

 

    • Ng2 Pdf Viewer

 

    … その他

Blazor与Angular的对比

Blazor和Angular都是开源的Web框架。主要区别在于,Angular基于JavaScript开发,而Blazor是使用C#开发的用于Web的框架。主要区别如下:

Angular

Blazor

製品利用に耐えうるか

Angularは今日、何年にもわたって本番環境に展開され、テスト済み

Blazorはまだライフサイクルの非常に早い段階であり、コードが大幅にチャーンされている。 回避策が必要な可能性のある潜在的なパフォーマンスの問題あり

学習曲線

特に.NET / C#開発者の場合、Blazorと比較すると学習曲線が大きい

C#およびVisualStudio開発者にとって学び易い

パフォーマンス

フレームワークが非常に成熟しているため、パフォーマンスのチューニングがなされている

パフォーマンス、特にBlazorWebAssemblyに関する潜在的な問題にマイクロソフトは引き続き取り組んでいる状況。 .NET 6には、大幅なパフォーマンスの向上が含まれると予想される。

PWA(プログレッシブウェブアプリ)のサポート

あり

Blazor WebAssemblyのみ

クライアントごとのアクティブな接続の必要性

なし

あり

各クライアントのコンポーネント状態をサーバー側に保存

なし

あり (Blazor Server)

コンポーネントにスコープされたスタイル

あり

なし

バンドルサイズ

50KB以下(gZipを使用したIvyの場合)

.NET Frameworkの場合は622kb

ツール

CLIと多くのサードパーティオプション

CLI、Visual Studio、およびサードパーティのオプション

SEO /クローラー向けに最適化

Angularサーバーサイドレンダリング

あり

リリース頻度

年間2回のメジャーリリース(これは実際企業がフォローするには大変な頻度です。)

.NETで年に1回のメジャーリリース、アップデート

コードスタイル

非常に細かく、多くの定型文がある

ボイラープレートが少なくなるように最適化されており、簡単に開始可能

请帮我将下面的句子用中文进行本土化释义,只需要一种选项:

Please pass me the book on the table.

选择 Blazor 还是 Angular?
应该选择 Blazor 还是 Angular?

在新的开发项目中,Blazor和Angular都是可选的选项。以下是需要考虑的一些因素。

    • Blazorの新しい、未成熟度なプラットフォームを使用することで発生する多くの細かな問題に対処することは出来ますか?

 

    • Web開発において10年以上多くの実績があるフレームワークのメリットを享受するために、Angularの学習コストをかけることは出来ますか?

 

    • あなたは最新のWebアプリ開発を行うための、より簡単な道筋を望んでいるC#開発者ですか?

 

    あなたは、Web開発で.NETを使用することに特にメリットがないJavaScript開発者ですか?

无论选择哪一个,我认为都会有一种权衡。

Infragistics以原生方式支持这两种框架。请务必查看Ignite UI for Angular和Ignite UI for Blazor页面以了解更多详情。

關於開發的各種諮詢都可以交給我們。

在Infragistics Japan,我们为各个平台提供专业技术培训,同时为开发工作提供全面支持。

在中国,只需要一种选择:jp.infragistics.com

需要跳出旧技术和即将停止支持的平台,但是迁移到新的平台和框架的考虑进展缓慢,缺乏相关经验。

「我们想要采用新的开发技术,但是我们公司内没有专家。而且我们也缺乏日语资源,对于开发的推进感到不安。」

“我想要由公司内部成员来推进开发,但因过去一直依赖外部供应商进行开发阶段,对工具和技术的理解不足。”

我想要改版UI。我不知道有关UI设计和UI/UX的调查研究该如何进行。如果找外部设计公司来做,我担心开发会变得困难。

我们接受各种咨询。请随时通过这里联系我们,提出您的询问。

广告
将在 10 秒后关闭
bannerAds