Web开发

首页 » 常识 » 诊断 » WEB前端框架的新选择Blazor
TUhjnbcbe - 2023/5/4 21:50:00

随着前后端分离模式的流行,目前前端开发三大主流框架React、Vue、Angular占据了WEB开发的主要份额,jQuery在新项目上使用的几乎很少了。今天我们要介绍的是Blazor,一种使用.NET生成交互式客户端WebUI的框架。

web

什么是Blazor

Blazor是一个开放源代码和跨平台的WebUI框架,使用.NET代替JavaScript来创建丰富的交互式UI。Blazor支持2种运行模式:BlazorServer模式:应用在ASP.NETCore应用服务器上运行,并且通过SignalR(双向通讯)进行用户交互处理;BlazorWebAssembly模式:Razor和HTML最终会编译成WebAssembly运行在支WebAssembly的浏览器上。

Blazor的优势

使用WebAssembly技术提供更优的性能使用C#代替JavaScript来编写代码,可以利用现有的.NET库生态系统,对.net开发者比较友好不需要重新学习React、Vue、Angular等框架。BlazorWebAssembly使用SignalR可以很方便的在浏览器和服务器之间实现双向通讯,服务端可以端直接向客户端推送数据,避免了传统前后端分离的Web应用中大量使用ajax轮询请求。现有Blazor组件

和React、Vue、Angula三大框架相比,Blazor今年才发布3.2.0正式版,BlazorUI组件还不是很多,目前有传统的.net控件厂商提供的商业组件,如大名鼎鼎的Telerik、DevExpress估计很多.net的小伙伴们都用过。另外开源的组件有:AntDesignBlazor(AntDesign大家应该很熟悉蚂蚁金服UI)、BlazorStrap(基于Bootstrap4)、Blazui(基于ElementUICSS)、BlazorExtensions、bUnit、MatBlazor、Blazorise、Blazored。

Blazor起步

在VS新建一个Blazor应用,首先我们我们在新建项目模板中选择Blazor应用,然后选择BlazorWebAssemblyApp客户端

Blazor项目模板

项目新建成功后,我们打开工程看到代码结构如下:

Blazor工程结构

我们看到Pages目录放的是视图,入口页面index.html,看着这些是不是跟VUE工程的目录很相似,包括路由双向绑定等功能。

上面示例里面的Currentcount绑定了

currentCount,点击“Clickme”按钮将自动加1,这些跟VUE还是非常相似的。不过code跟视图放一起看着有点不爽,有点像React的风格,不像VUE将模板单独抽离成.vue文件。最后我们运行看下默认示例的效果,效果有点丑当然我们可以使用AntDesignBlazor、BlazorStrap、Blazui等开源Blazor组件后效果会很好多。

BlazorDemo
1
查看完整版本: WEB前端框架的新选择Blazor