Blazor基础知识:什么是Blazor——Blazor开发简介

目录

Blazor使用哪些技术?

Blazor组件模型

Blazor内部如何工作?

支持的平台——为什么Blazor不是Silverlight

那么Blazor有何不同?

不同的托管模式

Blazor WebAssembly(Blazor WebAssembly)

Blazor Server

Blazor Hybrid

Blazor United

哪种型号适合您?

(为什么)你应该学习Blazor吗?


获取Blazor开发简介,并简要了解Blazor的工作原理及其所基于的技术。

BlazorMicrosoft开发的一种新式Web用户界面开发技术。它允许现代Web应用程序开发,例如高度交互式的单页应用程序(SPA)。

它是.NET平台的一部分,这意味着它可以访问.NET提供的庞大生态系统,例如API、编程语言和运行时。

Blazor使用哪些技术?

Blazor使用 HTMLCSSC#创建交互式客户端Web用户界面。它不使用Microsoft特定的技术(如XAML),而是使用标准HTMLCSS来描述用户界面。

Blazor使用C#来实现应用程序行为,而不是像ReactAngularVue或其他JavaScript Web框架那样使用JavaScriptTypeScript

Blazor组件模型

本文简要概述了Blazor的工作原理。但是,作为开发人员,我们希望看到代码,我不会让您失望。

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

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

@code {
    private int currentCount = 0;

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

此代码来自Blazor Server应用程序的Visual Studio模板。它显示了Blazor组件的不同部分。

首先,您会注意到标准HTML的使用。我们使用h1pbutton标签。

C#代码要么以@符号为前缀,要么包含在由@code开头的代码块中。第一行的@page指令使此组件作为一个页面,可以在/counter路由上访问。

我们在组件的@code部分中定义属性,我们可以在HTML组件模板中使用其前面的@符号来访问这些属性。

添加到HTML按钮标签的@onclick属性允许我们将组件代码块中定义的IncrementCount方法与按钮连接起来。每当按下按钮时, 该方法被执行。

<PageTitle>标记引用基类库中包含的组件。在项目中包含或使用自定义Blazor组件的语法相同。

有关如何实现和使用Blazor组件,还有很多内容需要了解。这里的想法是提供它的外观和感觉的快速概述。它看起来非常干净,易于理解和维护。

Blazor内部如何工作?

BlazorBlazor组件模型与托管模型相结合。有不同的托管模型,本文稍后将介绍。

根据托管模型的体系结构,Blazor的工作方式有所不同。

使用Blazor的重要优势在于,无论选择哪种托管模型,都可以使用相同的组件。可以创建包含Blazor组件的类库,以便在不同的应用程序之间共享它们。

单个应用程序使用哪种托管模型并不重要;它可以访问类库并使用Blazor组件。

想想看。像ReactAngularVue这样的Web框架不仅决定了如何实现组件,而且还需要以特定的方式呈现它们。

有一些努力可以改变这种状况。例如,React Native允许您在本机应用程序中渲染React组件。但是,Blazor通过拥有真正独立的组件模型走得更远。

在我们的系列中详细了解Blazor AngularReactVue的比较。

支持的平台——为什么Blazor不是Silverlight

每当Microsoft发布新的前端技术时,尤其是针对Web的前端技术,人们都会大喊“Silverlight 2”

是的,我们不得不承认,Silverlight并不是一个长期的成功。然而,我们还需要明白,并不是Microsoft淘汰了这项技术。是架构在错误的时间出现在错误的地方。

让我带你回到过去。Silverlight基于浏览器插件。浏览器插件在当时很常见。最引人注目的是Flash播放器,用于构建华丽的网站(没有双关语)或许多在线游戏。

苹果决定他们不想再支持Flash播放器等浏览器插件。史蒂夫·乔布斯当时对两个主要领域不满意。首先,存在许多安全问题,其次,这些插件耗尽了他设备的电池寿命。我个人认为史蒂夫·乔布斯也想完全控制他的设备,但那是另一回事了。

那么Blazor有何不同?

Blazor基于开放的Web标准(如HTMLCSSWeb Assembly)构建。Blazor中涉及的技术很有可能在几十年内得到支持。

此外,使用开放标准意味着无需任何插件或扩展,Blazor即可在每个操作系统上的每个浏览器中运行

BlazorSilverlight一直想要的.NET跨平台Web用户界面解决方案,但做得对了。

不同的托管模式

有四种托管模式:

  • Blazor WebAssembly(Blazor WebAssembly)
  • Blazor Server
  • Blazor Hybrid
  • Blazor United

Blazor WebAssemblyBlazor WebAssembly

Blazor WebAssemblyWebAssembly.NET代码在浏览器中运行的最知名模型,因此该模型的名称。通过对网站的第一个请求,浏览器将下载应用程序,包括.NET运行时。应用程序代码是用C#编写的,.NET运行时在运行时将C#代码转换为Web程序集。

此模型的运行时和Web应用程序的初始下载量约为1-5 MB。总大小显然取决于应用程序的大小。

优点是,一旦下载,整个应用程序代码就在设备上,并且可以在客户端完成基于Web程序集的执行。客户端仅连接到后端以获取其他数据。此方法使Blazor WebAssembly大规模可伸缩。

Blazor Server

Blazor Server.NET Core 3中引入的第一个托管模型。Web应用在服务器上运行,客户端使用 SignalRWeb套接字)连接进行连接。

此方法需要能够执行.NET代码的服务器,因为应用程序在服务器上运行,通常在ASP.NET Core Web应用程序中运行。可伸缩性有其局限性,因为每个客户端都使用持久性Web套接字连接到服务器,使用SignalR进行连接。

但是,它具有更快的下载和初始页面呈现速度,因为只有屏幕上显示的HTMLCSS才会从服务器传输到客户端。您还可以完全访问后端技术,因为您的代码在服务器上运行。

Blazor Server依赖于稳定的网络连接。否则,您将遇到延迟问题。

Blazor Hybrid

Blazor Hybrid是最新的可用托管模型,也是最复杂的托管模型。该应用程序部分在本机平台上运行,例如ElectronMobile Blazor Bindings(实验性)。另一部分在浏览器中运行。这个想法是将网络结合起来使用本机API访问实现应用程序的技术。

脱机方案可以从Blazor Hybrid方法中受益。您还可以使用本机UI组件来构建应用程序。但是,与其他方法相比,部署和实现要复杂得多。

Blazor Hybrid.NET 7中的最新添加功能,我们将在未来的.NET版本中看到许多改进和新功能。

了解适用于Blazor 的Telerik UI如何使 Blazor Hybrid 成为现实。

Blazor United

Blazor United最近已被列入.NET 8 的路线图。这个想法是将Blazor ServerBlazor WebAssembly结合起来,以充分利用两种托管模式。

主要目标之一是让开发人员能够选择单个组件的渲染模型。

例如,你可以有一个静态页面、一个具有一些反馈或交互的页面(如窗体(Blazor Server))和一个具有真正的单页、丰富的用户交互体验的页面(Blazor WebAssembly)——所有这些都在同一个Web应用程序中。

哪种型号适合您?

所有托管模式都有其优点和缺点。最好的建议是使用适合Web应用程序非功能性要求的托管模型。

Microsoft文档中的指南可帮助您确定托管方式模型,其最能解决您的问题。请记住,Blazor United刚刚发布,预计将随着.NET 8或更高版本的发布而正式发布(GA)。

我已经开发出在Blazor ServerBlazor WebAssembly之间做出决定。

对于具有已知用户数的内部应用程序,我将使用Blazor Server。我可以在同一个项目中同时编写前端和后端代码。该代码可在所有浏览器中运行,甚至包括不支持Web汇编的浏览器。

对于具有可缩放用户数量的面向客户的应用程序,我将使用Blazor WebAssembly。它迫使我实现单独的前端和后端,使我能够更好地控制安全边界。我还能够扩大或扩展,根据需要输出。我通过将一些工作从服务器卸载到客户端来节省基础设施方面的资金。

我仍然需要使用Blazor Hybrid实现应用程序。

(为什么)你应该学习Blazor吗?

Blazor允许开发人员使用.NET平台构建新式Web应用程序,例如丰富的用户体验单页应用程序。

如果你或你的团队具有.NET开发(如C#编程)方面的先验知识,或者你有一个现有的类库,其中包含要用于下一个Web应用程序的代码,则Blazor适合你。

如果您拥有公司的知识和现有代码,为什么要添加另一个技术堆栈?开发人员只能深入了解一组有限的技术。为什么要分散他们的注意力并引入JavaScriptTypeScript和一个或多个Web框架 何时可以专注于.NET并使用C#HTMLCSS来构建解决方案?

Microsoft在开发人员技术上花费了数十亿美元,例如Microsoft Azure平台。他们有能力在Web框架上投入大量资金,以帮助开发人员构建将部署到Azure的应用程序。没有理由让Blazor几年后不会出现。

开发速度快得离谱。如果你自己还没有尝试过Blazor,我建议花大约5-10个小时学习如何实现和使用Blazor组件,你会被它的简单性和工作效率所震撼。

若要继续学习,请查看Claudio的免费 Blazor速成课程视频系列。这是一个很好的起点 帮助你快速了解Blazor开发,从实现第一个Blazor组件到使用CSS处理窗体,再到生成简单的仪表板。

https://www.telerik.com/blogs/blazor-basics-introduction-blazor-development

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值