Blazor vs.Angular

2020年12月30日11:04:56 发表评论 41 次浏览

本文概述

Angular创建于2016年, 以前是AngularJS, 其创建目的是允许前端开发人员同时与前端和后端进行交互。当时这非常有帮助, 尤其是因为后端通常是由其他语言(例如C#或Java)制成的, 这意味着它通常也由其他开发人员维护。

随着SPA的出现, Angular变得更加强大, 并且出现了与之竞争的新框架, 例如开拓者来自微软。 Blazor是一个Web框架, 允许你将C#与HTML和CSS一起运行, 创建组件并生成SPA。它是在.NET平台下编写的, 它为你带来了客户端和服务器中Microsoft框架的所有功能。

在本文中, 我们将对Angular和Blazor进行比较。我们将分析他们的社区优势, PWA / SPA支持, 它们的异步性质和架构。

角度优势

由于Angular基于JavaScript, 因此有很多资源可以使用。让我们分析其中一些。

到期

与Blazor不同, Angular已经存在了很长时间。这是一个生产就绪的框架, 完全支持MVC / MVVM应用程序, 并且正在被使用。许多大公司。另一方面, Blazor一直在不断变化, 尽管它非常有前途, 但尚未达到足以与Angular争执的成熟度。

在工具方面, Angular领先。 Angular具有VS Code对Blazor仅实施的开发的支持最近.

关于图书馆, 角材料例如, 它是最著名的公司之一, 尤其是因为它包含了Google的材料设计, 一种在Google产品中非常常见的设计语言。除此之外, 还有其他主要设计库, 你可以通过NG引导程序图书馆, 或PrimeNG, 例如。

Blazor一直在开发其等效版本自己的材料设计库, 但要达到这样的成熟度还需要一些时间。

当涉及到组件库时, Angular还提供了几个选项。在这个链接, 你可以找到Angular支持的官方工具的列表, 包括IDE, UI组件和数据库等。

社区

Angular非常流行。在撰写本文时, GitHub资料库它拥有63.7万个星星和17.2万个叉子, 这绝对是前端社区中一个重要且受欢迎的框架。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

Blazor vs.Angular1

很难分析Blazor的受欢迎程度, 该项目由于已正式成为ASP.NET Core库的一部分, 因此已移至该库。ASP.NET项目。在回购转移之前, Blazor拥有9.2k星和700个叉子。我们将不考虑ASP.NET Core的统计信息, 因为它们涉及Blazor本身以外的许多其他因素。

另一个很好的比较是堆栈溢出。到现在为止, 仅Angular已累积了224.3k个问题而Blazor只有2.9k个问题.

Angular 224.3k问题和Blazor 2.9k问题堆栈溢出问题的比较

Angular和Blazor的问题数

stackoverflow.com

当你在Google趋势中比较两种技术时, 差距会更加清楚:

图表中包含Blazor和Angular的Google趋势页面

凭借如此强大的社区实力, 并且存在时间更长, Angular能够(在数量和质量方面)发展比Blazor更广泛的社区。有关Angular的内容, 课程, 书籍, 博客和资料比Blazor所能找到的更多。

PWA支持

Google非常喜欢Progressive Web Apps(危险废物), 因此Angular也是如此。只需运行即可将其用法添加到你的Angular应用程序中:

ng add @angular/pwa

你可以猜测其他Google项目, 例如著名的Workbox。

长期以来, Blazor被归类为无法执行PWA的框架。他们最近宣布他们确实支持PWA, 但是, 与Blazor的许多功能一样, 这项工作仍在进行中。除了稳定之外, 一些开发人员还抱怨初始下载应用程序的大小太大, 而小的捆绑包大小对于SPA至关重要。

但是, 社区仍然对PWA的支持持乐观态度。尚不理想, 但仍在不断发展。

范围样式

与许多其他Web框架和库一样, Angular允许使用Scoped样式, 你可以在其中使用专门用于相关组件的CSS样式, 例如:

@Component({
  selector: 'app-root', template: `
    <h1>Title H1</h1>
    <app-test-main [title]="title"></app-test-main>
  `, styles: ['h1 { font-weight: normal; color: red; text-transform: uppercase; }']
})
export class AppComponent {
  ...
}

这将导致如下所示的视图:

红色标题说标题1

这是一个有争议的功能, 许多浏览器的版本均不支持该功能, 仍在讨论中.

但是可以肯定的是, 该功能很有趣。 Blazor缺少它, 尽管有些人已经尝试替代品。由你决定范围样式对你的项目是否足够重要。

包起来

Angular一直以来都证明了其价值。在其他项目中, 你应该使用它是因为:

  • 它是完整的, 可为MVC / MVVM应用程序以及SPA和PWA提供流畅的支持
  • 它已经很成熟, 有一些支持它的IDE
  • 它稳定且可用于生产, 并有很长的成功项目路要走
  • 在Google的祝福下, 它受到了庞大的开源开发者社区的欢迎和支持
  • 它支持范围样式

开拓者职业

Blazor之所以出色, 是出于某些特定原因, 我们现在将更详细地进行探讨。其中之一是基于C#的事实, 这意味着, 如果你喜欢面向对象的语言(或任何C#功能), 就会感到宾至如归。 C#是强类型的, 并且具有大量的辅助库来增强你的编码。

服务器端渲染

此功能为许多前端开发人员所熟知, 尤其是对于Next.js框架。但是Blazor更喜欢将其称为"预渲染"。该功能包括在服务器端编译应用程序的所有组件和元素, 然后生成静态HTML /资产以发送给客户端。

主要优点是整体性能。预渲染的页面比普通页面要快得多, 这也有助于提高SEO效果。但是, 有一个整体背后的概念我非常建议你在使用它之前先对其进行研究。

WebSocket连接

Blazor利用WebSocket连接来回传输数据。因此, 据报道下载时其初始页面大小小于Angular。也许, 差异是由于Angular在其下载的软件包中带入的冗长和样板代码。

除此之外, 在HTTP / 2服务器连接中, 通过信号R(向你的应用程序添加实时Web功能的ASP.NET库)已证明延迟非常低, 并且消息帧无需建立连接。

换句话说, 应用程序能够将消息从服​​务器实时发送到客户端的能力是一种很好的方法来测试ー语言以及所使用的协议是否真的很快。然后, 在你的客户端中, 你可以测量请求和响应之间的时间, 并检查响应速度。

同样的WebSocket也可以用于以非常快速的方式通过将数据推送到Blazor组件来发送数据。

建立/编码时间

Blazor在构建和调试方面非常快。因为它利用了Visual Studio及其工具和插件之间积累的全部经验, 所以开发和调试可以非常快(当然, 这取决于你的经验水平和熟悉程度)。

Blazor在开发过程中还带来了著名的实时重新加载功能, 你可以立即对其进行设置:

// Add NuGet package:
dotnet add package RazorComponentsPreview

// Add to the StartUp class:
services.AddRazorComponentsRuntimeCompilation();
app.UseRazorComponentsRuntimeCompilation();

此功能取决于编译和构建时间。 Angular和Blazor相同功能的性能比较使后者的速度提高了20倍, 包括在CI / CD管道中运行的构建。好多啊。

在编码方面, Angular以其样板而闻名。使用Blazor, 你已经处在后端, 这意味着你可以在可以直接从上层直接调用的服务上编写方法, 而不必像在Angular中那样进行整个API结构调用。

异步性质

尽管Angular利用了从JavaScript继承的内置异步特性, 但它也支持强大的RxJS来处理异步操作。 C#自身已经发展为以一种简单, 干净的方式立即提供支持。有时, 你甚至可以感觉到两种技术之间的某些实现方式非常相似。

例如, 假设两个分别使用Angular和Blazor制作的客户端应用程序从同一个API终结点使用。

由于它们的异步特性, 我们将为两个调用使用以下代码:

// Angular
async getUserData() {
   return await this.httpClient.get<User>("api/users").toPromise();
}

// Blazor
public async Task GetUserData()
{ 
   return await Http.GetFromJsonAsync<User[]>("api/users");
}

你能发现相似之处吗?异步/等待操作使我们能够等待单个异步操作完成。相同的操作只能完成一次, 并且始终只有一个结果。而且, 是的, 它们同样适用于Blazor和Angular。

包起来

虽然Blazor仍在迈出第一步, 但事实证明, 它愿意继续改善并聆听社区的声音。你应该使用Blazor的一些原因包括:

  • 它基于.NET的本质, 带来了C#语言的面向对象的强大功能
  • 其服务器端渲染(预渲染)功能可以高度扩展应用程序的性能
  • 它的快速构建时间以及实时重新加载功能
  • 能够立即进行异步工作, 而无需付出太多努力

比较表

这是一个汇总该帖子的比较表, 因此你可以更轻松地解决这些差异:

Angular 开拓者
基于JavaScript 基于C#
全面支持SPA和PWA 两者都支持, 但PWA正在开发中
GitHub上有63k颗星 > GitHub上的9k星
准备生产 可以用于生产, 但仍在接受更改
成熟的工具和设计库 通用工具(例如IDE)正在努力增加支持

设计库正在进行中

开源的
支持异步功能
支持范围样式 尚无支持
下载大小:〜111K 下载大小:〜2MB-2.4MB
CI / CD时间:慢10-20倍 CI / CD:快10到20倍

总结

最好记住, 这两个框架都很强大, 并试图解决社区面临的常见问题。两者都是开源的。

与Blazor相比, Angular在某些重要方面脱颖而出。例如, 如果你是前端开发人员, 并且从未接触过后端语言或.NET, 那么去Blazor可能会很棘手, 因为你必须学习C#、. NET和Razor。

如果你要雇用人员从事前端项目, 那么面对大量可用的Angular开发人员, 你可能会遇到麻烦, 无法找到优秀的Blazor开发人员。

除了这些差异之外, 它们之间还有很多相似之处。他们的路由系统非常相似, 尽管Angular的路由系统稍微复杂一些, 并且需要更多样板代码来工作。他们俩都有强大的库来处理HTTP调用(可能是从其创建者那里继承来的), 还有出色的模板系统(它们的某些部分非常相似)。

你呢?你如何使用它们中的两个?

准确体验你的Angular应用程序用户的操作方式

调试Angular应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪生产中所有用户的Angular状态和操作,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了你网站上发生的一切, 包括网络请求, JavaScript错误等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy NgRx插件将Angular状态和操作记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Angular应用程序的方式-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: