早前发布 Blazor 时,在Microsoft 官方文档里看过 Blazor 的教程。当时,只是做个了解。而今,想起来网上搜索下有关 Blazor 在国内的情况及评价,其中有一个网友建议(Blazor Server +AntDesign+LiteDB),对开发效率很大,就产生好奇,要去一探究竟。

首先我们先介绍下 Blazor 是什么,有什么特点。这些有利于我们对 Blazor 有一个大概的了解。

Blazor 是一个用于构建 Web 应用程序的开源框架。与传统的 Web 应用程序框架不同的是,Blazor 使用 C# 编写客户端代码,并在浏览器中运行,不需要 JavaScript 进行交互,意味着 .NET 开发人员可以完全使用 C# 来实现前端业务逻辑。

Blazor 提供了两个不同的模型:

  1. Blazor Server:在此模型下,应用程序的代码运行在服务器上,客户端浏览器通过 SignalR 实时通信协议与服务器进行通信,客户端只是在浏览器中渲染用户界面。因此,Blazor Server 应用程序具有快速启动、高安全性和良好的可扩展性等优点。这个模型类似于 ASP.NET Web Forms 的模型。

  2. Blazor WebAssembly:此模型将 Blazor 应用程序作为 WASM(Web Assembly)二进制文件在浏览器中运行,不需要经过服务器进行交互。因此,Blazor WebAssembly 应用程序可以脱机运行,而不需要与服务器进行通信。这个模型类似于 React、Angular 或 Vue 等 JavaScript 框架。这种模式下的应用程序具有更快的响应速度和更好的离线支持等特点。

我通过网上找了下这两种模型的区别及优缺点,供大家在技术选型的时候参考。

  • 应用程序架构

Blazor Server 的应用程序代码是运行在服务器上的,客户端浏览器只是在当前会话中向服务器发送请求,并实时接收由服务器提供的 HTML/CSS/JavaScript 代码进行渲染。而 Blazor WebAssembly 的应用程序代码是直接运行在客户端浏览器中的,不需要服务器的支持。

Blazor Server 比 Blazor WebAssembly 更省带宽,因为仅在客户端与服务器之间传输更新的 UI 组件状态,而不是整个组件。但是,Blazor Server 应用程序可能会面临延迟和网络问题等挑战,因为必须将请求发送到服务器并等待响应。而 Blazor WebAssembly 则具有更快的启动速度和更好的响应能力,因为应用程序完全在客户端本地运行,更像是一个桌面应用程序。

Blazor Server 可以访问所有 .NET 运行时中可用的功能和库,这意味着它可以轻松地访问文件系统、数据库和其他基于 .NET 的服务。而 Blazor WebAssembly 则受到浏览器沙箱的限制,只能访问浏览器所提供的 API,对外部资源的访问需要通过 JavaScript 进行封装和代理。

Blazor Server 的开发体验与传统的 Web 应用程序类似,客户端浏览器只是负责渲染接收到的 HTML/CSS/JavaScript 代码,并与服务器进行通信。而 Blazor WebAssembly 可以像桌面应用程序一样进行本地调试和开发。

Blazor Server 的优点:

  1. 运行在服务器上,可以充分利用服务器的计算和内存资源;

  2. 具有更好的安全性和易于扩展性;

  3. 可以访问所有 .NET 运行时中可用的功能和库;

  4. 与传统 Web 应用程序类似,开发体验较为熟悉。

Blazor Server 缺点:

  1. 可能面临延迟和网络问题等挑战;

  2. 不支持离线运行;

  3. 有更高的带宽和服务器负载。

Blazor WebAssembly 的优点:

  1. 具有更好的响应能力,更像桌面应用程序;

  2. 具有离线支持;

  3. 跨平台的解决方案。

Blazor WebAssembly 缺点:

  1. 受到浏览器沙箱的限制,不支持所有 .NET 功能,例如对本地文件系统和数据库的直接访问等;

  2. 需要引入更多的 JS 框架和库作为补充,这会增加项目的复杂度;

  3. 文件大小问题。Blazor WebAssembly 应用程序需要将 .NET 和 Mono 运行时、DLL、静态文件等全部打包到客户端上,并且需要在浏览器上运行,因此应用程序的大小往往比较大,并且首次加载时间往往也较长。

综合来看,如果需要充分利用服务器的计算和内存资源,并且对性能和带宽要求不高,可以选择 Blazor Server;如果需要具有更好的响应能力、离线支持和跨平台解决方案,则可以选择 Blazor WebAssembly。但是,这两种模型都不适合 性能要求极高( 高并发、秒杀)、内容变化频繁(数据实时更新)等场景。

接下来我们创建一个简单的 Blazor Server 项目来体检。

  1. 打开 visual studio 2022,选择“创建新项目”;

  2. 在“创建新项目”对话框中,在左侧选择“Blazor Server 应用空”;

  3. 在右下角点击“下一步”;

  4. 在“配置新项目”对话框中,输入项目名称(BlazorApp),选择存储位置;

  5. 在右下角点击“下一步”;

  6. 在“其它信息”对话框中,使用默认;

  7. 在右下角点击“创建”;

  8. 等待项目创建完成后,可以看到一个默认的 Blazor Server 项目;

  9. 进入应用的项目文件,安装 NuGet 包引用;

    Install-Package AntDesign

  10. 更新 Program ;

    builder.Services.AddAntDesign();

  11. 然后在 Pages/_Host.cshtml 中引入静态文件;

    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />

    <script src="_content/AntDesign/js/ant-design-blazor.js"></script>

  12. 在 _Imports.razor 中加入命名空间;

    @using AntDesign

  13. 在 App.razor 最后一行添加一个 <AntContainer /> 组件

  14. 切换到Pages/Index.razor 这里可以使用 antdesign 组件啦。

    @page "/"
    //注入通知组件
    @inject INotificationService _notice
    <h1>哩厚 Blazor</h1>
    <Button type="primary" OnClick="@OnClick">click me</Button>
    @code {
    private async Task OnClick()
          var config = new NotificationConfig()
                   Message = "问候",
                   Description = "哩厚 Blazor",
                   Placement = NotificationPlacement.Top,
                   Duration = 0
          await _notice.Open(config);
    

    Button 里的 OnClick 事件有没有很像 ASP.NET WebForms 写法。

    如果您还没看过 Blazor 相关教程,就不要纠结代码是什么意思了。就当提前体验下。

    最后,祝大家学习愉快!

    Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架: ·使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。 ·共享使用 .NET 编写的服务器端和客户端应用逻辑。 ·将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。 ·与新式托管平台(如 Docker)集成。 ·使用 .NETBlazor 生成混合桌面和移动应用。 使用 .NET 进行客户端 Web 开发可提供以下优势:
    ASP.NET Core 3.x 学习笔记(7)——BlazorASP.NET Core 3.x 学习笔记(7)——Blazor编程模式对比Blazor客户端宿主模型Mono服务器端宿主模型从 Empty 模板开始建立一个 Blazor 项目 本系列学习笔记均来源于B站UP主”软件工艺师“的学习视频,学习连接如下: https://www.bilibili.com/video/BV1c441167KQ ASP.NET Core 3.x 学习笔记(7)——Blazor 编程模式对比 SPA(Sing
    blazor是一个微软推出的基于webassembly和C#(面向对象) 以及F#(面向函数)的前端框架 它类似vue react anglar的单页前端框架 只是他不再使用js或typescript 一年前我以为typescript会一骑绝尘 但是前端技术的更新迭代总是快得令人眼花缭乱 众所皆知,C#生态不好,但这不能掩盖它血统优于java的事实 现在你可以web开...
    使用 C# 代替 JavaScript 来创建丰富的交互式 UI。 共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。 使用 .NET 进行客户端 Web 开发可提供以下优势: 使用 C# 代替 JavaScript 来编写代码。 使用 C# 代替 JavaScript 来创建丰富的交互式 UI。 共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。 使用 .NET 进行客户端 Web 开发可提供以下优势: 使用 C# 代替 JavaScript 来编写代码...
    Blazor是单页应用程序开发框架。 Blazor名称是Browser和Razor(.NET HTML视图生成引擎)一词的组合/突变。含义是Blazor不必在服务器上执行Razor视图才能将HTML呈现给浏览器,而是能够在客户端上执行这些视图。 Blazor还支持在服务器上执行SPA。 Blazor的不同 Blazor与Silverlight不同,后者是Microsoft以前托管浏览器内应用程序的尝试。 Silverlight需要一个浏览器插件才能在客户端上运行,这使其无法在iOS设备上运行。
    blazor作为微软主推的一项新的前端技术确实有值得学习的地方,今天大致了解了一下,发现很多VUE的影子有VUE基础的同学,可以很快上手,不过建议用vs2019进行代码练习,现在VS2019社区版完全免费(虽然这个编辑器有点大),并且功能相对强大。 一些相关的学习链接: https://www.bilibili.com/video/BV17z4y1Q7cJ?from=search&seid=11929140045982620338视频学习 https://www.cnblogs.c...