图解 .NET 8 中的 Blazor 新特性 - .NET Conf 2023实况直击

2023-11-17 14:06:53 浏览数 (2)

一年一度的.NET Conf 大会在今日凌晨零点开播,我跟Blazor中文社区的很多朋友都熬夜观看了。在开场概括演说之后,Blazor是排在第一个出场的,可见Blazor在新版.Net中的地位依然是重中之重。

上图是开场keynote的演示,全新改版的官方示例项目EShop,它也是贯穿了从开场到云原生工具.NET Aspire介绍时都用到的示例应用。

这个应用已经引入了.NET 8的众多新特性,特别是前端部分引入了Blazor full stack 眼花缭乱的新特性。

出场的依然是两位Blazor负责人,Blazorx项目的开发经理丹尼尔和Blazor之父史蒂夫。

标题虽然跟前几年一样,《使用Blazor构建交互性丰富的WebUI》,但是内容已经与以往的完全不同。

这一次带来了更快的Blazor。还一语双关,更快地构建、构建更快的Web apps。

这个PPT是个动画,意思是把server和client合并在一起了,变成全栈WebUI。并且把Blazor的各大功能重新排位,重点已经不在server和wasm,而是从静态的服务器端渲染、增强导航与路由、流式渲染、单组件/页面的交互性、最后再到运行时自动切换交互性渲染模式。

这些特性下文一一介绍。

静态服务端渲染

抱歉这个PPT忘截了。但是我从网上看到了Steve在另外一个演讲中的PPT,我认为是更能反映出Blazor要做静态服务端渲染的初衷。

图中介绍的是整个Web发展史:

90年代-2005:是服务端渲染HTML的阶段。.Net这边是asp和webforms。感谢Webforms在这个时代就带来了完美的开发与交互体验。

2005-2010 是服务端HTML 与js结合的阶段,主要是利用jQuery实现方便的dom操作。.Net这边还是ASP.NET aspx时代。

2010-2015 是早期客户端渲染,angularjs、knockout等。.NET这边是MVC时代。

2015-2022 是现代客户端渲染阶段,也是单页应用。我们熟悉的react、vue、angular属于这个阶段。而Blazor在2019年发布总算是赶上了末班车。

到了今年,各大前端框架都在做服务端组件,包括最新的react和angular,都不同程度借鉴了blazor server的特性。

交互性

交互性在此前很少提到,只有在Blazor的口号——“使用C#而不是JS来构建交互性WebUI”中有提到,因为此前Blazor默认就是富交互性的。而.NET8引入服务端渲染和更多交互性层次之后,就需要大家去理解了。

前面讲的“静态”渲染,是“交互性”的程度最低的。

从 .NET 8 开始,Blazor从以前的全局交互性变为页面级和组件级交互性。意思就是全局默认是静态的,可以在局部选择交互性渲染方式。目前可选的交互性渲染方式有 Streaming SSR、Blazor Server、Blazor WebAssembly。

Streaming SSR是可以让在一次服务端请求中,让服务端连续返回html。先返回静态的内容,再返回需要查询数据库或其他较慢处理的内容。示例中Steve示范了一个倒计时。在一个下单请求中首先返回Blazor页面静态渲染的html,然后返回不同的数字的html节点,浏览器上的blazor.web.js自动替换掉静态页面中的占位符。

Streaming SSR的优势是能够加速首次渲染。不必等待所有数据都获取之后才返回所有内容。我之前用MVC做过CMS项目,一个页面很多内容都需要查询,响应时间很久。如果用 Streaming SSR,就能马上呈现静态的页面布局了。

增强导航,

能够让页面间的跳转变得像单页面一样。这个特性其实就是之前的pajx。无刷新跳转。只替换有变动的dom节点。但是Blazor的这个是服务端支持的,在页面跳转时,在服务端就计算变化的节点,然后只返回有变化的节点。这样能够节省请求流量、保持大多数的dom。注意事项是需要考虑JS的状态。

静态渲染表单。这是静态渲染重要的服务端交互方式。此前是通过事件来实现模型绑定,而SSR则是通过HTTP请求来做模型绑定。表单验证也变为服务端的,返回的验证信息就是通过上文的Streaming SSR实现。这个特性时静态渲染在一定程度上实现了交互性。

交互性组件就是原有的Blazor Server/Blazor WebAssembly组件。能够灵活地集成到静态渲染页面中,并且能够与增强导航和表单一起工作。

交互性组件最重要的更新,就是实现了自动模式。自动模式可以让组件/页面先使用Server实现交互性,同时后台加载WebAssembly文件,加载完后,自动切换到 WebAssembly。

来个大总结。

最后还有One more thing。就是全新的All in one 模板。把之前的两个Blazor模板和这次的全部功能集成到一个模板中,通过配置选项来根据需求选择需要的渲染模式、示例内容等等。

特别是授权类型这个选项,选择个人授权后,模板中就包含是整个Identity UI,从注册登录到用户管理都在里面了。而且是使用SSR实现类的,对学习SSR的朋友非常有帮助。

另外最新版的VS还支持了Blazor页面脚手架,终于可以跟MVC/Razor Pages一样通过VS点点鼠标就创建一个CRUD页面了!

新增页面

列表页面用了QuickGrid。有我的代码贡献!这下我再也不用担心大家不会写Blazor了!

最后的最后,丹尼尔做了个总结,如果想让已有应用能够使用 .NET 8 中 Blazor 带来的型特性,可以根据这个指引来实施。

1. 如果是已有的 Blazor 应用,那么只需要升级到 .NET 8 即可。

2. 如果是 ASP.NET Core app,可以添加 Blazor 页面。

3. 对于已有的MVC/Razor Pages项目,也可以通过 <component> tag helper 来引入 Blazor 组件。

4. 对于 Minimal APIs/Controllers 项目,还可以返回 RazorComponentResult 来返回 Blazor 页面。

5. 如果 api 还配合了JS前端框架,那么也可以通过 custom element 来引入 Blazor 组件和页面。

这个指引是递进的,适应在不同场景中集成 Blazor。

总得来说,SSR 能够解决前台用户侧的场景,Auto模式能够解决加载慢和网络问题。作为Blazor的老用户,我认为Auto模式是很强的功能,基本上解决了Blazor一直以来被诟病的加载问题和网络问题。但是要注意的是数据请求方式和组件状态的切换。请求方式需要从server的直接访问数据库切换为API调用,这就需要用户实现两套方法。Blazor只自动处理一部分状态的切换,更多的需要用户自己处理。

这两点我已经这最近两个月有所探究,总结了一些可以方面实现的方法和结合两者的布局模板。打算在下个月16号 .NET Conf China 大会给大家分享并带来更多内容。

诚邀赞助

AntDesign Blazor 项目和 Blazor 中文社区预计将会在 12月16日到北京参加 .NET Conf China 大会。届时打算会对 Blazor 和 AntBlazor 项目进行社区推广。

但不论是我们的开源项目、社区还是这次活动,都是为爱发电和非盈利的,如果antblazor与社区对你有所帮助,请赞助支持,以支持我到北京的路费和推广物料费用。

所有费用收支都会在antblazor项目的赞助名单中公开。对于大额捐助,可以在我们的项目网站和今后推广中提供品牌推广。

0 人点赞