散装码农,什么是Blazor?

您现在的位置是：网站首页> .NET Core

什么是Blazor?

.NET Core
2022-06-29
872人已阅读

摘要

简单来说就是微软推出的基于.net平台以及http://ASP.net core技术的, 交互式客户 Web UI 框架

https://blazor.net

首先blazor是基于C#的，主要的开发工具是C#(无需使用Javascript), 这对于.net 程序员来说非常友好，可以无需为了前端学习各种不同的技术，同时基于C#的代码也可以很好的和原有的Javascript代码进行沟通。

首先blazor是基于C#的，主要的开发工具是C#(无需使用Javascript), 这对于.net 程序员来说非常友好，可以无需为了前端学习各种不同的技术，同时基于C#的代码也可以很好的和原有的Javascript代码进行沟通。

第二点：blazor框架由于基于.net 平台，因此可以充分的利用.net 平台提供的各种功能丰富的库进行编程，最大程度的利用已有的资源解决各种问题。

第三点：blazor框架可以直接运行在浏览器的线程里，直接在客户端渲染UI，也可以将部分计算分配到客户端，作为富计算的客户端，同时可以作为瘦计算客户端运行。

第四点：blazor是基于组件的，您可以开发自己的专属组件，也可以分发您的组件给到有需要的用户，甚至您可以请您的客户为您的组件进行付费。

那么Blazor是如何运行的呢？

Blazor有两种部署的模式：

1.基于WebAssembly部署的模式：

关于什么是WebAssembly请参考文档：https://developer.mozilla.org/zh-CN/docs/WebAssembly，简而言之Webssembly是一种新的编码方式，可以在现代的网络浏览器中运行－它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。（,会java的同学想象一下当初Applet的设计目标，不过Applet设计为各种浏览的插件）。

基于Webassembly部署模式的Blazor会在客户端的浏览器上直接运行.net的运行时，然后由.net运行时在浏览线程上直接运行您的C#代码，您的C#代码会将UI呈现为HTML, CSS从而直接渲染UI，下图可以大概说明基于WebAssembly运行的Blazor的基本原理：

2.基于Blazor Server的部署模式：

这种模式有点类似于当前的http://ASP.net Core的MVC或者是基于Razor Page的形式，所有的UI组件编译都是在服务器端运行的，客户端使用blazor的客户端库通过SignalR链接到服务端实现UI的更新和事件响应，大致的原理如下图：

但是这种模式和原有的http://ASP.net Core MVC甚至Razor Page有什么区别，我们后继的文章再来讨论这个问题。

这两种部署模式各有优缺点，虽然部署模式不同，但是两种部署模式在代码架构和编写上是没有任何区别的，因此您可以根据您的需求场景的不同选择不同的部署模式。

两种模式各有优缺点，但是个人觉得 WebAssembly 模式的 Blazor 意义更大一些

Blazor Server 托管模型具有以下优点：

下载项大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。

应用可充分利用服务器功能，包括使用任何与 .NET Core 兼容的 API。

服务器上的 .NET Core 用于运行应用，因此调试等现有 .NET 工具可按预期正常工作。

支持瘦客户端。例如，Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。

应用的 .NET/C# 代码库（其中包括应用的组件代码）不适用于客户端。

Blazor Server 托管模型具有以下局限性：

通常延迟较高。每次用户交互都涉及到网络跃点。

不支持脱机工作。如果客户端连接失败，应用会停止工作。

如果具有多名用户，则应用扩缩性存在挑战。服务器必须管理多个客户端连接并处理客户端状态(SignalR)。

需要 ASP.NET Core 服务器为应用提供服务。无服务器部署方案不可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。

Blazor WebAssembly 托管模型具有以下优点：

没有 .NET 服务器端依赖，应用下载到客户端后即可正常运行。

可充分利用客户端资源和功能。

工作可从服务器转移到客户端。

无需 ASP.NET Core Web 服务器即可托管应用。无服务器部署方案可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。

Blazor WebAssembly 托管模型具有以下局限性：

应用仅可使用浏览器功能。

需要可用的客户端硬件和软件（例如 WebAssembly 支持）。

下载项大小较大，应用加载耗时较长。

.NET 运行时和工具支持不够完善。例如，.NET Standard 支持和调试方面存在限制。

有两种不同开发模式

Blazor WebAssembly， C# 代码运行在浏览器中。

Blazor Server，C# 代码在服务器端执行，使用 SignalR 同步到浏览器进行更新。

接下来看一下如何创建 Blazor 工程。有两种方式，1、使用命令行，2、使用IDE，如 Visual Studio 。

命令行工具，仅供不想安装 Visual Studio 这类巨型工具，还想尝鲜的同学使用。可搭配任何编辑器，比如 Visual Studio Code。以下是具体步骤：

首先，需要下载 dotnet core 8。这里顺便给出 dotnet core 删除工具 dotnet-core-uninstall 9 。

使用命令 donet new -l 可以看到所有支持的模板。

在空白目录中使用命令 dotnet new blazorwasm 来创建 Blazor WebAssembly 的模板工程。

执行命令 dotnet run 启动网站，可以在浏览器中访问了。

使用 Visual Studio 创建就更为简单，选择对应的模板即可。

终于到了能上代码的时间了！

先来看两个关键文件，C# 的入口文件 Program.cs 和 HTML 的入口文件 index.html 。

// Program.cs 文件

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

using Microsoft.Extensions.DependencyInjection;

using System;

using System.Net.Http;

using System.Threading.Tasks;

namespace BlazorWebAssembly

{

public class Program

{

public static async Task Main(string[] args)

{

var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");

// 上一行我们可以理解为，在 ID 是 app 的元素中渲染展示 Blazor WebAssembly，所以让网页的某一部分使用 Blazor 技术渲染也是可行的。

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

}

<!DOCTYPE html>

<html>

<head>

<title>BlazorWebAssembly</title>

</head>

<body>

<div id="app">Loading...</div>

An unhandled error has occurred.

<a href="" class="reload">Reload</a>

</div>

<!-- blazor.webassembly.js 文件的作用有两个。

1、下载 .net runtime, 依赖的类库以及项目编译后的文件。

2、从 blazor.boot.json 中找到 C# 程序入口，并初始化运行。 -->

</body>

</html>

在编译之后的文件中，我们可以看到一些后缀名是 br 的文件，是因为 Blazor 默认使用了压缩率更高的 brotli 10 进行压缩，我觉得在这里应该推荐一下，brotli 比 gzip 更能节省空间。

Blazor WebAssembly 方式开发的简单架构，如上图所示，.net 代码的执行和 DOM 元素的渲染重绘都是在浏览器中进行的。

缺点：首次打开网站时需要加载大量依赖文件（ .net runtime 以及依赖的各种类库）；需要浏览器支持 WebAssembly 。在 caniuse 中可以查看到各浏览器对 WebAssembly 的支持情况 11 。

C# 和 JavaScript 的交互操作

有两种不同的交互方式，1、从 C# 调用 JavaScript 的代码 12，2、从 JavaScript 调用 C# 的代码 13。

首先，从 C# 调用 JavaScript 的代码

先写一个 JavaScript 的全局函数，准备给 C# 使用。

function buildObjctString(name, age) {

const obj = { name, age }

return JSON.stringify(obj)

}

在 C# 中就可以这么调用

@inject IJSRuntime JS

private async Task CSharpCallJS()

{

var methodName = "buildObjctString";

var name = "zpfe group";

var age = 18;

var data = await JS.InvokeAsync<string>(methodName, name, age);

}

然后，从 JavaScript 调用 C# 的代码

// 这里的 C# 代码也是拿全局函数来示例，在函数头上加了注解。

[JSInvokable]

public static Task<string> GetTime(string param)

{

return Task.FromResult($"{param}，后面的来自C# {DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");

}

在 JavaScript 中的调用方式是

// 如果 C# 函数有参数，不传递会报错

const result = await DotNet.invokeMethodAsync("BlazorWebAssembly", "GetTime", "这个是 js 传入的参数");

alert(result)

这里只是最简单的例子，更详尽的还请从参考链接 1213中查看。

调试

使用 Visual Studio 调试将会很容易，和普通的 C# 调试方式一样，只在需要调试的代码最前面用鼠标点出调试的断点，按下 F5 就可以调试了。JavaScript 代码也可以使用相同的方式进行调试。

Blazor Server

个人认为 Blazor Server 是为了弥补 Blazor WebAssembly 的不足而创造出来的。Blazor Server 开发方式将会强依赖 SignalR 5 。这里先简单介绍一下 SignalR ，它也源自 ASPNET Core 社区，是基于 RPC 协议的一种实现。简单来说，就是可以在浏览器中使用 JavaScript 代码通过 SignalR 来调用服务器上开发的函数，也可以在服务器上使用 SignalR 来调用浏览器中的 JavaScript 函数。这种方式能够避免网站首次打开时需要加载大量依赖文件的问题，也能够弥补浏览器对WebAssembly的支持问题，甚至能够在 IE 中运行。但是这种方式开发的网站 UI 更新、事件处理等都需要通过 SignalR 调用服务器进行处理，需要和服务器频繁交互数据，对服务器算力要求颇高。以我的理解这种方式只适合用户量不大的网站。

使用命令创建的方式是 dotnet new blazorserver

上一篇：.NET Core 基础知识

下一篇：Blazor实现Windows、macOS、Android、iOS、Web共用一套UI

您现在的位置是：网站首页> .NET Core

什么是Blazor?

相关文章