Blazor是万物Web的未来吗？

寒冰屋

于 2024-07-19 11:07:16 发布

阅读量79

点赞数 1

分类专栏： ASP.NET CORE 文章标签： Blazor .NET 8

原文链接：https://www.telerik.com/blogs/is-blazor-future-everything-web

版权

ASP.NET CORE 专栏收录该内容

1116 篇文章 54 订阅

订阅专栏

使用Blazor WebAssembly的渐进式Web应用程序

Blazor Hybrid with .NET MAUI

在本文中，我们将了解.NET 8如何通过在未来几年内对框架进行现代化和面向未来的功能来改变Blazor在市场上的地位。

这篇博客文章是作为C# Advent 2023的一部分发布的。这项年度活动激励作者和内容创建者在假日季节及时为.NET社区制作50条新内容。

说Blazor是一切Web的未来是一个大胆的声明。如果没有一些事实来支持标题，它可能听起来像是另一个点击诱饵标题。但是，.NET 8正在发生许多重要的事情，这些事情改变了Blazor的未来进程。在.NET 8版本中，一系列新功能将Blazor从“小众.NET 框架”转变为“新式Web框架及其他版本”。

使用Blazor的全栈Web UI

ASP.NET Core服务器的强大功能和性能与Blazor的功能和.NET生态系统相结合，使其成为新的全栈Web应用程序项目的主要候选者。与大多数Web框架不同，Blazor与服务器框架完全集成，它使用一种生成系统和一种语言。Blazor框架基本功能集包括：

强大的可重用组件模型
轻松处理UI事件
双向数据绑定
用于表单和验证的内置组件
通过虚拟化显示大型数据集
构建可安装的Web应用并支持脱机方案
丰富的热重装工具经验
编写C#，根据需要与JavaScript互操作

Blazor最近通过利用其服务器优势并整合最新的Web框架趋势，超越了基础知识。

Web框架趋势

在过去的30多年里，Web技术已经从静态HTML页面发展到实时更新的高度交互式应用程序。在整个演变过程中，底层架构也发生了变化。最初是一个“易于学习、动态和强大”的东西，现在有一个惊人的学习曲线和对资源的同样惊人的需求。

目前，我们正处于向简化过渡的状态。一个具体的例子是人们对服务器端 HTML 呈现重新产生了兴趣。这可以从流行的JavaScript框架（如Angular、React、Next.js和Svelte）中看出。Blazor还在.NET 8中采用了其服务器传统，并包括一些面向未来的功能。

Blazor的第一个版本包括服务器和客户端交互性。后来，添加了服务器端预渲染以提高客户端应用的性能。服务器呈现对Blazor等Web技术非常重要，因为它提供了更好的用户体验、更快的加载时间和搜索引擎优化（SEO）。考虑到Web框架自2002年以来一直有效地使用服务器渲染，将Web框架转换回服务器渲染的趋势是ASP.NET一个有趣的趋势。

考虑到Web框架自2002年以来一直有效地使用服务器渲染，将Web框架转换回服务器渲染的趋势是ASP.NET一个有趣的趋势。

在.NET 8中，Blazor已过渡到渐进式服务器端呈现策略。默认情况下，此策略放弃了交互性，而是静态呈现页面。静态呈现不需要Web Assembly（WASM）或Web套接字（SignalR）等资源，从而更快、更高效。静态网页是营销页面的理想选择，显示只读数据和简单的表单帖子。

正如我们在Web技术的发展中了解到的那样，虽然静态服务器渲染是最小且方便的，但它也有局限性。对数据驱动的页面使用静态呈现时，长时间运行的后台进程可能会导致页面显示延迟。通常，开发人员会在此方案中选择客户端框架来逐个请求单个组件，而不是等待服务器构建整个页面。

流式渲染

对于此方案，Blazor已包含服务器流式处理呈现。流式呈现允许服务器静态呈现具有占位符内容或等待指示器的页面。当服务器完成其任务时，Web请求将保持打开状态。该过程完成后，将使用服务器呈现的内容修补占位符。通过流式呈现，页面受益于Blazor的组件初始化生命周期，而无需使用WASM或Web套接字。

渐进式策略提供了从静态服务器呈现到交互式SPA应用程序的逐步过渡。它采用了经典Web开发的易用性，并添加了现代视角，并充当服务器渲染和交互式SPA应用程序之间的桥梁。

SPA应用

在最近的历史中，单页应用程序（SPA）一直主导着交互式Web应用程序。SPA的目标是以最高性能的方式提供交互性。SPA通过DOM更新技术最大程度地减少渲染，并且通常使用客户端资源。

借助Blazor，开发人员可以通过选择三种交互策略来构建SPA：交互式服务器、交互式WebAssembly或交互式自动。所有三种交互模式都使用增强导航。

名字	描述	渲染位置	互动
静态服务器	静态服务器端渲染（静态SSR）	服务器	❌
交互式服务器	使用Blazor Server的交互式服务器端呈现（交互式 SSR）	服务器	✔️
交互式WebAssembly	使用Blazor WebAssembly的客户端呈现（CSR）Client-side rendering（CSR） using Blazor WebAssembly†	客户端	✔️
交互式自动	最初使用Blazor Server进行交互式SSR，然后在下载Blazor捆绑包后的后续访问中使用CSR	先是服务器，然后是客户端	✔️

增强的导航

.NET 8中的所有三种交互模式都使用增强的导航。Blazor中的此功能会截获请求，并在其位置执行提取请求。然后，响应内容由Blazor集成到页面的DOM中。Blazor增强的导航和窗体处理消除了完全刷新页面的必要性，从而保留了页面的更多状态。这通常会导致更快的页面加载速度，并保持用户在页面上的滚动位置。

交互式WebAssembly

客户端呈现（CSR）允许通过Blazor WebAssembly在客户端对组件进行交互式呈现。首次呈现WebAssembly组件时，将下载.NET运行时和应用程序包并将其存储在缓存中。使用CSR的组件必须从不同的客户端项目构造，该项目建立Blazor WebAssembly主机。

交互式服务器

交互式服务器端呈现（也称为交互式SSR）利用Blazor Server以交互方式从服务器呈现组件。它通过与浏览器的实时连接来管理用户交互。当呈现服务器组件时，电路连接开始发挥作用。

交互式自动

自动应用程序在客户端和服务器上运行，包括可能完全不知道交互上下文的单个组件。使用自动应用程序时，首先在服务器上生成网页并将其发送到客户端。呈现初始视图后，将在后台下载其他资源，并在客户端处理后续操作。

就像服务器渲染一样，这个概念并不新鲜，类似的概念已经在Next.js、Meteor.js甚至ASP.NET WebForms的一些变体等框架中实现。Blazor的与众不同之处在于，它尝试使用.NET堆栈实现这些想法的现代化，同时利用Web标准技术。

若要详细了解Blazor的呈现模式，请参阅综合文章.NET 8中Blazor的新呈现模式入门。

现代风格

Blazor的Web方法是对当前和过去发展趋势的现代转折。Blazor是一个全栈Web UI框架，它利用.NET和C#从客户端和服务器实现交互性和呈现。Blazor能够快速高效地提供内容，同时自动转换交互模式，这使Blazor有别于其他Web解决方案。Blazor框架也不局限于传统的“Web应用程序”，因为开发人员也可以从各种跨平台选项中进行选择。

渐进式Web应用和跨平台Blazor

Blazor不限于Web浏览器，也不需要使用该框架的服务器。对于寻求解决方案以扩展其技能和能力的Web开发人员来说，Blazor是一个可靠的候选人。在跨平台应用程序开发方面，Blazor应用可以通过渐进式Web应用程序（PWA）功能利用Web生态系统，或者通过Blazor混合方法利用.NET MAUI堆栈。这两种应用程序类型都依赖于基于标准的架构，并通过不同的方法解决相同的问题。每种解决方案都有其独特的优势，选择取决于具体需求。

使用Blazor WebAssembly的渐进式Web应用程序

PWA 是使用Web标准技术（包括HTML、CSS、JavaScript和WebAssembly）构建的，这些技术适用于符合标准的浏览器。桌面和移动设备都不同程度地支持PWA功能。

安装PWA后，浏览器的地址栏和按钮（镶边）将被剥离。就像本机应用程序一样，PWA将具有一个图标，并与Windows任务栏进行本机交互。PWA获得了进一步增强用户体验的重要功能，即Service worker。Service Worker是PWA规范的一部分，PWA规范是一种Web Worker。Service Worker是独立于主浏览器线程运行的JavaScript代码，它可以提供脱机模式（拦截网络请求、缓存或从缓存中检索资源）并传递推送消息。

使用交互式Web Assembly和客户端呈现编写的Blazor应用程序可以轻松利用PWA功能。Blazor渐进式Web应用程序（PWA）是一种 SPA，它利用新式浏览器API和功能来模拟本机应用程序的行为。Blazor WebAssembly（WASM）与PWA功能很好地保持一致，因为它不需要服务器即可运行，因此支持所需的脱机功能。Blazor WASM包括对以下功能所需的API的访问：

离线操作并立即加载，无论网络速度如何
在自己的应用程序窗口中运行，而不局限于浏览器窗口
从主机操作系统的开始菜单、停靠栏或主屏幕启动
接收来自后端服务器的推送通知，即使用户未主动使用应用程序也是如此
在后台自动更新

其他标准化浏览器API可以执行以下任务：地理位置、通知、支付、蓝牙、NFC等等。浏览器API的集合与本机移动和桌面平台上可用的API非常相似，但有一些例外。若要进行真正的平台API访问，开发人员可以选择带有.NET MAUI的Blazor Hybrid。

Blazor Hybrid with .NET MAUI

Blazor Hybrid是Microsoft推出的一种令人兴奋的新开发模式，它允许开发人员使用Blazor框架和平台本机.NET应用创建桌面和移动应用程序。由于Blazor混合应用使用HTML、CSS、C#和JavaScript，因此有充分的机会在Blazor Web客户端、桌面和移动应用之间共享通用代码库。此外，可以将现有Blazor应用程序配置为与.NET MAUI一起使用，添加桌面和移动客户端。

当Blazor引入Web时，主要目标之一是使开发人员能够使用.NET生成Web应用程序UI。借助Blazor Hybrid，主要目标略有改变，将.NET开发人员的功能从Web扩展到桌面和移动空间，同时重用HTML和CSS技能以及.NET。

具有MAUI的Blazor混合堆栈提供了一些标准Blazor Web开发或PWA所不具备的独特功能。使用WebAssembly时，.NET运行时在解释模式下运行，其性能不如本机运行的.NET。虽然.NET8 中进行了改进，使Blazor WASM具有更高的性能，但在选择WebAssembly时仍然需要权衡。

同样，Blazor Server也有权衡。虽然Blazor Server能够以本机方式在服务器上运行.NET，但它需要与客户端的持续连接，并且性能指示客户端的延迟。

Blazor Hybrid在Blazor生态系统中具有独特的地位，它可以通过运行本机平台提供的.NET运行时来消除这些权衡。与Blazor WASM不同，Blazor Hybrid不使用解释模式，而是作为设备本机应用执行。由于Blazor混合应用是在本地处理的，因此也避免了Blazor Server的权衡。虽然每个平台对.NET运行时的执行都有细微差别，但Blazor Hybrid的执行比WebAssembly的执行“更接近金属”。

Blazor Hybrid在Blazor生态系统中具有独特的地位，它可以通过运行本机平台提供的.NET运行时来消除这些权衡。

除了性能之外，Blazor Hybrid在共享单个代码库方面还具有最大的潜力，同时面向跨平台开发。这包括将应用程序发布到所有主要应用商店的能力，以及接收移动主屏幕图标或桌面图标的能力。由于Blazor Hybrid with .NET MAUI编译为本机Android双版，因此它可以超越典型的“移动设备”，并在令人兴奋的新空间中工作。

使用Blazor实现原生

Blazor Hybrid将Blazor Web的优点引入本机移动/桌面应用。Blazor也可以做原生的事情吗？

Blazor增强现实

Blazor PWA和Blazor Hybrid应用程序的一个方面是新兴的增强现实（AR）空间。虽然Blazor与AR中的空间计算没有直接联系，但它确实具有2D或平面应用的潜力。平面应用程序本身不是沉浸式应用程序，而是在平台操作系统上的沉浸式AR环境中运行。Meta Quest 3允许在其平台上以PWA或Android二进制文件的形式使用扁平化应用程序。流行的Web应用程序开始以扁平化应用程序的形式进入平台，例如：Microsoft Office，Instagram和Netflix。

Blazor应用可以作为PWA或Blazor混合应用发布到Quest平台。这两个选项都需要很少的额外配置（如果有的话）即可工作。在Quest上部署PWA应用程序需要通过商店安装该应用程序，这与Windows或Android不同，后者仅允许直接从浏览器安装PWA。若要为Quest商店创建PWA，请使用Meta PWA命令行（CLI）工具将应用打包为Android二进制文件。然后，打包的应用程序将提交到Quest应用商店。

使用.NET MAUI时，该过程非常简单。将Blazor Hybrid与.NET MAUI配合使用时，只需插入开发人员支持的Quest 3。Quest设备现在将显示在Visual Studio的“开始”菜单中，可以在其中进行部署、调试和测试。

在Quest环境中开发Blazor应用程序是一种紧密集成的体验。在Quest中运行Blazor应用后，可以通过设备查看物理桌面;但是，这不是最好的体验。取而代之的是，Quest上的远程桌面查看器可用于在AR中访问桌面。在AR中，Blazor应用和桌面可以并排查看。

此外，可以通过在桌面上打开Chrome浏览器并导航到chrome://inspect来调试Blazor应用的WebView。在Chrome调试器中，您可以像调试典型网页一样访问DOM和控制台。

Blazor和.NET生态系统用途广泛且真正可移植。在保持生产力的同时，能够进入AR等新平台是有希望的。

生产力

.NET和Blazor生态系统已经成熟，可以提供大量生产力工具，例如：功能丰富的模板、与云体系结构的集成、测试库、UI 组件库、脚手架工具和交互式在线REPL。

Blazor入门

使用提供的模板，Blazor入门比以往任何时候都更容易。除了顶级选项之外，每个模板都有一组选项，允许开发人员定制脚手架解决方案以满足他们的需求。包含的模板涵盖以下方案：Blazor Web应用、Blazor WebAssembly独立应用和PWA（选项）。

.NET 8引入了一个新的Blazor项目模板：Blazor Web应用模板。新模板为使用Blazor生成任何样式的Web UI提供了单一起点。该模板将现有Blazor Server和Blazor WebAssembly托管模型的优势与.NET 8中添加的新Blazor功能相结合：静态服务器端呈现（静态SSR）、流式呈现、增强的导航和表单处理，以及使用Blazor Server或Blazor WebAssembly在每个组件的基础上添加交互性的功能。

对于不需要.NET服务器、没有服务器或 PWA 的方案，Blazor WebAssembly独立应用将在没有服务器资源的情况下搭建解决方案。在使用第三方提供的或需要完全在客户端运行的Web API时，这是理想的选择。开发PWA时，使用此模板并选中相应的渐进式Web应用选项将为PWA生成所有必要的资源。

除了Blazor特定模板外，新的微服务模板现在还提供预览版。

.NET Aspire和微体系结构

.NET Aspire是一个固执己见的云就绪堆栈，用于构建可观察的、生产就绪的分布式应用程序。.NET Aspire通过处理特定云原生问题的NuGet包集合提供。云原生应用通常由互连的小型部分或微服务组成，而不是单个整体代码库。云原生应用通常会消耗大量服务，例如数据库、消息传递和缓存。

.NET Aspire应用程序使用可观察的业务流程协调程序模式插入不同的微体系结构以创建完整的解决方案。使用Aspire模板，可以使用已配置为应用程序一部分的Blazor Web前端生成云就绪解决方案。此外，Aspire应用程序本身有一个内置仪表板，该仪表板随应用程序一起启动。仪表板监视项目、容器、可执行文件、日志、项目和跟踪。最重要的是，Aspire仪表板应用程序本身是Blazor应用程序。这表明Microsoft愿意支持Blazor平台并进一步开发。

适用于Blazor的Telerik UI

要想在任何应用程序堆栈中高效工作，都需要出色的用户界面（UI）工具集。使用Progress Telerik UI for Blazor库，可以使用110+个真正本机、易于自定义的Blazor组件快速扩展Blazor。Telerik UI for Blazor消除了对数据处理、性能、用户体验、设计、全球化、本地化以及最重要的可访问性的担忧，从而显著降低了开发成本。

Telerik UI for Blazor是一款商业产品，这意味着你将获得直接在库上工作的开发人员的卓越支持。文档处理资源也包含在库中，因此阅读和书写.docx、.pdf和其他流行格式变得轻而易举。

Telerik Visual Studio和VS Code扩展提供基架工具，以提高开发人员的工作效率。它们允许您快速将组件页面添加到应用程序中，并通过向导界面设置组件的参数。

交互式在线Blazor REPL

网络编程加速平台并缩短学习曲线的一个方面是实时编辑网页的能力。尽管Blazor使用.NET技术和编译语言，但这并不意味着进入门槛很高。

适用于Blazor的Progress Telerik REPL（Blazor REPL）是一种无需安装任何内容即可在浏览器中编写Blazor代码的快速简便方法。Blazor REPL是一个免费的游乐场，用于在舒适的浏览器中创建、运行、保存和共享代码片段和示例。它是熟悉Blazor代码、结对编程或简单分享想法的绝佳工具。

下面的面板是使用Blazor REPL的交互式Blazor代码片段，可以实时修改。

<input type="number" @bind-value="Centimeters"
       @bind-value:event="oninput" 
       id="centimeters"/>
<label for="centimeters">Centimeters</label>

@code {
    double inches = 1; // default value
    public double Inches
    {
        get => inches;
        set
        {
            centimeters = value * 2.54;
            inches = value;
        }
    }

    double centimeters = 2.54; // default value
    public double Centimeters
    {
        get => centimeters;
        set
        {
            inches = value / 2.54;
            centimeters = value;
        }
    }
}

Blazor REPL 入门

如何开始使用Telerik REPL for Blazor编写、运行和共享Blazor示例。

无ASP.NET Core渲染

Blazor的组件模型（又名Razor组件）不再需要呈现浏览器、服务器或HTTP请求。Razor组件可以以HTML形式直接呈现到字符串或流中，独立于ASP.NET Core托管环境。这对于要生成HTML片段的方案非常方便，例如用于生成电子邮件内容、生成静态网站内容或构建内容模板引擎。

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using ConsoleApp1;

IServiceCollection services = new ServiceCollection();
services.AddLogging();

IServiceProvider serviceProvider = services.BuildServiceProvider();
ILoggerFactory loggerFactory = serviceProvider.GetRequiredService<ILoggerFactory>();

await using var htmlRenderer = new HtmlRenderer(serviceProvider, loggerFactory);

var html = await htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
    var dictionary = new Dictionary<string, object?>
    {
        { "Message", "Hello from the Render Message component!" }
    };

    var parameters = ParameterView.FromDictionary(dictionary);
    var output = await htmlRenderer.RenderComponentAsync<RenderMessage>(parameters);

    return output.ToHtmlString();
});

Console.WriteLine(html);

前面的代码片段演示如何从控制台应用程序呈现Razor组件。在此代码中，将创建一个HtmlRenderer对象。HtmlRenderer对象合并了熟悉的服务提供程序模式，用于.NET中的依赖项注入。它还使用标准的.NET记录器工厂作为呈现过程的日志记录机制。构造HtmlRenderer后，将调用RenderComponentAsync方法，以发出已完成的HTML字符串。生成的HTML字符串可用于各种应用程序方案。

Blazor在浏览器之外呈现的多功能性将有助于在未来几年内构建更大的基于Blazor的工具生态系统。

结论

Blazor框架已经从“另一个Web框架”演变成更多内容。随着.NET 8的发布，Blazor利用了其最有价值的资产，即ASP.NET Core服务器。现代Web趋势（如静态服务器呈现和自动交互模式）的引入将Blazor提升到一个新的水平。

虽然Blazor技术得到了加强，但它也通过PWA、带有.NET MAUI的Blazor Hybrid甚至增强现实扩展到了新的渠道。随着Blazor变得越来越有用，它还通过包含业务线应用程序和微服务体系结构的模板和工具的广泛生态系统提高了工作效率。尽管Blazor很早就与WebAssembly相关联，但它通过独立呈现几乎任何自定义解决方案，远远超出了浏览器和服务器。

如果你是.NET开发人员，Blazor是真正的“一切Web的未来”。如果你不是.NET开发人员，可能是时候尝试一下了。

https://www.telerik.com/blogs/is-blazor-future-everything-web