为什么要使用 Blazor 构建单页应用程序

📚 在本文中，我们将解答一些关于 Blazor 的常见问题。具体来说，是“是什么？”，但更重要的是“为什么？”。既然我们已经有了 Angular、React、Vue 或其他 JavaScript 框架，为什么还要关注 Blazor？为什么选择 Blazor？WebAssembly 究竟是什么？我们将介绍微软 Web 应用程序开发框架的历史以及我们对其光明前景的展望🔮。

🔥 什么是 Blazor？

Blazor 有几个常见的定义，其中第一个相当简单：

“Blazor 是一个使用 .NET 构建交互式客户端 Web UI 的框架。”

— Microsoft 文档：Blazor

正如官方文档所述，它首先是一个“框架”——用于构建客户端 Web UI。但它与其他用于构建 Web UI 的客户端框架有何不同？它究竟有何特别之处？我希望你会问自己：“.NET 有什么特别之处吗？”

这是另一个定义：

“Blazor 是一个免费的开源Web框架，使开发人员能够使用 C# 和 HTML 创建 Web 应用程序。”

—维基百科：Blazor

哦，它是免费的——这很好。但公平地说，还有很多其他免费的框架可以用来构建客户端 Web UI。我为什么要关注 Blazor？

⁉ 为什么选择 Blazor？

从历史上看，微软之前的所有 Web UI 框架都基于完全不同的架构，并在服务器端渲染。Blazor 致力于将 C# 开发引入 Web 客户端，而这只有在 WebAssembly 出现后才成为可能。

WebAssembly（缩写为 Wasm）是一种基于堆栈的虚拟机的二进制指令格式。Wasm 被设计为编程语言的可移植编译目标，支持客户端和服务器应用程序在 Web 上的部署。

— webassembly.org

🤓 哇，听起来有点拗口！我们来分析一下：

在这种情况下，“二进制指令格式”意味着它是字节码，从非 JavaScript 编程语言中获取抽象语法树 (AST) 并将其转换为二进制。

Wasm 位于“基于堆栈的虚拟机”之上——这意味着其核心功能基于“推送”和“弹出”。指令被推送，求值被弹出。虽然这种说法过于简化，但概念依然保留，实现细节则不那么重要。虽然存在单线程、应用内存限制等方面的限制，但由于 Blazor 能够管理与 Wasm 的互操作，因此这些问题不再那么重要。

需要特别指出的是，Wasm 是一个“可移植的编译目标”🎯。这意味着可以将 C、C++、Rust、C# 和其他非传统的 Web 编程语言以 Wasm 为目标进行编译。这样一来，Wasm 二进制文件就基于开放标准，支持 Web 运行，但编程语言并非 JavaScript。

需要明确的是，Blazor 具有 JavaScript 互操作性，甚至还有不同的托管模型——服务器端或使用 Wasm 的客户端。稍后会详细介绍……

😵 JavaScript 怎么样？

Wasm 是否意味着 JavaScript 的消亡？这意味着什么？答案是否定的。JavaScript 不会消失——Wasm 应该被视为 JavaScript 的补充。

“预计 JavaScript 和 WebAssembly 将在多种配置中一起使用”

— webassembly.org：常见问题解答

🆕 类比

得益于 Wasm，Web 浏览器的一些已知限制已被消除，因此我相信：

“有了 WebAssembly，网络浏览器就更像应用商店了——最终用户体验更接近原生性能。”

—大卫·派恩

Wasm似乎有无数个新的特定用例，而这些用例单靠 JavaScript 是无法实现的。不难想象，在 Wasm 的支持下，应用程序将通过 Web 交付到你的浏览器，用于更复杂、资源更密集的用例。正因如此，我相信 Wasm 将带来 Web 应用平台的范式转变。

🗺 领养

Wasm 已在所有主流浏览器中得到支持，并覆盖了近 93% 的用户——我可以使用“WebAssembly”吗？这与 Silverlight 所依赖的基于插件的方法不同。它是 Web 的未来，你将继续看到开发人员使用这项技术构建应用程序。

🔒 安全可靠

Wasm 与 JavaScript 一样安全。

WebAssembly 描述了一个内存安全的沙盒执行环境，甚至可以在现有的 JavaScript 虚拟机内部实现。嵌入到 Web 中后，WebAssembly 将强制执行浏览器的同源和权限安全策略。

— webassembly.org

换句话说，Wasm 被限制在与 JavaScript 相同的安全沙箱中运行。

✨ Web 应用平台

在现代 Web 应用开发中，您希望应用在桌面和移动浏览器上都能响应迅速。现代 Web 应用比其前代产品更加复杂，内容也更加丰富，其功能包括实时 Web 功能、渐进式 Web 应用 (PWA) 功能以及精心编排的用户交互。.NET 开发者首次能够利用现有的 C# 技能在 Web 上构建各种应用。在我看来，这有助于模糊后端和前端开发者之间的界限，同时也更广泛地扩展了 Web 应用开发。我相信在客户端和服务器上使用相同编程语言的理念能够更快地被采用，而 Node.js 正是我所想到的。

➕ 熟悉

人们很容易强调你可以使用现有的 C# 技能，但往往忽略了你仍然可以使用 HTML、CSS 和 JavaScript。这样，你就可以继续使用你的 HTML 和 CSS 技能、你最喜欢的 CSS 库，并且可以自由地使用现有的 JavaScript 包。毕竟，你仍在构建 Web 应用！

🕓 简史

早在 1996 年，Active Server Pages (ASP)就为微软提供了首个用于动态网页的服务器端脚本语言和引擎。随着 .NET Framework 的发展，ASP.NET 应运而生，随之而来的是 Web 窗体。Web 窗体曾经（现在仍然）被许多享受 .NET 功能的人使用，它允许在服务器端渲染 HTML。

不久之后，ASP.NET 模型视图控制器 (MVC) 的推出，让 Web 表单显得迟缓。MVC 让 ASP.NET 开发者更接近 Web 的本质。突然之间，他们必须理解 Web 的三大支柱：HTML、CSS 和 JavaScript。而 MVC 则更贴近 Web 标准。MVC 还增加了一个不同的编程模型，该模型基于控制器和视图。这有助于缓解开发者社区的一些阻力，开发者注意到他们与 Web 表单的开发交互并非无状态——这是框架的错觉，与 HTTP 的本质相悖。

ASP.NET Web API 日益流行，开发人员也逐渐接受了 .NET 的强大功能。Web API 开始被接受为构建基于 .NET 的 HTTP 服务的标准。

最终，利用 MVC 中的 Razor 视图引擎——Razor Pages 应运而生。ASP.NET Core 的创新使这一切成为可能。

“ASP.NET Core 是一个跨平台、高性能、开源框架，用于构建现代、支持云、连接互联网的应用程序。”

— Microsoft 文档：ASP.NET Core 简介

ASP.NET Core 为您在现代开发中所期望的所有基础知识提供一流的公民身份，例如（但不限于）依赖注入、强类型配置、日志记录、全球化和本地化、身份验证和托管。

Razor Pages 将控制器和视图融合在一起，使其在逻辑上更具凝聚力，更倾向于真正的组件，并建立在 Web API 基础架构上。

继 Razor Pages 之后，Blazor 应运而生。“Blazor”这个名字源于一个双关语，将 Browser 和 Razor 结合起来，因为开发者们擅长命名——对吧？🤣 这就是我们如今的处境，一个拥有 Blazor 及其所有功能的世界。这是 .NET 平台上首款单页应用程序框架。

单页应用程序（SPA）

Blazor 是 Microsoft 唯一基于 .NET 的 SPA 框架。目前有许多流行的 SPA 框架，包括：

• 角度
• 反应
• Vue
• 苗条

主要区别在于这些都是基于 JavaScript，而不是 Wasm。

有时，使用 Blazor 构建应用程序的开发人员会混淆这两种托管模型之间的差异。有人误以为 Blazor Server（服务器端）不是 SPA。其实，Blazor 的服务器端特性更像是之前的非 SPA .NET Web 应用框架。但让我们先来看看 SPA 的定义：

单页应用程序 (SPA) 是一种 Web 应用程序或网站，它通过使用来自 Web 服务器的新数据动态重写当前 Web 页面来与用户交互，而不是采用 Web 浏览器加载整个新页面的默认方法。

—维基百科：单页应用程序

无论托管模型如何，Blazor 都满足此定义。使用 Blazor Server，服务器会公开一个具有特定Blazor协议的SignalR中心，该中心负责实时将更新传递给客户端应用中的文档对象模型 (DOM)。当 DOM 中存在差异（或增量）时，更改会立即反映出来。

在 Blazor WebAssembly 中，当客户端请求应用时，它会像所有其他 Web 应用一样，以 HTML、CSS 和 JavaScript 的形式呈现。blazor.webassembly.js文件会引导应用并开始加载 .NET 二进制文件，您可以在浏览器的“网络”选项卡中查看这些二进制文件。

💜 开源

它是公开开发的，作为 ASP.NET Core GitHub 存储库的一部分。

我是开源软件开发的坚定支持者。对我来说，能够公开地了解某个功能的架构、设计和实现方式，意义非凡。能够发布问题、提出功能建议、与开发团队及其他人员协作以及创建拉取请求，让软件以社区为中心。毫无疑问，这最终会让产品变得更好！

♻ 代码重用

多年来，SPA 开发人员一直在苦苦挣扎，因为 Web API 端点以特定形式定义有效负载，而开发人员必须了解每个端点的具体结构，理想情况下还要映射到客户端的模型。这是一个非常繁琐且容易出错的过程。Blazor 可以通过将 .NET Web API 中的模型与 Blazor 客户端应用共享来缓解这一问题。

💡 整个 .NET 库均可在服务器端和客户端场景中共享和使用。利用现有的逻辑、功能和能力，开发人员可以专注于创新，而无需重新发明轮子。

🛠 工具

开发团队的生产力始终是各类应用程序开发的主要关注点。现有的开发人员工具是成功的关键，如果您的团队在完成常见的编程任务时遇到困难或遇到困难，整个项目都可能失败。使用 Blazor 开发，您可以使用经过验证的开发人员工具，例如：

• Visual Studio
• Visual Studio for Mac
• Visual Studio 代码

此外，.NET CLI已经成为生产力的强大动力，通过（new模板）build、、、、、、和命令（仅举几例）——您很可能会获得成功。restorepublishruntestpackmigrate

✔ 所有这些都是用当今世界上最强大、最现代的编程语言构建的，当然，我对此的看法是 C#。

🌐 .NET API

作为一名拥有十多年实际 Web 应用开发经验的开发者，我可以肯定地说，我已经多次可靠地使用 .NET 进行企业级生产应用程序的开发。.NET 本身的 API 接口就非常庞大，再加上 NuGet 提供的第三方包，还有什么理由不爱它呢？

这有什么关系？

我最近见证了 .NET API 的开发过程，从诞生到最终实现 —— 我观察到的这个过程非常成熟和完善。

请记住，这一切都是完全公开的，公众可以查看。它始于早期讨论，然后一个想法浮现，最终以 GitHub 问题的形式形成了正式提案。该问题涵盖了提案所需的所有内容，包括问题陈述、用例、示例语法、建议的 API 接口、示例用法，甚至还包括原始讨论和想法的评论链接。

该提案经过讨论和讨论，经过了大量的讨价还价、论证和协商。最终，由参与公共 API 设计评审会议的一组人员最终确定了一份草案。官方的 .NET API 设计评审会议每周举行一次。作为评审的一部分，会议记录笔记、应用 GitHub 标签并盖章批准——最终，相关 .NET API 被整理成一个代码片段。

从此，该问题将成为旨在满足提案的拉取请求的参考点。开发人员接手该问题，实现 API，编写单元测试，并创建拉取请求 (PR)。PR 会经过审核，合并后，API 必须进行文档记录、沟通，捕获/报告重大变更，进行推广、共享和分析等等。

所有这些，都只针对一个 .NET API，而 .NET API 的数量却多达数万个😲。所有 .NET 贡献者都将为您提供强大的支持，让您安心无虞。更多信息，请参阅官方 API 审核流程。

我向一位非常喜爱 .NET API 的朋友请教了关于这个话题的一些看法：

.NET 平台以其强大的 API 而自豪，这些 API 非常实用，无论您构建何种类型的应用程序，都能让您高效工作。借助 Wasm，当您使用 Blazor WebAssembly 构建基于浏览器的应用程序时，也能享受到这种强大的功能。

—伊莫·兰德沃斯

🆘 支持

所有 .NET 产品都制定了各种支持策略。了解各个版本的生命周期及其相应的支持策略通常是开发团队需要考虑的关键因素。通常情况下，建议构建面向.NET长期支持 (LTS)版本的生产就绪应用程序。然而，一些公司和开发团队选择跟踪当前版本（甚至是预览版）——他们倾向于更积极地进行迁移。有关更多信息，请参阅官方 .NET 站点以获取支持详情：

• .NET 支持政策
• 涵盖的内容

🤝 开发者社区

我向一些 Blazor 开发者社区的朋友询问了他们的想法，并在被问到“为什么选择 Blazor？”时提出分享他们的想法：

Blazor 的组件模型让构建应用变得轻松愉悦。它上手简单，并可根据需求提供丰富的自定义功能。

— Chris Sainty @chrissainty

我同意克里斯的观点。开发简单易用且可定制的应用程序确实充满乐趣。

.NET 生产力。我可以使用现有的技能、工作流程、工具和之前编写的库。没有npm“或” webpack，而是拥有 .NET 堆栈及其生态系统，这让我效率极高。

— Ed Charbeneau @edcharbeneau

我完全同意 Ed 的观点。生产力是一个关键的驱动因素——而且不用写大量的 JavaScript 代码无疑减轻了 Web 开发的痛苦 😬。

Blazor 开发者社区正在蓬勃发展：

• Awesome Blazor：Blazor 资源集合
• Awesome Blazor 浏览器：搜索 Awesome Blazor 资源
• Blazor 日：2021

🎉 美好的未来

除了令人惊叹的 Blazor 开发者社区、开发者工具、开源生态系统以及来自受人尊敬的行业领袖的强烈意见之外，还有来自领先组件供应商的整个 UI 组件运动，其中他们正在积极构建 Blazor 组件（按字母顺序排列）：

• DevExpress
• 葡萄城
• 基础设施
• 拉岑
• 智能 HTML 元素
• 同步融合
• 特莱里克

✔ 客户案例

每当微软的客户兴奋地分享他们的故事时，他们都会为自己说话——这里有两个 Blazor 的成功故事：

• 通用电气航空
• 邮资

👀 代码

要快速创建 Blazor WebAssembly 项目，请使用dotnet new blazorwasm.NET CLI 命令。

在上面的命令中，我们指定了项目的名称 ( -n)，并且我们不想进行还原。如果您打开Pages/Counter.razor文件，您将看到一些类似于以下内容的 Razor 代码：

@page "/counter"

<h1>Counter</h1>

<p>Current count: @_currentCount</p>

<button class="btn btn-primary"
        @onclick="IncrementCount">
     Click me
</button>

@code {
    private int _currentCount = 0;

    private void IncrementCount() =>
        ++ _currentCount;
}

这是一个简单的计数器页面。由于其指令指定了页面的路由，因此它被视为页面而非组件。由于它基于 Razor 视图引擎，因此它充当模板——您可以在 HTML 中引用 C# 代码变量。它还演示了指令的用法，该指令允许您将 C# 功能直接嵌入到模板文件中。变量的作用域为页面，并通过方法递增。此方法在点击按钮时调用，并通过事件绑定。随着值的递增，更改会立即反映在绑定的位置。在本例中，它们在元素中显示为“当前计数”。@page"/counter"@code { ... }_currentCountprivateIncrementCount@onclick_currentCount<p>

计数器页面只是众多可能性的一个小例子，作为一名 Web 开发者，您还有许多绝佳的机会。我希望您考虑在下一个 Web 应用开发项目中使用 .NET。

🔚 摘要

作为开发人员，您可以选择的工具有很多。在所有开发人员的决策中，是否使用框架应该由团队决定。Blazor 是另一种工具，它并不适用于所有用例——知道何时使用它与知道如何使用它同样重要。在本文中，我们讨论了“是什么”和“为什么”。“如何使用”已经有很多内容了。

请考虑其他资源：

🤓 我是我书的 O'Reilly Media 作者，📖 学习 Blazor：使用 WebAssembly 和 C# 构建单页应用程序。

• 在 Microsoft Learn 上使用 Blazor 构建 Web 应用
• ASP.NET Core Blazor 简介
• Blazor 托管模型
• Blazor JavaScript 互操作
• Blazor WebAssembly 性能