写点什么

对打 Angular,Blazor 赢在哪里?

  • 2022-05-17
  • 本文字数:3028 字

    阅读完需:约 10 分钟

对打 Angular,Blazor 赢在哪里?

Blazor 是一个 Microsoff ASP.NET Core 框架,用它无需任何附加组件或插件即可在浏览器中运行.NET 应用程序。相比之下,Angular 是一种基于组件的流行 JavaScript 框架,用于构建可扩展的 Web 应用程序。


本文将深入探讨 Blazor 和 Angular 之间的异同,以帮助大家为自己的下一个项目选择最佳框架。

Blazor 是什么?


Blazor 是微软新出的 ASP.NET Core Web 框架,允许开发人员在 Web 应用程序中使用 C#代码。Blazor 应用基于现有的 Web 技术(例如 HTML 和 CSS)构建,但该框架允许开发人员使用 C#和 Razor(一种流行的模板标记语法)而不是 JavaScript 语言。Blazor 这个名称是 Browser 和 Razor 的组合。


使用 Blazor,开发人员能够为在.NET 中开发的,基于 WebAssembly 的客户端应用程序创建交互式和可复用的 Web UI。此外,它让开发人员能够共享代码和库,因为客户端和服务端代码都是用 C#编写的,从而为开发人员提供了一个平台,可以使用.NET 端到端开发充满活力的现代单页应用程序(SPA)。


Blazor 的最大卖点是它使用最新的 Web 标准,并且不需要额外的插件或附加组件即可在两个单独的部署模型(客户端 WebAssembly 和服务端 ASP.NET Core)中运行。


Blazor 在 GitHub 上已经积累了超过 9K Stars,非常适合 Web 应用开发用途。但要完全理解 Blazor,我们必须深入了解它的起源。Blazor 提供了两种开发选项,服务器和 WebAssembly。除此之外,Blazor 中还有另外三个可用的开发选项:


  • Blazor PWA:开发渐进式 Web 应用。

  • Blazor Hybrid:开发混合应用程序。

  • Blazor Native:为移动平台创建原生应用程序。

Blazor 中的功能


  • 使用 C#创建 Web UI。

  • 支持渐进式 Web 应用开发。

  • 创建可复用的 C#组件。

  • 完全支持服务端调试。

  • 支持服务端渲染,用于更快的 WebSocket 连接。


下面我们讨论一下 Blazor 的一些优缺点。

Blazor 的优势


  • Blazor 共享服务端代码和客户端代码:Blazor 允许开发人员在前端和后端之间复用代码。

  • 依赖注入:依赖注入是一个可用的对象,可以在 Blazor 中充当一个服务。Blazor 在其应用程序中使用依赖注入来实现控制反转,它允许为对象提供依赖。在 Blazor 中,依赖注入可以分为多个类:注入器、客户端和服务。Blazor 还有不同的注入器,例如构造器、属性和方法。

  • Visual Studio Code:我们可以使用 Visual Studio Code 开发 Blazor 应用,因为它们都是微软产品。当你在 Blazor 框架中开发应用程序时,VSCode 将帮助你轻松利用其各种功能。

  • 与 JavaScript 的互操作性:Blazor 使用 Blazor WebAssembly 中的互操作功能来处理 DOM 操作。此外,这个 JavaScript 功能可以在 Blazor WebAssembly 中使用浏览器 API 调用。因此,Blazor 应用可以将.NET 方法与 JavaScript 函数结合使用。要了解更多信息,请参阅这篇文章:在 Blazor 中使用 JavaScript 互操作的优缺点(地址:https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx)。

Blazor 的缺点


Blazor 服务器的缺点:


  • 无离线支持:Blazor Server 必须有活动的网络连接。如果连接失败,应用程序将停止工作,原因是整个项目托管在服务端,需要连接到互联网。

  • 使用 ASP.NET Core:Blazor 始终需要 ASP.NETCore 服务器才能运行。因此,如果你使用 Blazor 开发任何应用,你都应该先安装 ASP.NETCore。


Blazor WebAssembly 的缺点:


  • 应用程序体积:Blazor 执行时间取决于应用的体积。因此,基于 Blazor WebAssembly 构建的较重应用可能会影响性能。

  • 受限于浏览器:浏览器的功能在 Blazor 中受到限制。因此,只要浏览器可以处理 Blazor,应该就不会有什么问题。然而,并不是所有的浏览器都支持 WebAssembly,所以如果你碰巧在使用 Internet Explorer,可能就会遇到麻烦。

Angular 是什么?


Angular 是一个基于 TypeScript 的前端框架。它被评为世界上最受欢迎的开源 Web 框架之一。它可以帮助开发人员创建交互式用户界面、单页 Web 应用、高级 Web 应用等。它的前身是使用 JavaScript 的 AngularJS。但是随着技术的发展,TypeScript 已经在 Angular 中取代了 JavaScript。


让我们看看使用 Angular 的一些优势。

Angular 的优点


  • 支持:与 Blazor 相比,使用 Angular 的社区规模非常大。因此对于 Angular 来说,我们在应用开发过程中遇到问题时,找到解决方案的机会很高。

  • 使用 TypeScript:TypeScript 有很多比 JavaScript 更好的属性。例如,干净、可理解和可预测的代码在 Angular 上表现更好。

  • 可复用性:Angular 也像 Blazor 一样支持可复用性,这对开发人员来说很有用。

  • MVVM:Angular 是一个开源的 MVVM 框架,它将程序逻辑与用户界面控件分开。用户可以使用模型-视图-视图模型(也称为模型-视图-绑定器)来保持代码结构清晰、项目各自分离。他们可以快速轻松地更新、编辑和修复代码。视图负责托管可视项目并接收来自模型的输入。ViewModel 连接视图和模型。最后,模型包括了程序的逻辑。

Angular 的缺点


  • 难学:即使对于经验丰富的工程师来说,Angular 也是一个难以掌握、问题多多的框架。Angular 的难度来自于陡峭的学习曲线和需要深度知识才能理解的全套文档。此外,Angular 是一个固执的框架,这意味着它有自己的做事方法,开发人员别无选择,只能遵循它的风格。然而,一旦你掌握了 Angular,它就会成为一个非常有益的工具。

  • 搜索引擎优化:默认情况下,Angular 对搜索引擎优化并不友好。除非网站建立在服务端,否则搜索引擎爬虫很难对其进行索引。但网站应该没有障碍地在 SERP 中被索引和发现才对。

  • 体积较大:Angular 项目包的大小通常比其他框架的更大,这使得 Angular 应用运行缓慢。

Blazor 与 Angular 对比


我们来直接比较 Blazor 和 Angular。


Angular 和 Blazor 都是开源 Web 框架。主要区别在于 Angular 使用 TypeScript,而 Blazor 使用 C#。但两者之间存在一些关键差异:


  • Angular 已经存在了一段时间,但 Blazor 仍处于早期阶段。

  • 每个客户端都必须有一个活动连接,并且 Blazor 将每个客户端的组件状态保存在服务器上。

  • Blazor 现在提供了 scoped 组件样式和 CSS 隔离。在 Angular 中,与组件样式和 CSS 隔离相关的工具链已经非常成熟了。

  • Angular 提供了对 PWA 的支持,但服务端 Blazor 不能用作 PWA。


下表详细列出了 Angular 与 Blazor 的对比细节。



编程语言、发展历史和流行度是两者之间最显著的区别。因为世界各地的大公司都在使用 Angular,所以找到一份 Angular 开发人员的工作也容易得多。此外,Angular 是一个优秀的企业解决方案,它主要用于此类需求。


你应该根据你的目标来选择框架。如果你想确保自己选择的框架有一个庞大的社区,可以在需要时为你提供帮助,请选择 Angular。PWA 得到了 Angular 的强力支持,但 Blazor 的服务端尚未赶上。另一方面,Blazor 更适合熟悉 C#的开发人员,而对于经验丰富的 TypeScript 开发人员来说,上手 Blazor 会有些麻烦。如果你正在寻找一个完善的产品,Angular 是正确的选择。


在选择 Blazor 或 Angular 时,你必须考虑以下几点:

何时使用 Blazor:


  • 如果你是想要更快构建应用的 C#开发人员。

  • 当项目需要更快的周转时间时。

何时使用 Angular:


  • 如果你愿意在 Angular 上投入大量的学习努力,以从一个久经考验的框架中获益。

  • 如果你是一个顽固的 JavaScript 开发人员,永远不会选择使用.NET 进行 Web 开发。

  • 如果你需要开发具有高灵活度的最小设计应用。

结论


在本文中,我全面概述了 Blazor 和 Angular 各自的功能和用法。这两个框架都令人印象深刻,但每个框架都有其优点和局限性。最终,你应根据项目要求在 Blazor 和 Angular 之间进行选择,选出最能满足你需求的一种。我建议阅读它们的文档以获取更多信息。


现在你知道该选择什么了,如果你用过它们,请在下面的评论中分享你的经验。感谢你的阅读!


原文链接:https://www.syncfusion.com/blogs/post/blazor-vs-angular.aspx/amp

2022-05-17 14:3214409

评论 1 条评论

发布
用户头像
篡改了原文的题目。谁说blazor赢了?
2022-07-04 11:50
回复
没有更多了
发现更多内容

一文读懂PINGPONG:0成本在普通家用机上运行多个网络节点

股市老人

十五年以来 — 战略性云平台服务的演进路径之全面呈现(含亚马逊、微软和谷歌)

Moehoo猛虎

微软 AWS 云服务 Gartner 魔力象限

地理围栏,打造智能生活新边界

HarmonyOS SDK

HarmonyOS

一文读懂PINGPONG:0成本在普通家用机上运行多个网络节点

西柚子

浅析Jetty与tomcat区别

百度搜索:蓝易云

有效阅读

Anliven

方法 个人提升 阅读

活动火热报名中|搜索进化论:基于大模型的企业级AI搜索

阿里云大数据AI技术

人工智能 AI搜索 搜索开发工作台

DockerCompose部署es和kibana

百度搜索:蓝易云

火山引擎携手居然之家,共推家居行业的数智化发展

新消费日报

人工智能 | Mistral 大语言模型

测试人

人工智能 软件测试

QCN9074: The Future of High-Performance Wireless Solutions

wallyslilly

QCN9074 QCN9024

“京东云深海数据平台” 焕新升级 免费体验!

京东科技开发者

积硅步以致千里,积怠惰以致深渊

Anliven

成长 激励

Mybatis-Plus常见注解

百度搜索:蓝易云

链动2+1系统模式开发搭建

V\TG【ch3nguang】

天翼云HBlock:Step by step,一杯咖啡的时间轻松搭建企业存储集群

三掌柜

天翼云HBlock

如何在Ubuntu 20.04|18.04上安装FreeSwitch

百度搜索:蓝易云

Linux中的chsh命令及示例

百度搜索:蓝易云

Linux安装nginx

六哥是全栈

Linux NGINX 安装

数据工程(三):数据桥梁的基石——深度剖析数据集成与整合中的采集艺术

数造万象

数据治理 数据采集 数据集成 数据孤岛 数据工程

仓储管理这些坑,你有没有经历过?

天津汇柏科技有限公司

低代码 AI 人工智能

大模型在研发数据中台的应用实践

百度Geek说

大模型 研发、 数据库· 产品架构

未完待续

Anliven

职业发展 价值

智源研究院举办第二期“数据与行业应用Workshop”

智源研究院

Databend Meta-Service 架构概述

Databend

一图看懂天润云(2167.HK)2024年中期业绩

天润融通

淘宝商品评论API:深入探索商品使用场景与评价信息

代码忍者

讯飞星火版「Her」正式上线!成立仅16月的无问芯穹完成近5亿元A轮融资|AI日报

可信AI进展

得物App白屏优化系列|归因篇

得物技术

android 稳定性 企业号2024年8月PK榜

对打 Angular,Blazor 赢在哪里?_大前端_Ravindu Shehan Perera_InfoQ精选文章