MASA team

.NET前后分离解决方案

1. .NET前后分离解决方案

前言：一篇介绍.net前后分离解决方案的文章

业界的共识一直都是前后端分离开发，就算是不懂技术的小白，最先理解的也是这样，但分离的同时就要考虑部署的问题。以及前后端工程师开发流程中的相互牵制问题，毕竟这些问题都会使得整体开发效率降低。而使用.NET进行客户端 Web 开发,就可以在服务器和客户端之间共享应用逻辑。算是一个很好的解决方案，但是具体一个框架怎么就成为了前后分离解决方案的呢？让我们展开来说：

1.1. 什么是Blazor？

说解决方案之前，要先说一个东西，Blazor，那什么是Blazor？又为什么要说Blazor呢？

微软文档给出的定义是：

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

近两年，有越来越多的开发知道Blazor，去了解Blazor，一个用来构建客户端web UI的“框架”，和别的构建web UI的客户端框架有什么差异？了解之后，你会不会去选择使用？Blazor和.NET又有什么关系呢？

blazor是一个微软推出的基于webassembly和C#(面向对象) 以及F#(面向函数)的前端框架，是.NET最新的前端技术，类似vue 、react 、anglar的单页前端框架，只是他不再使用javascrip或typescript，而是使用血统更优的C#来编写页面逻辑，呈现交互的效果，因此我们可以使用静态类型检查、泛型、Linq、async/await、以及美味的语法糖等所有C#语言的优秀特性。根据以上的解释，Blazor和.NET的关系就是，Blazor是基于C#和.NET构建SPA的WebUI框架，而且Blazor是支持双向绑定的，也就是不需要页面刷新使服务端的重新渲染，而是实现了局部渲染，使Blazor能实现现代前端框架的效果。使.NET代码和Razor语法来实现组件。Blazor组件可以处理UI事件，绑定到用户输入并有效地呈现UI更新。如果你喜欢.NET和C#，我想你一定会爱上Blazor。

1.2. Blazor 的功能

blazor本身是自带了强大的功能的:

1.2.1. 依赖注入

下面的示例展示了如何使用 @inject，将实现 Services.IDataAccess 的服务注入组件的 DataRepository 属性中：

@page "/customer-list"
@inject IDataAccess DataRepository

@if (customers != null)
{
    
        @foreach (var customer in customers)
        {
            @customer.FirstName @customer.LastName
        }
    
}

@code {
    private IReadOnlyList customers;

    protected override async Task OnInitializedAsync()
    {
        customers = await DataRepository.GetAllCustomersAsync();
    }

    private class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    private interface IDataAccess
    {
        public Task> GetAllCustomersAsync();
    }
}

1.2.2. 组件

Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。

组件类通常以 Razor 标记页（文件扩展名为 .razor）的形式编写。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。借助 Razor，可使用 Visual Studio 中的 IntelliSense 编程支持在同一文件中的 HTML 标记与 C# 之间切换。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mMdCyViy-1636696420919)(20211011142441.png)]

智能感知发挥了巨大的作用。

1.2.3. 路由

可以通过使用 @page 指令为应用中的每个可访问组件提供路由模板来实现 Blazor 中的路由。

以下 HelloWorld 组件使用路由模板 /hello-world。可通过相对 URL /hello-world 访问组件呈现的网页。当使用默认协议、主机和端口在本地运行 Blazor 应用时，会在浏览器中通过 https://localhost:5001/hello-world 请求 HelloWorld 组件。

@page "/hello-world"

Hello World!

1.2.4. 强大的调试功能

可以使用基于 Chromium 的浏览器 (Microsoft Edge/Chrome) 中的浏览器开发工具调试 Blazor WebAssembly 应用。还可以使用以下集成开发环境 (IDE) 调试应用：

Visual Studio
Visual Studio for Mac
Visual Studio Code

可用方案包括：

设置和删除断点。
在 IDE 中运行具有调试支持的应用。
单步执行代码。
在 IDE 中使用键盘快捷方式恢复代码执行。
在“局部变量”窗口中，观察局部变量的值。
请参阅调用堆栈，包括 JavaScript 和 .NET 之间的调用链。

1.2.5. 单元测试

单元测试是构建稳定且可维护的软件的一个重要方面。没有面向 Blazor 的官方 Microsoft 测试框架，但社区驱动的项目 bUnit 提供一种方便的方法来对 Blazor 组件进行单元测试。

注意：bUnit 是第三方测试库，不受 Microsoft 支持或维护。

下面演示了基于 Blazor 项目模板，对 Counter 组件进行的 bUnit 测试：

@page "/counter"

Counter

Current count: @currentCount



@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

[Fact]
public void CounterShouldIncrementWhenSelected()
{
    // Arrange
    using var ctx = new TestContext();
    var cut = ctx.RenderComponent();
    var paraElm = cut.Find("p");

    // Act
    cut.Find("button").Click();
    var paraElmText = paraElm.TextContent;

    // Assert
    paraElmText.MarkupMatches("Current count: 1");
}

测试的每个步骤都执行以下操作：

Arrange：使用 bUnit 呈现 Counter 组件的 TestContext ，找到段落元素 (
)，并将其分配给 paraElm。
Act：找到按钮的元素 (
Assert：在TextContent上调用 MarkupMatches，以验证它是否与预期字符串 Current count: 1 匹配。

1.2.6. 服务端渲染

Blazor 将组件呈现逻辑从 UI 更新的应用方式中分离出来。Blazor Server 在服务器上托管 Razor 组件，并通过 SignalR 处理 UI 更新。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w5vxdm6e-1636696420922)(blazor-server.png)]

运行时停留在服务器上并处理：

执行应用的 C# 代码。
将 UI 事件从浏览器发送到服务器。
将 UI 更新应用于服务器发送回的已呈现的组件。

1.2.7. 表单验证

1.2.8. JavaScript 互操作

对于需要第三方 JavaScript 库和访问浏览器 API 的应用，组件与 JavaScript 进行互操作。组件能够使用 JavaScript 能够使用的任何库或 API。

在下面的 CallDotNetExample1 组件中，ReturnArrayAsync C# 方法返回 int 数组。 [JSInvokable] 特性应用于该方法，这使JS可以调用该方法：

@page "/call-dotnet-example"

Call .NET Example 1


    


@code {
    [JSInvokable]
    public static Task ReturnArrayAsync()
    {
        return Task.FromResult(new int[] { 1, 2, 3 });
    }
}

1.2.9. 重用的 UI 组件

沙箱机制

可以做成服务端模式或客户端模式,服务端模式加载快,但不能脱机运行, 客户端模式可以脱机,但加载比较慢

1.3. 为什么用Blazor？

1.3.0.1. Blazor有以下几个优点：

使用C＃来取代JavaScript创建丰富的交互式UI
基于.NET及其生态编写服务器端和客户端应用程序逻辑
将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。
与现代托管平台（例如Docker）集成。
Blazor是开源的，其源码位置在GitHub上

另外需要注意的是：Blazor是基于开放标准而构建的，本身不需要任何额外插件。

1.3.0.2. 使用 .NET 进行客户端 Web 开发可提供以下优势：

使用 C# 代替 JavaScript 来编写代码。
利用现有的 .NET 库生态系统。
在服务器和客户端之间共享应用逻辑。
受益于 .NET 的性能、可靠性和安全性。
在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

说到 .NET ，就要说一下极致性能的 .NET 6，年初刚刚发布的 .NET6 ，相较于.NET 5，增加了更多的新特性，让人欢欣鼓舞！

.NET 6 在 .NET 5 的统一的基础之上，继续借助 Xamarin 扩展到 Android、iOS 和 macOS，可运行 dotnet new andriod 就能创建一个安卓应用的项目，然后运行 dotnet run 便能直接启动安卓模拟器运行，让移动开发更加轻松！

(1).NET6推出了期待已久的跨平台UI解决方案-.NET MAUI (Multi-platform App UI)，能够面向 Android、iOS、macOS 和 Windows 等构建应用，当下Preview 1 中已经包含了 Android 和 iOS 两个平台的 MAUI。

(2).NET6中，Blazor继续升级，从 .NET Core 3.0 支持 Blazor Server，到3.1 支持 Blazor WebAssembly，到当下的 Blazor Desktop支持桌面混合应用开发，Blazor值得期待！

**(3)**全面支持ARM64，包括WPF支持ARM64，还有macOS ARM64 支持，还提供了Apple Silicon（Arm64）芯片（本机和仿真）的支持，并进一步提升了性能！

1.3.0.2.1. .NET5已经是当下各开发平台的性能翘楚，而.NET6将更进一步！

PGO （Profile-Guided Optimization）利用运行时信息提升启动速度和吞吐量性能，其目标是优化二进制内的原生代码，让其在 CPU 和其他方面的计算机上执行的效率更高。优化代码可以让程序速度更快，并能减少内存使用和硬盘使用，预期全平台能得到 10% 的启动速度提升和吞吐量性能提升！

容器是当下最核心的架构基础，.NET6再度改进容器支持，包括改善容器的缩放支持、使用 PGO 减小容器镜像的大小、使用 R2R 版本气泡来提高启动和吞吐量性能、使用现代向量指令来提高启动和吞吐量性能等措施，.NET6将是最好的容器化语言！

快速内部循环（fast inner loop），开发者将能够非常快的构建项目，并且在调试运行时直接跳过编译，通过热重载功能完成代码的修改，而无需重新启动。提升开发者构建项目速度，运行时修改代码无需重新编译和重启应用，开发体验也起飞了。

1.4. Web应用平台

通过现代 Web 应用程序开发，您希望您的应用程序在桌面和移动浏览器上都能响应。现代 Web 应用程序比它们的前辈更加复杂和丰富，具有一些预期功能，包括实时 Web 功能、渐进式 Web 应用程序 (PWA) 功能和精心编排的用户交互。 .NET 开发人员第一次可以使用他们现有的 C# 技能在 Web 上构建各种应用程序。在我看来，这有助于模糊后端和前端开发人员之间的界限——但更广泛地通过web扩展应用程序开发。我相信在客户端和服务器上使用相同的编程语言的理念会促进用户更快的采用，特别是 Node.js。

1.5. Blazor 托管模型

Blazor 提供 2 种托管模式。Blazor WebAssembly 和 Blazor 服务器。

1.5.1. Blazor WebAssembly

从历史上看，微软之前所有的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二进制文件，它基于开放标准，但来自JavaScript以外的编程语言。

简言之，Blazor可与JavaScript互操作，甚至有不同的托管模型——服务器端和Wasm的客户端。

Wasm是JavaScript的终结吗，这意味着什么?答案是否定的。JavaScript不会消失——Wasm应该被认为是JavaScript的补充。
有了 WebAssembly，网络浏览器更像是应用程序商店——最终用户体验更接近原生性能。

1.5.2. Blazor 服务器

这也称为服务器托管模型，在此模型中，应用程序从 ASP.NET Core 应用程序内在服务器上执行。在客户端和服务器之间，建立了 SignalR 连接。例如，当客户端上发生事件（例如单击按钮）时，有关该事件的信息将通过 SignalR 连接发送到服务器。服务器处理事件并为生成的 HTML 计算差异。整个 HTML 不会再次发送回客户端，它只是通过已建立的 SignalR 连接发送差异部分到客户端。然后浏览器更新 UI。由于仅应用差异部分来更新 UI，然后通过Blazor.Server进行服务器端的UI渲染，因此应用程序感觉更快，对用户的响应也更快。

总结：这两种Blazor 技术

Blazor WebAssembly
Blazor Server

Blazor WebAssembly 是真正的SPA，页面的渲染在前端实现，可以实现真正的前后端分离设计。而Blazor.Server可以认为是前者的服务端渲染版本，它使用SignalR实现了客户端的实时通讯，它的计算跟渲染都在服务端处理。

简单来说，其实wasm就像是vue那种单页面程序，而Blazor.Server更像是基于前者的一种服务端渲染（注意：和MVC不是一回事），第一次刷新是HTTP请求，平时点击是SignalR处理。

1.6. 开源

Blazor是以MIT协议开源了，作为 ASP.NET Core GitHub 存储库的一部分。

开源社区对Blazor的推荐很高，dotnet/blazor在GitHub社区的Star数是9.3k，足以看出Blazor的影响力在不断加深。作为开发者来说能够公开地看到一个功能是如何构建、设计和实现的，这改变了游戏规则。发布问题、提出特性、与开发团队和其他人协作以及创建拉取请求的能力使软件社区为中心。毫无疑问，开源最终会产生更好的产品！开源的意义不用更多赘述。

1.7. 学习Blazor 前需要掌握的技能

C＃
HTML
CSS

总结：看完这些你可以接受使用现有的C#技能进行开发，但也容易忽略这个事实：HTML、CSS和JavaScript仍然存在并可用。通过这些，你可以继续使用您的HTML和CSS技能、你最喜欢的CSS库，并且可以轻松地使用现有的JavaScript包。毕竟，仍然是在构建web应用程序！

Blazor的组件模型使构建应用程序成为一种乐趣。它很简单，但是当你需要它的时候，它又能提供很多定制服务。.NET的生产力高效。可以使用现有的技能、工作流程、工具和以前编写的库。

C#来开启前端时代，可以开发SPA单页面应用，这是多么神奇的一件事啊！如果有一定的VUE.JS基础，入手Blazor.Wasm的话，还是特别快的，可以说是很对路的，无论是双向绑定、组件开发、页面模板、生命周期、父子…，都很契合。

所以说：只要你会ASP.NETCore和Vue（当然其他的也可以）技术，入门Blazor也就一两天的事儿。

Blazor的发展，有Blazor开发者社区、开发者工具、开源生态系统和受人尊敬的行业领袖的强烈意见。

还有来自主要组件供应商的整个UI组件发展，他们正在积极构建Blazor组件。使得Blazor生态得以良好展开。

不论是开发人员，还是整个开发团队，都有许多工具可供选择。具体使用哪一种框架，Blazor都可以是一个选择项。知道怎么使用它很重要，在这篇文章中，我们讨论了"什么是blazor"。其他资源我们会在接下来的文章给大家详细展开说！关于技术问题，欢迎评论提问。

下篇预告

深度解读Blazor Server技术

，入门Blazor也就一两天的事儿。