使用Blazor开发内部后台(一):认识Blazor

转载技术社区中一位朋友最新的文章,介绍自己为公司的 WebForm 遗留系统使用 Blazor 重写前端 UI 的经历。


前言

啊,又好久没写文章了,这一年一直在接触新的领域,扩展了一下技术面,学了很多新东西。

前阵子发现公司内部有个后台管理系统,因为历史悠久,还是Webform做的,不管是UI风格还是代码设计,都已经落后于时代。因为项目陈旧,所以后续新增或修改功能的人,也往往抱着多一事不如少一事的心态添加各种“补丁”。久而久之,后来的人不再乐意维护这样的系统;而落后于时代的UI风格,也让使用者觉得整个系统看上去很“Low”;对接触过市面上第三方后台系统的公司管理者来说,自家的后台系统更显得老气横秋,需要一次“新生”。

当大家对一个系统都产生不满的时候,就可以考虑重构或者重写它了。这一切的开始,自然是考虑技术选型。

最初我考虑使用比较常见的前后端分离模式,后端自然是使用ASP.NET Core + EF Core,前端使用公司内部已经比较成熟的基于Ant-Design-Vue封装的组件模板。但是这样的缺陷也很明显,那就是遇到迭代需求,要么需要前端的人员参与,要么后端人员起码要熟练运用JavaScript和模板。而后台管理系统的功能迭代,往往来得比较突兀:一方面需求方是内部的使用者,使用频率不固定;另一方面每一次的迭代其实对内来说并没有产生运营价值。因此对后台管理系统的要求是,尽可能单人就能较快的完成前后端工作。

那么有读者可能会嘲笑了:干嘛非要前后端分离?后台直接ASP .NET Core MVC后端渲染好了嘛!当然可以。不过一方面是考虑到MVC组件化开发,我们没有什么实践经验;另一方面是后台系统的页面既可能出现非常多的元素,又要简洁易用,前后端分离可以将后端变得非常轻量(基本只需CRUD),而由前端分担偏重的逻辑。如果回到后端渲染的模式,那么很可能过了几年之后,又变成了今天Webform的情况:例如一个复杂页面,在后端Page对象里写了一大堆的变量来维护页面控件的状态……

现在问题变成了:有没有一个Web UI框架,可以很好地和ASP.NET Core后端搭配呢?我的目光自然放到了年轻的Blazor身上。

Blazor发行才两年,最初我并没有重视它。当然,最大的原因是彼时我未有与之关联的实际需求,另外也包括——

  • 最早Blazor只发行了Blazor Server,Client Side姗姗来迟以至于我误认为尚处于“全民测试阶段”

  • 鉴于Webform、MVC,以及曾经的Silverlight,我对Blazor在前端领域的发展缺乏信心

  • Blazor WebAssembly是基于WebAssembly的UI框架先行者,最先吃螃蟹的人,往往也会因为过于超前的理念最终走向沉寂

  • Blazor还太年轻,生态沉淀远不如前端三大框架

但现在是2021年了,当我真正尝试了解它时,它带给了我非常大的——惊喜。同时,Blazor开源社区也给了我很大的帮助。最大的助力,来自于我前同事 

@JamesYeung

 的开源项目:Ant Design Blazor 。在我花了两个星期的时间,写出旧系统部分页面的demo之后,我深感以前自己对Blazor太缺乏了解和信任。我觉得有必要将我曾经的误解,以及现在的心得体会,写入“DotNet应用”系列文章,以供读者参考和交流。

什么是Blazor

官方文档已经将Blazor应用放在了“C位”。由于官方文档的介绍十分贴切,这里请容许我原封不动地搬运过来:

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架:
使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。
共享使用 .NET 编写的服务器端和客户端应用逻辑。
将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。
与新式托管平台(如 Docker)集成。
第一个就是“我”——Blazor!

简而言之,.NET开发者可以用C#来写单独的前端了。

那么Blazor是一蹴而就的吗?显然非也。Blazor的诞生,受益于Web Assembly和近些年.NET Core技术的发展;Blazor使用的Razor语法,则是在MVC时代就已经发布的标记语法;Blazor的组件开发思想,则早已在前端成为主流的开发模式……总而言之,Blazor既是一个基于Web Assembly、走在技术前沿的Web UI框架,也是一个借鉴和总结了以往成熟开发经验的框架。

Blazor和前端三大框架的关系

说到Blazor,必然会有人拿它跟现有广泛应用的前端三大JS框架(React/Vue/Angular)对比,我也阐述一下个人观点。

首先,Blazor在框架设计上并没有闭门造车。在使用Blazor的过程中,可以充分感受到Blazor和当前主流前端技术的联系:

  • 组件式开发的范式,推荐以组件的形式作为页面基本的UI元素

  • 在html模板中,部分C#关键词充当了类似“指令”的角色。例如@if和ng-if, @for和vue-for等等

  • html/css/code(JS/C#)的分离和组合。Blazor里每个页面既可以拆分成MyPage.razor(html模板文件),MyPage.razor.cs(C#代码文件)和MyPage.razor.css(样式文件)三部分,也可以将三者统一写到MyPage.razor文件里。

  • 依赖注入。有过Angular开发经验的开发者,应该会对此深有体会。

其次,Blazor保留了C#和JS之间的互操作性。也就是说,Blazor既理所当然地利用了.NET现有的生态,也兼容更加繁荣的JS生态。这样开放的思路,给了Blazor开源社区非常大的发展空间,比如很多早先由原生JS编写的图表开源项目,可以以相对较低的成本迁移到Blazor上来;又比如可以使用Blazor封装三大框架已有的组件,或者原生组件(播放器等)。

因此,Blazor和前端三大框架之间,的确有相当一部分的功能其实可以互相取代。然而Blazor的目的,不是为了取代三大框架;从现状来看,甚至连竞争的地位都谈不上。Blazor能吸引的最主要人群,是.NET开发者,它给了开发者完全以C#作为主要语言实现全栈开发的机会。尤其是,前后端可以共享包含数据类型和逻辑模块的C#代码,这一优势只有C#全栈开发者才能深切体会到。例如,对于后端出身的C#开发者,在前后端分离的环境下,以往更偏爱设计模式上与后端更相近的Angular;如今Blazor已逐渐成熟,可以“横刀夺爱”了。

如上所说,Blazor并不能让三大框架的绝大多数JS开发者产生兴趣,更无法与当下繁荣的JS生态竞争。另外,在IE及其他一些老旧版本的浏览器仍未被完全淘汰的当下,为了保证页面的普适和兼容,Blazor自然不会被大部分人看重。但作为基于Web Assembly的前端框架,它依然还是特别的:wasm的普及和发展,一定会利及Blazor,使其在未来有更大的发展空间。这里举一个即将实现的例子:由于wasm可以在非Web环境下运行,那么Blazor将来也可以用于开发运行在非Web环境下的UI程序,这在官方的计划中已经提及——Blazor Web Assembly MAUI。

Blazor会是另一个Silverlight吗

这可能是一部分人最关心的问题。微软曾经发布了不少“愿景很好”的技术栈,但最终有一部分随着时代走向了沉寂。如今稚嫩的Blazor,是否能走出一条康庄大道?还是说会成为另一个Silverlight,过些年之后就变成了历史?

如前言所说,我恰是从这样的疑虑走出来的。现在,我将个人的判断写在这里以供读者参考:

  • 在可预期的未来,Blazor将是微软主打的Web UI框架

  • Blazor完全借鉴和遵循当下前端流行的设计模式和思想,没有闭门造车

  • Blazor开源社区的活跃度在逐步提高,除了组件库之外,还有越来越多的功能库

  • Blazor的根基在于Web Assembly,wasm将是未来浏览器的核心规范,它更高效更安全更开放,且更标准(无版本,特性可测试、向后兼容)

  • Blazor在性能、可靠和开发效率上,是一流的框架。而近期在.NET 6到来后,AOT和Hot Reload将进一步提升Blazor程序的运行性能和开发体验

鉴于前后端分离的流行程度,以及wasm的发展空间,我个人的结论是:Blazor不会成为另一个Silverlight。相反地,它更可能成为.NET生态在前端开发领域的大本营。

为什么要用Blazor做后台

首先要明确,这个问题主要针对的是.NET技术栈的公司或个人。

从技术选择的角度来说,我认为前后端分离自然地隔离了逻辑和表现,对日后的维护更加友好。以前对.NET技术栈的公司来说,前后端分离需要开发者掌握C#和JS,同时数据类型和逻辑模块经常会出现两种语言上的重复,这些对自用的后台来说都是不必要的成本;现在使用Blazor已经解决了这个问题。而且公司内部的后台通常不需要兼容老旧浏览器,恰恰避开了wasm的业务弱项,反倒为其更好的性能表现提供了舞台。

从设计需求的角度来说,我个人总结了后台系统页面的特点,基于Blazor开源组件项目,可以天然地满足:

  1. 简洁。页面不过分追求华丽,以清晰的布局为重

  2. 一致。所有页面呈现的UI风格应当一致

  3. 效率。尽可能复用组件和代码搭建页面,实现快速迭代

  4. 平衡。既易于使用,又尽可能防止敏感数据误操作

  5. 及时。有较好的页面加载速度,对等待操作有清楚及时的反馈

总而言之,我的结论就是:Blazor应当是.NET公司开发或重写内部后台系统的首选框架!

结语

当然,个人肤浅之见,难免会有读者质疑。在接下来的系列文章里,我将逐步介绍Blazor组件、Ant-Design-Blazor开源组件,以及做一个demo项目的过程、心得和一些重要细节。

希望这个系列,能够让更多的.NET开发者丰富对Blazor的认识,降低学习Blazor的门槛;让有类似需求的开发者们,能够打消疑虑,增加应用Blazor的信心,融入Blazor的开源社区和发展事业!祝事业顺利,让我们下一篇文章再会!

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

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

相关文章

全球科技界最鼓舞人心领袖揭晓!马斯克第一,马云第五

全世界只有3.14 % 的人关注了青少年数学之旅谁是科技界最鼓舞人心的领袖?最近技术招聘网站Hired对3600多名技术人员进行了调查,最终马斯克击败贝佐斯、纳德拉、扎克伯格等人成功当选,马云排名第五。SpaceX被评为全球私人公司中第二大最受欢迎…

设置mysql表myisam_mysql myisam 优化设置设置

mysql myisam 优化设置设置更新时间:2010年03月16日 21:28:24 作者:mysql myisam 优化设置设置,需要的朋友可以参考下。myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_insert_buffer_sizeconcurrent_ins…

NET问答: 为什么 String.IndexOf 在 .net5 和 netcore3 中返回值不一样?

咨询区 Farhad Zamani:当我在 .NET Core 3.1 中运行下面代码的时候,程序会返回 6。class Program{static void Main(string[] args){// .NET Core 3.1string s "Hello\r\nworld!";int idx s.IndexOf("\n");Console.WriteLine(idx)…

vSpere虚拟网卡介绍

在一个物理网络拓扑中,通常都是路由器-交换机-PC机的连接,不同的服务器和PC机,通过交换机的连接而相互连通。在VMwarevSphere架构下服务器会虚拟出交换机来供ESXHost虚拟机来使用,虚拟交换机有两种,vSwitch虚拟交换机和…

快速掌握MATLAB应用,只要从这一步开始!

有人说,“MATLAB除了不会生孩子,什么都会。”矩阵运算、数据可视化、GUI(用户界面)设计、甚至是连接其他编程语言,MATLAB都能轻松实现!那么,MATLAB到底有多厉害?MATLAB拥有丰富的算法…

如何查看 .NET Core 3.1 源代码

背景在 .NET 走向开源后,我们可以方便的查看 .NET 内部的实现方式,学习和寻找问题,甚至参与到 .NET 的开发中。前段时间,同事需要查看 C# 的 Task 类 (System.Threading.Tasks) 的一些实现和内部的原理,想找 Task 类的…

装×失败的后果。。。 | 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅传说中的“虎口夺食”摄像头留下了垃圾桶欺负我的证据用力过猛扯淡还是扯底裤装失败二进洗脚盆玻璃太干净了,注意左边这个傻子哎呀,这个傻子真的是傻中奖的感觉还是要量力而行滑的还真溜。。。电动车此刻注入了灵…

.net core 下的HttpClient、WebClient性能测试

有许多服务需要拉取api接口数据,因此后端开发少不了对Http访问请求进行封装,最主要的应用方式莫过于采用WebClient进行封装,简单易用;而.net core微软官方推荐的是HttpClient和HttpClientFactory,到底哪个性能更加强劲…

北京一公交车发生爆炸 疑为乘客携带药品起反应

勘察人员从公交车里取出可疑爆炸物。薛珺摄点击查看其它图片昨日下午,一辆850路公交车行驶在阜成路时发生爆炸。5名乘客经检查均无大碍。   警方怀疑是乘客所携类似血清的药品引发化学反应所致。   事故现场在八里庄桥上,昨日下午5时许,一…

给定两个二叉树T和S,判断S是否为T的子树

2019独角兽企业重金招聘Python工程师标准>>> #include<iostream> #include <stdlib.h> using namespace std; struct node{int data;node* leftchild;node* rightchild; };bool isSubtree(node* root1,node* root2){if(root2NULL)return true;if(root1N…

ABP Framework 为什么好上手,不好深入?探讨最佳学习姿势!

离写上一篇经验总结 ABP Framework 研习社经验总结&#xff08;6.28-7.2&#xff09;&#xff0c;已经过去两周。ABP Framework 研习社&#xff08;QQ群&#xff1a;726299208&#xff09; 最近两周&#xff0c;又迎来了很多新伙伴&#xff0c;成员数量上升至300。从大家的关注…

见识过世界的强大,才能拥有掌握世界的力量

▲ 点击查看在假期的时候&#xff0c;很多家长会选择带孩子一起出去旅游玩耍。在这个过程当中&#xff0c;家长们可能经常都会被孩子各种稀奇古怪的问题给包围住。“这个车为什么能跑的那么快&#xff1f;“这棵树是什么树&#xff0c;为什么它长得比其他树要高&#xff1f;”…

FastTunnel - 打造人人都能搭建的内网穿透工具

FastTunnel是用.net core开发的一款跨平台内网穿透工具&#xff0c;它可以实现将内网服务暴露到公网供自己或任何人访问。与其他穿透工具不同的是&#xff1a;FastTunnel项目致力于打造一个易于扩展、易于维护的内网穿透框架&#xff0c;任何人都可以基于该框架二次开发&#x…

一招搞定高等数学! | 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅瓜皮儿十三妹没品图一张图让你们看看鲨鱼的血液循环系统到底有多复杂普外科曾医生小猪佩奇其实是“巨猪佩奇”小猪佩奇真实身高为7.1英尺也就是2.16米但她在家还不是最高的一只浪鸭水陆两栖的自行车它出现在1932年的巴黎街头因为加装了…

WPF 表格控件 ReoGrid 的简单使用

WPF 表格控件 ReoGrid 的简单使用目录一、概述二、安装三、添加控件四、加载 Excel五、属性设置六、支持触摸滚动七、其它操作1、显示和隐藏列2、显示特定字体八、资源链接独立观察员 2021 年 7 月 9 日一、概述ReoGrid 是一个开源的表格控件库&#xff0c;支持 Winform 和 WPF…

史上最牛空姐,从飞机上掉下愣是没摔死

全世界只有3.14 % 的人关注了青少年数学之旅珠穆朗玛峰最新的测量高度为8844米&#xff0c;人是血肉之躯&#xff0c;一旦从这么高的地方掉下来&#xff0c;别说生还了&#xff0c;能有个全尸就不错了。但是&#xff0c;历史上却有这么以为超级幸运的女人&#xff0c;她从比珠穆…

nginx对websocket的支持及uliweb chatroom的测试

2019独角兽企业重金招聘Python工程师标准>>> 在尝试在uliweb中使用gevent开发聊天室时&#xff0c;已经在网上搜到nginx是支持websocket的代理的&#xff0c;不过应该不支持集群模式。不过当时没有试过&#xff0c;今天试了一下&#xff0c;在普通的反向代理是没有问…

为什么祖国没有农历生日? | 今日最佳

世界只有3.14 % 的人关注了青少年数学之旅假期计划路线所以为什么没有农历生日所以这个到底是什么字&#xff1f;身体不适&#xff0c;去了趟医院那医生怎么说&#xff1f;......你还敢说养我吗&#xff1f;&#xff08;图源网络&#xff0c;侵权删&#xff09;

ios中amplify配置configure_Nginx源码编译安装及配置文件初步学习

通过源码编译安装。nginx.org #官网地址 # 安装过程 wget http://nginx.org/download/nginx-1.18.0.tar.gz -P /usr/src # tar文件用tar命令解压 tar -zxvf nginx-1.18.0.tar.gz关于wget的-P参数&#xff0c;manual中的解释是prefix&#xff0c;Set directory prefix …

演示: 动态NAT完成网络地址翻译

演示&#xff1a; 动态NAT完成网络地址翻译技术交流与答疑请加入群&#xff1a;1952289演示目标&#xff1a;使用动态NAT完成对私有网络的地址翻译。演示环境&#xff1a;如下图9.63所示。演示背景&#xff1a;该演示环境保持PAT演示环境的网络基础配置&#xff0c;然后使用动态…