Liam W
封面

再聊Blazor,它是否值得你花时间学习

作者
王亮·发表于 3 年前

之前写了一篇文章《快速了解 ASP.NET Core Blazor》,大家关心最多的问题是,我该不该花时间去学习 Blazor。今天聊聊这个话题,并表达一下我个人的看法。

在此之前,我还是想不厌其烦的介绍一个 Blazor。

Blazor 是微软 .NET 团队开发的一个新的 UI 框架,目前生态发展的还不错。仅国内就出现了不少成熟的 UI 框架,比如基于 Ant Design 的企业级组件库 ant-design-blazor[1]、基于 ElementUI 的 element-blazor[2] 和基于 Bootstrap 的 BootstrapBlazor[3] 等,这些开源项目的发起人都是国内开发者。另外,你可以在 GitHub 的 awesome-blazor[4] 项目查看更丰富的 Blazor 资源。

要更好地了解 Blazor,必定要先知道 WebAssembly 是什么。

WebAssembly 与 .NET 无关,WebAssembly 已经慢慢开始普及被采用。简单来说,WebAssembly 是一种新的、类似汇编的网络语言。它可以在浏览器中运行,并且支持所有现代浏览器。由于经过高度优化,所以运行速度快,接近本地应用。

重要的是,WebAssembly 不是一种绝大多数开发者都会写的语言,而是用来作为编译目标的。你可以将代码针对特定的处理器或操作系统编译成 WebAssembly,然后让你的程序在浏览器中运行。

理解了 WebAssembly,我们再来正式介绍一下 Blazor。

在概念上,Blazor 更像是 Vue 或 React,而不是 ASP.NET Core MVC。它是一个基于组件的框架,用于构建丰富的交互式 Web 应用程序。Blazor 与传统 JavaScript 框架的主要区别在于,Blazor 组件完全用 C# 和 Razor 编写,不需要用到 JavaScript,但可以和 JavaScript 交互。

Blazor 有两种模式。一种是在服务器端运行再实时渲染到浏览器,叫服务端模式;一种是在客户端使用 WebAssembly 运行,叫 WebAssembly 模式。两种模式都使用了相同的面向组件的架构,但在运行这些组件的方式上却有很大的不同。

服务端模式,就是渲染代码的工作在服务器上运行,它使用 SignalR(一个用于管理客户端和服务器之间的实时连接的 .NET 库)将事件从浏览器发送到服务器,并将 DOM 的差异部分发送到浏览器进行渲染。即,服务端模式是服务器渲染你的组件并通过 SignalR 管理交互。

WebAssembly 模式,更容易理解一些。所有的代码,包括框架和你的组件,都在浏览器中运行。你的 C# 代码像其他 .NET 应用程序一样被编译成 DLL,随后 DLL 被发送到浏览器,然后在浏览器中运行你的代码。打开浏览器开发者工具,在第一次加载页面时,你可以看到它会下载一堆的 DLL。

这两种模式都有各自的优势。服务端模式在浏览器中的工作较少,但由于涉及到网络,用户界面交互会有一些延迟。WebAssembly 模式,运行速度较快,但第一次加载较慢,需要下载 DLL,加起来大约有 2M 的样子。

这就是 Blazor。现在说说我个人对 Blazor 的看法。

对于 Blazor,最大的优点是前后端代码的共用以及组件的重用,而且可以不需要 JavaScript,极大简单了开发工作流。

从我的体验来说,我不太满意 Blazor 的服务端模式,因为大部分交互都要经过网络,这就导致少许延迟,体验不是很好。服务端模式不适合实时性要求较高的应用,比较适合供外网访问的网站,比如公司官网和要求利于 SEO 的网站。

Blazor 的未来,我看好的是 WebAssembly 模式。性能上,WebAssembly 接近于本地应用。相对本地应用,它的好处是不需要安装,不需要在客户端升级,可以说是结合了本地应用和 Web 网页的优点。而且基于 Blazor 的 WebAssembly 应用可以创建为 PWA(Progressive Web App),以实现离线支持。

WebAssembly 是未来的趋势,但要被普遍性采用,还有一段较长的路要走。首批会采用 WebAssembly 的应用会是面向企业内部的应用,比如企业的 ERP、CRM 等应用。目前各大主流浏览器都已支持 WebAssembly,这一点也证明各大浏览器厂商推 WebAssembly 技术的决心。

相较于其它语言平台,基于 .NET 平台的 Blazor 在 WebAssembly 发展方面目前处于绝对的领先,更具有前瞻性。另外,群友分享的最新消息:微软公布,在 .NET 6 中,Blazor 将增加支持基于 Web 渲染的跨平台桌面应用[5]。在我看来,借助 C# 语言和 WebAssembly 性能的优势,未来 Blazor 有望接替 Electron 的位置,成为跨平台桌面应用的新霸主。

我个人非常看好 Blazor 的未来发展。对于已有 ASP.NET Core 开发经验的人来说,学习 Blazor 并没有多少学习成本。如果你是 .NET 开发者,在学有余力的情况下,我强烈建议你花点时间学一学 Blazor

[1]. https://github.com/ant-design-blazor/ant-design-blazor
[2]. https://github.com/Element-Blazor/Element-Blazor
[3]. https://gitee.com/LongbowEnterprise/BootstrapBlazor
[4]. https://github.com/AdrienTorris/awesome-blazor
[5]. https://github.com/dotnet/aspnetcore/issues/27217