Blazor University (1)介绍 - 什么是 Blazor?

原文链接:https://blazor-university.com/overview/what-is-blazor/

什么是 Blazor?

Blazor 是一个单页应用程序开发框架。Blazor 这个名称是单词 Browser 和 Razor(.NET HTML 视图生成引擎)的组合/变异。这意味着 Blazor 不必在服务器上执行 Razor 视图以便将 HTML 呈现给浏览器,而是能够在客户端上执行这些视图。

f762ef674501570c8a1bab01efc5407f.png

具有客户端执行能力的 Blazor 应用

Blazor 还支持在服务器上执行 SPA。

Blazor 不是什么

Blazor 不像 Silverlight,微软之前在浏览器内托管应用程序的尝试。Silverlight 需要一个浏览器插件才能在客户端上运行,这阻止了它在 iOS 设备上运行。

Blazor 不需要在客户端上安装任何类型的插件即可在浏览器中执行。Blazor 要么运行在服务器端,在这种情况下,它在服务器上执行,浏览器仅作为一个终端,要么通过使用 WebAssembly 在浏览器本身中运行。

因为 WebAssembly 是一种 Web 标准,它在所有主要浏览器上都受支持,这意味着 Blazor 客户端应用程序可以在 Windows/Linux/Mac/Android 和 iOS 上的浏览器中运行。

Blazor 是开源的

Blazor 源代码[1]可在此处获得。源代码归 .NET 基金会[2]所有,该基金会是一个非营利组织,旨在支持基于 .NET 框架的开源项目。

据 .NET 基金会称,在撰写本文时,它得到了 3,700 家公司的支持,并有 61,000 名贡献者。

3fe9a643fb3c4a4f4157b59f59541eeb.png


什么是 WebAssembly?

WebAssembly(简称为“Wasm”)是一个指令集,旨在运行在任何能够解释这些指令或将它们编译为本机机器代码并执行它们的主机上。

Wasm 是一种以特定二进制格式格式化的指令集。因此,任何遵守本规范的主机(硬件或软件)都能够读取二进制文件并执行它们——无论是解释的,还是直接编译成特定于设备的机器语言。

Wasm 类似于 .NET 源代码编译成的通用指令集(通用中间语言)。就像 .NET 一样,Wasm 可以从 C# 等高级语言生成。

5afaf854ac42d08454aacb3186016ef1.png

Blazor 不需要在客户端上安装 .NET 即可通过 WebAssembly 运行。

支持的浏览器

浏览器最低版本
Android browser67
Chrome57
Chrome for Android74
Edge16
Firefox52
Firefox for Android66
iOS Safari11
Opera44
Opera mobile46
Safari11
Samsung Internet7.2

数据来自 CanIUse.com[3]

Blazor 托管模型

Blazor 目前有两种托管模型, Blazor Server 和 Blazor Web Assembly。服务端托管于 2019 年 9 月发布,Web Assembly 于 2020 年 5 月正式发布。

Blazor Web Assembly

b2d4c766ed8cd3390b978c6d79c1f03b.png


优点

Web Assembly 在客户端的浏览器内部运行,因此可以部署为静态文件。尽管如此,由于浏览器安全限制,Blazor Wasm 应用程序不会直接从本地文件系统运行。

Blazor Wasm 可以离线工作。当与服务器的网络连接丢失时,客户端应用程序可以继续运行(显然它将无法与服务器通信以检索新数据)。

它还可以很容易地作为渐进式 Web 应用程序[4]运行,这意味着客户可以选择将我们的应用程序安装到他们的设备上,并在需要时运行它,而无需任何网络访问。

在客户端机器上运行代码,这意味着服务器负载显著降低。

缺点

blazor.webassembly.js文件用于引导客户端应用程序。它会下载所有必需的 .NET DLL 程序集,这使得应用程序的启动时间在您的应用程序第一次运行时比服务器端慢(DLL 然后会由浏览器缓存,从而使后续启动更快)。

Mono 框架用于解释 .NET 中间语言,因此比运行 Blazor Server 慢。计划在未来的版本中进行提前 (Ahead-of-time AOT) 编译。

Blazor Wasm 尚不支持多个线程,因此所有处理都发生在 UI 线程上——尽管对服务器/JavaScript 等的调用是异步发生的,所以不要阻止 UI 的响应。

此外,Blazor Wasm 仅适用于较新的浏览器,对搜索引擎不友好(除非我们启用服务器端预渲染)。

Blazor Server

457f4fd1e3352ff42932ad16bf0ba076.png

优点

Blazor Server 在将 HTML 内容发送到客户端浏览器之前对其进行预渲染。这使它对搜索引擎友好,并且没有可察觉的启动时间。

Blazor Server 应用程序将在较旧的浏览器(例如 Internet Explorer 11)上运行,因为不需要 Web Assembly,只需要 HTML 和 JavaScript。当代码在服务器上执行时,还可以在 Visual Studio 中调试我们的 .NET 代码。

缺点

Blazor Server 为当前客户端设置内存中会话,并使用 SignalR 在服务器上运行的 .NET 和客户端浏览器之间进行通信。对于所有用户,所有内存和 CPU 的使用都会以服务器为代价。这也意味着客户端与首先为其提供服务的服务器绑定,因此无法使用负载均衡。

初始页面被渲染并发送到浏览器后,blazor.server.js 文件将 hook 浏览器中的任何相关用户交互事件,以便它可以在用户和服务器之间进行通信。例如,如果呈现的元素注册了 @onclick 事件,则 blazor.server.js 将 hook 到其 JavaScript onclick 事件,然后使用其 SignalR 连接将该事件发送到服务器并执行相关的 .NET 代码。

<p>Current count = @CurrentCount
</p>
<button @onclick=IncrementCount>Click me</button>
@code
{private int CurrentCount;public void Increment(){CurrentCount++;}
}

.NET 代码执行完成后,Blazor 将重新渲染页面上的组件,然后将 HTML 的增量包发送回客户端的浏览器,以便它可以更新其显示,而无需重新加载整个页面。

注意: 稍后将深入介绍渲染树。

如果我们运行一个标准的 Blazor 应用程序,单击菜单中的 Counter 链接,然后单击 Click me 按钮,我们可以观察到与服务器之间的 SignalR 数据通信。

  1. 在 Chrome 浏览器中运行应用程序。

  2. 单击应用程序菜单中的 Counter 链接。

  3. 按 F12 打开浏览器的开发者工具。

  4. 在开发人员工具窗口中,单击网络选项卡。

  5. 重新加载页面。

  6. 接下来,单击 WS 选项卡(WebSocket 的缩写)。

  7. 3174dbcf2498cb4589690fc3d2984639.png

  8. 单击 _blazor 项以显示套接字数据。

  9. 单击 Click me 按钮将显示类似于以下内容的网络流量(为便于阅读而进行了删减和格式化)。

DispatchBrowserEvent{"browserRendererId": 0,"eventHandlerId": 3,"eventArgsType": "mouse","eventFieldInfo": null}{"type": "click","detail": 1,"screenX": 338,"screenY": 211,"clientX": 338,"clientY": 109,"button": 0,"buttons": 0,"ctrlKey": false,"shiftKey": false,"altKey": false,"metaKey": false}

相应的来自服务器的响应如下所示:

f5d9560a21d0cad2d0482acea8978329.png

注意: 突出显示的 1 表示增量 HTML,并且是计数器的新值。

如果客户端的浏览器和服务器没有关闭或者它们之间的网络连接很慢,特别是当触发状态更改的事件频繁时,这种往返会提供缓慢的体验。例如,诸如 onmousemove 之类的事件会经常触发。

此外,需要大量 HTML 增量更新的更改也可能很慢。例如,如果我们的页面中有一个 HTML <textarea> 组件,它更新了显示区域以在用户键入时预览用户的输入,那么来自服务器的 delta HTML 将随着添加到 <textarea> 中的每个字符而增加。当输入内容变大时,会导致每次按键都进行较大的网络传输。

与 Blazor Wasm 不同,一旦从浏览器到服务器的连接丢失,应用程序就会无响应。Blazor 将尝试重新建立与服务器的连接,但在成功之前,应用程序会显示消息“正在尝试重新连接到服务器……”并阻止所有鼠标与用户界面的交互。

Blazor Mobile Bindings

2020 年 1 月,Microsoft 宣布了 Blazor Mobile Bindings,这是一个实验性项目,允许开发人员结合使用 Blazor 和 Xamarin.Forms (XAML) 的 Razor 变体来构建本机移动应用程序。

你可以在这里[5]找到官方公告。

安装 Blazor

服务器端 Blazor 和 Blazor WebAssembly 现在都作为 .NET Core 3.2.0 的一部分发布。安装 Blazor 现在就像安装 Visual Studio 16.6 或更高版本一样简单!您可以通过此链接[6]下载最新版本的 Visual Studio。

安装时,请确保在 Workloads 选项卡下选择选项 ASP.NET 和 Web 开发

50c719b35ea7b2210b9e4270960b7198.png

创建项目

  • 打开 Visual Studio。

  • 单击创建新项目

  • 在搜索框中键入 Blazor。

  • 选择 Blazor WebAssembly 应用

  • 点击下一步

  • 输入项目名称,例如 MyFirstBlazorApp

  • 点击下一步

  • 选中 ASP.NET Core 托管复选框。

  • 单击创建

创建页面

在 Blazor 中,页面是可以通过 URL 访问的顶级视图。在本练习中,我们将从头开始重新创建 Counter.razor 页面。

  • 在解决方案资源管理器窗口中,展开 MyFirstBlazorApp.Client 项目。

  • 展开 Pages 文件夹。

  • 右键单击 ·Counter.razor· 并将其删除。

  • 右键单击Pages 文件夹。

  • 选择 添加->Razor 页面 并创建一个名为 Counter.razor 的新页面。如果您收到“脚手架”错误,您可以选择另一种文件格式并为其指定 .razor 文件扩展名。

Razor 页面是一个独立的视图。我们可以包含 HTML 和 Razor 视图标记,以及事件等所需的任何 C# 方法。使用以下内容启动新的 Razor 页面。

@page "/counter"
<h1>Counter</h1>
<p>The counter value is @currentCount</p>
@code {private int currentCount= 42;
}

第一行标识呈现此页面内容所需的 URL。路由部分将介绍更高级的路由技术。

接下来是一些标准的 HTML,一个带有页面标题的 H1 和一个带有一些内容的段落。就像使用标准 ASP.NET Razor 页面一样,可以通过使用 @ 符号对其进行转义来插入可编程内容。在本示例中,我们将显示 currentCount 私有成员的值。

最后,声明页面的 @code 节。这是我们编写属性/方法、事件处理程序或其他任何我们需要的代码的地方。这里我们声明了 currentCount 私有成员和设置它的初始值。运行应用程序,单击页面左侧的 Counter 链接,您应该会看到如下内容:

908bba55a93eda2bc477ea7bf3b4fc76.png

与页面交互

到目前为止,我们已经绑定了页面的私有成员,以便在呈现 Razor 视图时将其值作为 HTML 输出。接下来,我们将更新该值作为对用户操作的响应。

更改 razor 视图以包含以下按钮标记。

<button class="btn btn-primary" @onclick=IncrementCount>Increment counter</button>

这将添加一个 HTML 按钮并使用一些 Bootstrap 样式使其看起来更漂亮。它还将其 onclick 事件设置为执行名为 IncrementCounter 的方法。方法实现非常简单,放在 @code 节。

@page "/counter"
<h1>Counter</h1>
<p>The counter value is @currentCount</p>
<button class="btn btn-primary" @onclick=IncrementCounter>Increment counter</button>
@code {private int currentCount = 42;private void IncrementCounter(){currentCount++;}
}

现在再次运行应用程序,导航到 Counter 页面,然后单击按钮查看页面更新的值。

73a6e7692edaba93938f0f8b661207e9.gif

参考资料

[1]

Blazor 源代码: https://dotnetfoundation.org/

[2]

.NET 基金会: https://dotnetfoundation.org/

[3]

CanIUse.com: https://caniuse.com/#search=wasm

[4]

渐进式 Web 应用程序: https://web.dev/progressive-web-apps/

[5]

这里: https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/

[6]

此链接: https://visualstudio.microsoft.com/vs/

478f2a99729f2c19091c20630e2735cf.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jquery特效(1)—点击展示与隐藏全文

下班了~~~我把今天整理的一个jquery小特效发一下&#xff0c;个人觉得比较简单&#xff0c;嗖嗖的就写出来了~~~ 下面先来看最终的动态效果&#xff1a; 一、来看一下主体框架程序&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8&quo…

.NET Core中使用结果过滤器ResultFilter统一结果返回封装

介绍实现需要继承IResultFilter或者 IAsyncResultFilter。为了方便开发,简化代码,也为了与前端方便对接,需要对接口服务返回结果进行统一处理定义统一返回的结果类我们需要定义一个统一返回结果泛型类ApiResultpublic class ApiResult<T>{public int Code { get; set; }p…

UML 绘图关系

1 继承 子类继承父类2 实现实现类实现接口3 依赖 &#xff08;偶然、临时、比较弱关联&#xff09;类 A 使用了类 B&#xff0c;如果类 B 产生变化将会影响类A4 关联&#xff08;长期的、平等的、双向的、强依赖关系&#xff09;强依赖关系。5 聚合关系&#xff08;关联关系特例…

linux下网口监控软件_超赞的!Aibaba技术官分享高性能Linux服务器解读笔记

一个运行缓慢的应用程序有时会让人抓狂&#xff0c;此时需要在问题诊断的基础上进行性能调整。随着虚拟化、云计算时代的来临&#xff0c;Linux得到迅猛发展&#xff0c;在服务器领域已经占据半壁江山&#xff0c;而基于Linux的运维也面临新的挑战:面对越来越复杂的业务&#x…

Jwt Token 的刷新机制设计

Jwt Token 的刷新机制设计Intro前面的文章我们介绍了如何实现一个简单的 Jwt Server&#xff0c;可以实现一个简单 Jwt 服务&#xff0c;但是使用 Jwt token 会有一个缺点就是 token 一旦颁发就不能够进行作废&#xff0c;所以通常 jwt token 的有效期一般会比较短&#xff0c;…

辨别真假数据科学家必备手册:深度学习45个基础问题(附答案)

简介 早在2009年&#xff0c;深度学习还只是一个新兴领域&#xff0c;只有少数人认为它是一个多产的研究方向。今天&#xff0c;深度学习正在被用来开发那些过去被认为是不可能完成的应用。 语音识别&#xff0c;图像识别&#xff0c;数据中的模式识别&#xff0c;照片中的对象…

redis总结笔记

为什么80%的码农都做不了架构师&#xff1f;>>> 1、Redis的介绍和安装部署 NOSQL 》 Not Only SQL NOSQL以key-value形式存储 特点:非关系型、分布式、开源的、水平可扩展 NOSQL: 数据高并发读写 对海量数据的高效率存储和访问 对数据的搞可扩展性和高可用性 Redi…

go kegg_GO,KEGG富集分析工具——DAVID

DAVID(https://david.ncifcrf.gov/home.jsp)是一个生物信息数据库&#xff0c;整合了生物学数据和分析工具&#xff0c;为大规模的基因或蛋白列表(成百上千个基因ID或者蛋白ID列表)提供系统综合的生物功能注释信息&#xff0c;帮助用户从中提取生物学信息。DAVID目前的工具可以…

更轻易地实现 Jwt Token

更轻易地实现一个 Jwt ServerIntro最近在多个项目中都有用到 Jwt Token 认证&#xff0c;就想着把之前项目里 Jwt Token 的使用封装一下&#xff0c;以便于之后集成起来更加地方便&#xff0c;不用再拷贝代码了JWTJWT 是 JSON Web Token 的缩写&#xff0c;是目前最流行的基于 …

android之实现各个组件点击事件处理

android之实现各个组件点击事件处理&#xff1a;注意&#xff1a;&#xff08;TextView这个组件要点击产生效果的话&#xff0c;要设置&#xff0c;android:clickable"true"这个属性&#xff09;布局&#xff1a;layout/activity_main.xml<LinearLayout xmlns:and…

Android开发最佳实践《IT蓝豹》

Android开发最佳实践 移动开发Android经验分享应用GoogleMaterial Design摘要&#xff1a;前 段时间&#xff0c;Google公布了Android开发最佳实践的一系列课程&#xff0c;涉及到一些平时开发过程中应该保持的良好习惯以及如何使用最新的Android Design Support Library来快速…

.NET MAUI 已在塔架就位 ,4月份发布RC

最美人间三月天&#xff0c;春光不负赶路人。在充满无限希望的明媚春天里&#xff0c;一路风雨兼程的.NET 团队正奋力实现新的突破。根据计划&#xff0c;新一代移动开发平台MAUI 将于4月份 发布RC。目前&#xff0c;MAUI的测试工作和火箭发射前各项准备工作在github 上按计划有…

如何把照片正面变成反面_没有锁边机如何做衣服(五种方法)

这么多年一直没有锁边机&#xff0c;但是也做了很多衣服&#xff0c;今天给大家分享一些我曾经用过的方法。来去缝来去缝适合缝制轻薄面料&#xff0c;如雪纺、真丝、欧根纱等。反反相对&#xff0c;缝份0.5厘米把缝份剪掉0.2厘米翻过来使正面相对&#xff0c;留0.5厘米的缝份车…

linux线程池资料

2019独角兽企业重金招聘Python工程师标准>>> http://www.360doc.com/content/13/0728/13/13308646_303116654.shtml http://blog.csdn.net/turkeyzhou/article/details/8755976 http://blog.csdn.net/zhoubl668/article/details/8927090 http://blog.csdn.net/zypue…

Xamarin效果第二篇之公众号App

前面简单摸索一下Xamarin然后简单做了一个时间轴;这不这几天再次基于Xamarin实现了一下公众号App;我也就是瞎折腾,闲话不多扯,上效果:主Page直接用TabbedPage(类似WPF中的TabControl)然后后台添加内容Page:”互动“页使用CollectionView和模板选择器&#xff1a;"发表&quo…

K8S原来如此简单(一)K8S核心组件与基本原理

k8s视频课程K8S核心组件与工作原理k8s官方文档&#xff1a;https://kubernetes.io/zh/docs/home/前提掌握容器技术&#xff1a;Docker&#xff0c;Containerd等K8S优势使用简单&#xff0c;少量人/小团队可以轻松维护大型分布式系统全面拥抱微服务架构&#xff0c;快速迭代&…

docker supervisor管理进程

Supervisor管理进程Docker容器在启动的时候开启单个进程&#xff0c;比如&#xff0c;一个ssh或者apache的daemon服务。但我们经常需要在一个机器上开启多个服务&#xff0c;这可以有很多方法&#xff0c;最简单的就是把多个启动命名放到一个启动脚本里面&#xff0c;启动的时候…

理解Linux系统中的load average

一、什么是load average&#xff1f;linux系统中的Load对当前CPU工作量的度量 (WikiPedia: the system load is a measure of the amount of work that a computer system is doing)。也有简单的说是进程队列的长度。Load Average 就是一段时间 (1 分钟、5分钟、15分钟) 内平均…

【贯穿】.NET6结合Docker傻瓜式实现容器编排

常规开发部署的痛点一个项目的开发上线有很多纷繁复杂的问题&#xff0c;例如&#xff1a;操作系统运行环境以及各种应用配置、集群环境搭建等等。特别是各种版本的迭代导致的不兼容&#xff0c;这些对于曾经的架构师而言也十分苦恼。而Docker的出现实现了从“蚂蚁搬家”到“乾…

bootstrapt 表格自适应_一起聊B端设计 - 如何设计表格?

一、 数据查看让我们先来回顾一下表格的基本构成&#xff0c;最上面的为表头&#xff0c;横为行&#xff0c;纵为列&#xff0c;内容区每一组展示数据区域为单元格。 表格的设计&#xff0c;虽然看似简单&#xff0c;但是作为用户最常用的组件之一&#xff0c;我们需要对视觉和…