Blazor是春天还是寒风里的挣扎

title: Blazor是春天还是寒风里的挣扎
date: '2021-10-25 14:00:00'
toc: true
categories:- Blazor
tags:- Blazor- MASA Blazor#

官方解释Blazor

Blazor允许您使用c#而不是JavaScript构建交互式web UI。Blazor应用由可重用的web UI组件组成，这些组件使用c#、HTML和CSS实现。客户端和服务器代码都是用c#编写的，允许您共享代码和库。 

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

  • 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI。

  • 共享使用 .NET 编写的服务器端和客户端应用逻辑。

  • 将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

  • 与新式托管平台（如 Docker）集成。

使用 .NET 进行客户端 Web 开发可提供以下优势：

  • 使用 C# 代替 JavaScript 来编写代码。

  • 利用现有的 .NET 库生态系统。

  • 在服务器和客户端之间共享应用逻辑。

  • 受益于 .NET 的性能、可靠性和安全性。

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

  • 以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

看到这里有些小伙伴手中的瓜已经要丢出来了，的确有部分是夸大了的，起码VS在三个平台高效工作这事儿，嗯。。。其他的继续吃瓜吧

Blazor Vs MVC

什么是MVC

官方解释：ASP.NET Core MVC 是使用“模型-视图-控制器”设计模式构建 Web 应用和 API 的丰富框架。

圈重点，Blazor是交互式Web UI，而MVC是Web应用和API

什么是交互式Web UI

谷歌、百度转了一圈，没有这个解释，连Wiki也是一脸懵逼。

尝试理解一下吧，交互式Web UI重点在于交互，而Blazor的官方解释是用C#代替JavaScript，那我们看看JavaScript有什么功能，我百度找一段过来：

  1. 嵌入动态文本于HTML页面

  2. 对浏览器事件做出响应

  3. 读写HTML元素

  4. 在数据被提交到服务器之前验证数据

  5. 检测访客的浏览器信息。控制cookies，包括创建和修改等

有这些基础功能，用户不需要在静态页面里跳来跳去了，的确体验会好很多

Blazor有什么优势

提供了一些交互能力，不再是纯粹的静态页，虽然mvc可以使用JavaScript达到同样的效果，但你需要掌握JavaScript，甚至还要再学习jQuery、Angular、Vue等。而Blazor提供的交互能力则是使用C#。

吹是吹完了，但你真的可以100% C#吗？这很难，你会遇到各种问题，比如兼容性、性能等。好了，那我可以不用了吗？等等，下面还有瓜

Blazor Vs 现代前端(Angular、Vue等)

我们从几个方面来对比一下吧

调试

  • Blazor：Vistual Stuidio + F5，VS Code/命令行工具 + dotnet watch

    比WebPack要快很多，跟Vite差不多

    在非复杂场景下Hot Reload是可以的，但奇奇怪怪的问题太多了，前景很好，目前来看还是用Ctrl + F5启动或者用命令行吧

    VS 2022的Ctrl + F5已经支持Hot Reload了

  • 现代前端：Webpack/Vite

全家桶

以Vue为例，Vue全家桶包括Vue Cli、Vue Router、Vuex

Blazor：

  • Cli：dotnet cli

  • Router：Microsoft.AspNetCore.Components.Routing.Router

  • Vuex：Blazor状态管理，区别在于WASM状态保存在浏览器内存中，而Server保存在服务器内存中。而且Blazor状态管理更强大的是借助.Net的能力，原生支持持久化存储、跨线路保存（Server下共享服务器内存）、ASP.NET Core 受保护的浏览器存储（Server独享功能）

组件库

主流的Bootstrap, Ant Design, Material Design等双方都有。但由于现代前端多年的积累，质量上的确有一定差距。

除了丰富程度上，Blazor允许被JavaScript调用加载，并生成Angualr、React等组件。

虽然这看起来跟用C#解决代替JavaScript有点冲突，但融入大环境也是不错的

下图演示的是Blazor提供的inventory-grid Component被React引用的例子(当然也可以给Angular)：

更神奇的是，在React复用的Blazor Component居然也支持Hot Reload。先不说Hot Reload到底如何，单是这个方向其实还是值得期待一下Hot Reload的未来吧。

324f566d4ed62b87c46161c497694b7e.png

不止可以给React提供复用的组件，还可以给WPF

94c8b2d9dda0d978261d2231d4decb39.png



第三方库

举几个前端常用库来比较。

网络：现代前端有axios，Blazor有HttpClient

数据操作：现代前端有Lodash，Blazor有Linq

时间：现代前端有moment.js、Day.js，Blazor有DateTime全家桶

响应式编程：现代前端有rx.js，Blazor有Rx.Net（没有用过，理论上.Net基本都能用，欢迎纠错）

Mock：现代前端有Mock.Js，Blazor有Moq，当然除了mock以外还有端到端的，双方也都有。

对比下来其实.Net反而还有点优势，那就完美吗？当然不是，再说点劣势的部分吧。

Charts：现代前端有ECharts等，Blazor不想说话

虽然目前Blazor的确没有成熟、免费的Charts组件库，但因为Blazor可以与JS交互的能力，调用ECharts也很简单，稍微考验一点点小伙伴的动手能力

富文本编辑器、拖拽。。。

Blazor骂骂咧咧的退出了群聊。。。

包管理

Blazor：NuGet

现代前端：NPM、Yarn

性能

数据不直观，先从.Net Conf 2021上的演示截图看一下：

aec128c5035be8d197b739b05c9c8c8e.png

有量化数据吗？有：

5d50c4ae257983cce1de2bc4196b8e45.png

视频地址：https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4

那AOT可以解千愁吗？也不是。起码应用大小上来说的确也大了不少，但这并不妨碍AOT可以解决特定场景的问题。技术总要选择在适合的场景使用它，而不是盲目的。

a44c92a78cbec2ad91823ece7732798d.png

完了吗

当然没有，其实这样比较对于Blazor是不公平的，因为Blazor站在.Net的肩膀上有更多的亮点，比如原生支持的泛型、DI、面向对象设计（虽然TS也是）、数不过来的.Net类库、跨平台应用（MAUI）等。

其实没有必要只看到Blazor的劣势，也可以看看站在.Net上的前端能走多远，这不也是我们期待的吗？

看到这里，有些.Net古董级大佬要出来发话了，Silverlight！是的，但这次WASM没有再要求下载插件了。

Web Assembly Vs Server（服务器端渲染）

Web Assembly：WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

Server（Server Side Render - SSR）：将组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

为什么用SSR

服务器端渲染 (SSR) 的优势主要在于：

  • 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

  • 更快的内容到达时间 (time-to-content)

什么时候用SSR

使用服务器端渲染 (SSR) 时还需要有一些权衡之处：

  • 开发条件所限。浏览器特定的代码，只能在某些生命周期钩子函数 (lifecycle hook) 中使用；一些外部扩展库 (external library) 可能需要特殊处理，才能在服务器渲染应用程序中运行。

  • 涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同，服务器渲染应用程序，需要处于服务端运行环境。

  • 更多的服务器端负载。

服务器端渲染 vs 预渲染 (SSR vs Prerendering)

如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

Blazor Server支持Prerendering

Blazor该选Web Assembly还是Server

看一下.Net Conf 2021大会上的一张图：

64a11bd19f1ca47dbb982eb93fb496f6.png

总结一下：

  • Server要持久化长连接，有更高的UI延迟

  • Web Assembly则是更大的下载大小，和更慢的运行时性能

我们在做什么

又是一个老生常谈的问题，.Net的覆盖面太广了也导致很难解决所有问题。我们在权衡利弊之后是不是可以为.Net生态共建出自己小小的一份力呢？

开源的组件库

再回到组件库上，目前市面上的组件库其实不少了，何必要继续在这个泥潭里插一脚呢？

开发过组件库的同学，或者贡献过源码的同学应该都体会到了，写一个组件是多么的复杂。而大家对于一个设计的审美角度也是不同的。当你喜欢的设计没有提供实现怎么办？从头写吗，那太累了，所以我们尝试了一件事情。

先看一下大概思路：

0bdf19415462316e030abab317ae749d.png

简单的剖析一下：

  • 在Blazor的基础上，构建一个新的组件库叫 Blazor Component

    那他有哪些特性呢？

    • 只提供交互，不提供样式

    • 标准化Dom结构

    • 开放几乎所有可以自定义的Slots（插槽，概念引自Vue），允许你替换Slots的Dom

  • 插槽与交互的统一单元测试（目前正在38%，短期目标是80%，长期目标是90%+）

  • 基于Material Design（样式引自Vuetify）的示例项目，可以达到生产可用（我们自己的公司在用，也是世界五百强企业在用）

  • 快速实现新的组件库，只需要基于某个Design + 样式控制属性 + 特殊交互即可

未来是值得憧憬的，我们希望未来是这样的：

惭愧，蹭了一波字节的热度

dc5d5cc9d87ab41a43af3eebbe5f494b.png

MASA Blazor

基于Blazor Component和Material Design的Blazor组件库

  • 截止目前共68个基础组件，后续会继续增加

  • 预置组件，提供与.Net功能深度集成且常用组合类组件，如Url、面包屑、菜单三联动，高级搜索，i18n等

  • MASA Blazor Pro提供多种常见场景的预设布局

  • 全职团队维护，Issue快速响应

  • 知名企业在用，未来MASA Stack产品线也将一直使用，持续增加新功能

  • 免费、开源

我们还计划未来支持一键切换主题（代码切换已经提供）、预置布局、数据展示类组件、WorkFlow类组件等。

MASA Blazor Pro

基于MASA Blazor提供的Admin模板，先放几张设计稿吧，源码会跟MASA Blazor一起放出。

92a1fc0c7664c40373baff8e384001d7.png

8f853e7ba7a1113d064b8de784c22ebf.png

07c42b3f5c1ec24ffab1ea2c3905bea8.png

af69a3a91a930f9de578736361f54ae3.png

17e9c58f210ed01d0124f4e78771e272.png

MASA EShop

基于MASA Framework搭建的 EShopOnDapr，将会使用MASA Blazor Pro提供完整的前后端示例

312ed6db85584dfc786c141e304ccd48.png

开源地址：https://github.com/masalabs/MASA.EShop

总结

说到底没有完美的技术，在你权衡利弊之后在正确的场景使用它就是最合适的。

是春天还是寒冬也不重要，重要的是当下这一刻，它是否解决了你的痛点。

最后，一个小小的广告

MASA Blazor 即将发布，敬请期待，如果你对我们的组件库感兴趣，无论是代码贡献、使用、提Issue，欢迎联系我们

aa70cba57c945a93abd7f9354bd848d1.png

参考

  • https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor

  • https://docs.microsoft.com/zh-cn/aspnet/core/blazor/state-management?view=aspnetcore-6.0&pivots=server#persist-state-across-circuits

  • https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4

  • https://developer.mozilla.org/zh-CN/docs/WebAssembly

  • https://ssr.vuejs.org/zh/

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

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

相关文章

不同声音的传播速度会一样吗？

不同声音的传播速度会一样吗？

一键关注
阅读更多...
js个人笔记

js个人笔记

2019独角兽企业重金招聘Python工程师标准>>> 看锋利的jquery第二版，，在前言的时候说建议使用最新版jquery，，然而在第二章结尾的地方有用到toggle()这个方法，，我自己用发现和书上的功能不同&…
阅读更多...
linux ntfs 速度慢,将U盘磁盘格式改成NTFS解决u盘复制速度慢问题

linux ntfs 速度慢,将U盘磁盘格式改成NTFS解决u盘复制速度慢问题

1、我们首先要看看U盘的文件系统是哪个?打开计算机-可移动磁盘-右击属性。2、目前打多数U盘采用的都是FAT32格式，这也是大多数USB2.0船速速度比较慢的原因。我们先用文件大小测试一个它的读写速度，格子这里用的是一个大概四百兆的文件，为了让…
阅读更多...
Android之进程与线程的讲解

Android之进程与线程的讲解

安卓平台中当首次启动运行一个组件的时候，Android会相应的启动了一个进程。默认的，所有的组件和程序运行在这个进程和线程中，也可以安排组件在其他的进程或者线程中运行。 进程：组件运行的进程由manifest file控制。组件的节点 —…
阅读更多...
Xamarin.Android和UWP之MVVM的简单使用(二)

Xamarin.Android和UWP之MVVM的简单使用(二)

0x01 前言 前面一篇，Xamarin.Android和UWP之MVVM的简单使用(一)，主要讲了MvvmLight的简单使用 这篇主要讲讲MvvmCross的简单使用，例子的话，还是和上篇的一样。直接进正题吧，不废话了。 0x02 简单的MVVM(mvvmcross) Dem…
阅读更多...
竟然能从一维空间变换为四维空间！？

竟然能从一维空间变换为四维空间！？

一键关注
阅读更多...
ExtJs 带分页的comboBox

ExtJs 带分页的comboBox

ExtJs 带分页的comboBox 如何得到当前第几页？ 希望技术牛人能帮帮我，也可以加我扣扣【445958】， 交流JAVA Ext 框架等方面的技术！转载于:https://blog.51cto.com/ajiao13/1133773
阅读更多...
软件工程之个人项目--词频统计

软件工程之个人项目--词频统计

不得不说对于菜鸟级的我，这是一次心酸的经历啊。。。自打接到王老师布置的这个任务（个人项目）之后，我心里一直在想着自己要用哪种语言来完成我的任务。以前多多少少写过一些程序的，这又想起了数据库小学期与永哥和小强…
阅读更多...
史上最被低估的神级学科，看完忍不住感慨“它”也太重要了！

史上最被低估的神级学科，看完忍不住感慨“它”也太重要了！

▲ 点击查看著名物理学家、数学家曾说：几何学的简洁美，却又是几何学之所以完美的核心存在。几何始于数学，但它的意义和影响却远超数学。一个个枯燥的数字和一个个简单的图形，却可以帮助我们解决很多问题，了解自然的规律…
阅读更多...
.NET6之MiniAPI(三)：Response

.NET6之MiniAPI(三)：Response

MiniAPI中&#xff0c;Response的返回数据有三种格式&#xff0c;IResult&#xff0c;string&#xff0c;json&#xff1a;ValueTask<string> - 这包括 string 和 Task<string>T&#xff08;任何其他类型&#xff0c;返回前端时转成json&#xff09;- 这包括 Task&…
阅读更多...
ffmpeg speex转换为mp3或者aac

ffmpeg speex转换为mp3或者aac

2019独角兽企业重金招聘Python工程师标准>>> 输入&#xff1a; flv格式&#xff0c;视频264编码&#xff0c;音频speex编码 -8:[rootandrew ffmpeg-3.0./ffprobe test_speex1.flv 32:ffprobe version 3.0-static32: Copyright (c) 2007-2016 the FFmpeg developers3…
阅读更多...
c语言给bmp图片加滤镜,关于BMP位图透明通道的详解制作教程, 教你输出透明的BMP位图...

c语言给bmp图片加滤镜,关于BMP位图透明通道的详解制作教程, 教你输出透明的BMP位图...

我是sjmhiex啊月谢谢大家的支持 百度贴吧&#xff1a;sjmhiex吧QQ群&#xff1a;243153684BMP支持透明比较常见的方法有两种&#xff1a; 一种是32位图&#xff0c;直接就可以是透明的&#xff0c;还可以是半透明效果&#xff0c;一般都是用PNG转成的&#xff0c;或者在保存图…
阅读更多...
Android之Lollipop DevicePolicyManager学习（上）

Android之Lollipop DevicePolicyManager学习（上）

Android 5.0(lollipop)发布之后&#xff0c;看特性文档增加了不少有趣的东西。 最近花了一些时间&#xff0c;研究了下其中Managed Profile的概念&#xff0c;简称MP&#xff0c;记录下来作为一些经验&#xff0c;有需要的同学请参考。 简介 Managed Profile&#xff0c;简称被…
阅读更多...
简述JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景

简述JQuery,Extjs,YUI,Prototype,Dojo等JS框架的区别和应用场景

随着web2.0的彪悍发展&#xff0c;以及浏览器端所承载的工作越来越大&#xff08;在不是很影响性能的情况下&#xff0c;开发者都习惯把能用浏览器做的事儿都让浏览器做&#xff0c;以减轻服务器的压力和带宽费用等&#xff09;。所以Javascript已经成为了web开发最最基本的要求…
阅读更多...
怎么向小学生解释欧拉公式 e^(πi)+1=0？

怎么向小学生解释欧拉公式 e^(πi)+1=0？

全世界只有3.14 % 的人关注了爆炸吧知识前几天&#xff0c;超模君空投了一个包裹给8岁表妹。不到三秒&#xff0c;表妹就从包裹里面拿出来一条毛毯&#xff1a;表哥&#xff0c;这个毛绒绒的毯子好舒服&#xff0c;我披着毯子写作业很暖和&#xff0c;但这个图案是啥&#xff0…
阅读更多...
正式发布！Azure Functions OpenAPI Extension

正式发布！Azure Functions OpenAPI Extension

微软中国MSDN 点击上方蓝字关注我们距离Azure Functions OpenAPI Extension的预览版发布已有一年的时间&#xff0c;今天&#xff0c;我们很开心地宣布它已经正式发布了&#xff01;该版本支持.NET Core 2.1 (LTS)、3.1 (LTS)、.NET 5 和 .NET 6 (LTS)的同时&#xff0c;它还支…
阅读更多...
Java中数据是如何存储

Java中数据是如何存储

2019独角兽企业重金招聘Python工程师标准>>> 一&#xff1a;JAVA中数据的存储方式 ①&#xff1a;寄存器&#xff1a;这是最快的存储区&#xff0c;因为它位于不同于其他存储区的地方———处理器内部。但是寄存器的数量极其有限&#xff0c;所以寄存器根据需求进行…
阅读更多...
Android之Lollipop DevicePolicyManager学习（下）

Android之Lollipop DevicePolicyManager学习（下）

转载&#xff1a;http://blog.csdn.net/guiyu_1985/article/details/42968781 3. 如何在主账户与被管理者账户之间做数据通信。 a) 什么是userID 刚才提到&#xff0c;Lollipop用来区分主账户与被管理账户的其实是一个int型数值userID。 从UserHandler.class可…
阅读更多...
通过发声可以把杯子震碎吗？

通过发声可以把杯子震碎吗？

一键关注
阅读更多...
详解：从Greenplum、Hadoop到现在的阿里大数据技术

详解：从Greenplum、Hadoop到现在的阿里大数据技术

对于企业来说&#xff0c;但是到底云计算是什么呢&#xff1f;相信很多企业都有这样的困惑&#xff0c;让我们一起回到这个原始的起点探讨究竟什么是云计算&#xff1f;云计算对于企业而言到底意味什么&#xff1f;云计算的三条发展路径及三种落地形态 当回到最初的起点再审视云…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023