隐藏

《进击吧!Blazor!》系列入门教程 第一章 1.初识 Blazor

发布:2022/1/7 13:39:33作者:管理员 来源:本站 浏览次数:630

    《进击吧!Blazor!》是本人与张善友老师合作的Blazor零基础入门教程视频,此教程能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。
    视频地址:https://space.bilibili.com/483888821/channel/detail?cid=151273
    Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用,采用 C# 代替 JavaScript 来编写前端代码
    本系列文章基于《进击吧!Blazor!》编写,升级.Net5,但因篇幅有限,省略了部分代码,完整示例代码:https://github.com/TimChen44/Blazor-ToDo

    作者:陈超超
    Ant Design Blazor 项目贡献者,拥有十多年从业经验,长期基于.Net技术栈进行架构与开发产品的工作,现就职于正泰集团。
    邮箱:timchen@live.com

    欢迎各位读者有任何问题联系我,我们共同进步。

Blazor是什么

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架。

第一次看到这句话的感受是不是What?.NET和Web UI啥时候在一起了?
在这里插入图片描述
现状

我们暂且先把Blazor放一边,一起看看目前Web开发的技术栈。


上图是目前最常用的前后端分离开发模式下所使用的技术栈和配备的人员结构。

我们大家天天按照这个模式进行着各类项目开发,不知道大家在工作中有没有碰到一下面的问题。

    技术栈复杂

做一个项目前后端需要用到两套完全不同的语言,两套完全不同的框架,不管是对团队还是对个人无形中增加了技术复杂度和成本。

    无法重用应用逻辑和代码

表单验证,DTO(数据传输对象)等代码需要前端和后端分别写一份,增加重复劳动,当一端做了修改后,如另一端未能及时更新,一个新鲜的BUG就出现了。

    资源生态独立不能共享

当下每一个项目下面都摆着一堆的”轮子“(库),充分利用第三方资源对开发价值不可估量,但是因为语言问题,前后端的生态资源不能共享。

    增加协作成本

大家回忆一下,前后端遇到问题时经常热(hu)情(xiang)交(si)流(bi)的场景历历在目,“接口返回格式错了”,“请求数据缺字段了”,“流程不是这样的”…………总是有事前没有想到的问题

如果遇上 “一个不懂后端的前端” vs “一个不懂前端的后端”,简直就是灾难。

    人员利用率低

每个项目前后端开发量是不平衡的,时常旱涝不定,即影响项目进度,又影响员工心态平衡。
Blazor是什么,由能带来什么

首先Blazor是微软最新推出的Web UI框架,目前.Net5中包含的版本已是它第二个可以商用的版本,它的出现就很好的解决上面产生的问题,下面是他部分特性:
语言优秀

Blazor 使用 C# 代替 JavaScript 来编写代码,因此我们可以使用静态类型检查、泛型、Linq、async/await、以及美味的语法糖等所有C#语言的优秀特性。

看到这里,估计不少读者会有疑问,浏览器上能运行C#行吗?答案是:行!

为了解答这个问题,这里就要介绍Blazor的两种模式:Blazor WebAssembly和Blazor Server。
Blazor WebAssembly

这是个单页应用 (SPA) 框架,使用WebAssembly技术实现无插件的方式在 Web 浏览器内运行 .NET 代码,通过 JavaScript访问浏览器的完整功能。

    关于WebAssembly介绍推荐阅读这篇文章:https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/


Blazor Server

将Blazor组件托管在ASP.NET Core服务器上,通过SignalR把UI事件从浏览器发送到服务器,并由服务器处理完后将已呈现的组件发送回的客户端

看似这个模式和当年的ASP.Net Web Forms有些相似,其实他们有着本质的区别
    Web Forms    效果    Blazor Server    效果
向服务器发送数据    整页状态    数据量大    UI 事件    数据量小
服务器返回数据    整页结果    数据量大    已更新的组件    数据量小
通讯方式    Http    低效    WebSocket    高效
数据格式    Html    体积大    二进制    体积小

所以虽然.Net代码托管在服务商执行,但是页面的响应体验非常好。

共享生态

可以使用现有的 .NET 库生态系统。比如EF Core,AutoMapper等优秀的库可以直接使用。
共享代码

现在我们可以在服务器和客户端使用相同的代码编写应用逻辑,所以可以直接共享应用逻辑,比如Dto、验证特性、加密等。
工具完备

在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。
未来

有了Blazor加持的Web开发的技术栈变成下图的模式

在这个模式中我们一起看看有什么优势

    技术统一
    应用逻辑和代码共享
    共享.Net库生态资源
    易于团队协作
    灵活调配人员

次回预告

我将通过一个Hello Blazor示例来体验Blazor项目