东莞网络推广培训,沈阳网站制作优化,东营seo,长春网站制作费用title: Blazor是春天还是寒风里的挣扎
date: 2021-10-25 14:00:00
toc: true
categories:- Blazor
tags:- Blazor- MASA Blazor#官方解释BlazorBlazor允许您使用c#而不是JavaScript构建交互式web UI。Blazor应用由可重用的web UI组件组成#xff0c;这些组件使用c#、HTML和CSS… title: Blazor是春天还是寒风里的挣扎
date: 2021-10-25 14:00:00
toc: true
categories:- Blazor
tags:- Blazor- MASA Blazor#官方解释BlazorBlazor允许您使用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有什么功能我百度找一段过来嵌入动态文本于HTML页面对浏览器事件做出响应读写HTML元素在数据被提交到服务器之前验证数据检测访客的浏览器信息。控制cookies包括创建和修改等有这些基础功能用户不需要在静态页面里跳来跳去了的确体验会好很多Blazor有什么优势提供了一些交互能力不再是纯粹的静态页虽然mvc可以使用JavaScript达到同样的效果但你需要掌握JavaScript甚至还要再学习jQuery、Angular、Vue等。而Blazor提供的交互能力则是使用C#。吹是吹完了但你真的可以100% C#吗这很难你会遇到各种问题比如兼容性、性能等。好了那我可以不用了吗等等下面还有瓜Blazor Vs 现代前端(Angular、Vue等)我们从几个方面来对比一下吧调试BlazorVistual Stuidio F5VS Code/命令行工具 dotnet watch比WebPack要快很多跟Vite差不多在非复杂场景下Hot Reload是可以的但奇奇怪怪的问题太多了前景很好目前来看还是用Ctrl F5启动或者用命令行吧VS 2022的Ctrl F5已经支持Hot Reload了现代前端Webpack/Vite全家桶以Vue为例Vue全家桶包括Vue Cli、Vue Router、VuexBlazorClidotnet cliRouterMicrosoft.AspNetCore.Components.Routing.RouterVuexBlazor状态管理区别在于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的未来吧。不止可以给React提供复用的组件还可以给WPF第三方库举几个前端常用库来比较。网络现代前端有axiosBlazor有HttpClient数据操作现代前端有LodashBlazor有Linq时间现代前端有moment.js、Day.jsBlazor有DateTime全家桶响应式编程现代前端有rx.jsBlazor有Rx.Net没有用过理论上.Net基本都能用欢迎纠错Mock现代前端有Mock.JsBlazor有Moq当然除了mock以外还有端到端的双方也都有。对比下来其实.Net反而还有点优势那就完美吗当然不是再说点劣势的部分吧。Charts现代前端有ECharts等Blazor不想说话虽然目前Blazor的确没有成熟、免费的Charts组件库但因为Blazor可以与JS交互的能力调用ECharts也很简单稍微考验一点点小伙伴的动手能力富文本编辑器、拖拽。。。Blazor骂骂咧咧的退出了群聊。。。包管理BlazorNuGet现代前端NPM、Yarn性能数据不直观先从.Net Conf 2021上的演示截图看一下有量化数据吗有视频地址https://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4那AOT可以解千愁吗也不是。起码应用大小上来说的确也大了不少但这并不妨碍AOT可以解决特定场景的问题。技术总要选择在适合的场景使用它而不是盲目的。完了吗当然没有其实这样比较对于Blazor是不公平的因为Blazor站在.Net的肩膀上有更多的亮点比如原生支持的泛型、DI、面向对象设计虽然TS也是、数不过来的.Net类库、跨平台应用MAUI等。其实没有必要只看到Blazor的劣势也可以看看站在.Net上的前端能走多远这不也是我们期待的吗看到这里有些.Net古董级大佬要出来发话了Silverlight是的但这次WASM没有再要求下载插件了。Web Assembly Vs Server服务器端渲染Web AssemblyWebAssembly是一种新的编码方式可以在现代的网络浏览器中运行 它是一种低级的类汇编语言具有紧凑的二进制格式可以接近原生的性能运行并为诸如C / C 等语言提供一个编译目标以便它们可以在Web上运行。它也被设计为可以与JavaScript共存允许两者一起工作。ServerServer 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支持PrerenderingBlazor该选Web Assembly还是Server看一下.Net Conf 2021大会上的一张图总结一下Server要持久化长连接有更高的UI延迟Web Assembly则是更大的下载大小和更慢的运行时性能我们在做什么又是一个老生常谈的问题.Net的覆盖面太广了也导致很难解决所有问题。我们在权衡利弊之后是不是可以为.Net生态共建出自己小小的一份力呢开源的组件库再回到组件库上目前市面上的组件库其实不少了何必要继续在这个泥潭里插一脚呢开发过组件库的同学或者贡献过源码的同学应该都体会到了写一个组件是多么的复杂。而大家对于一个设计的审美角度也是不同的。当你喜欢的设计没有提供实现怎么办从头写吗那太累了所以我们尝试了一件事情。先看一下大概思路简单的剖析一下在Blazor的基础上构建一个新的组件库叫 Blazor Component那他有哪些特性呢只提供交互不提供样式标准化Dom结构开放几乎所有可以自定义的Slots插槽概念引自Vue允许你替换Slots的Dom插槽与交互的统一单元测试目前正在38%短期目标是80%长期目标是90%基于Material Design样式引自Vuetify的示例项目可以达到生产可用我们自己的公司在用也是世界五百强企业在用快速实现新的组件库只需要基于某个Design 样式控制属性 特殊交互即可未来是值得憧憬的我们希望未来是这样的惭愧蹭了一波字节的热度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一起放出。MASA EShop基于MASA Framework搭建的 EShopOnDapr将会使用MASA Blazor Pro提供完整的前后端示例开源地址https://github.com/masalabs/MASA.EShop总结说到底没有完美的技术在你权衡利弊之后在正确的场景使用它就是最合适的。是春天还是寒冬也不重要重要的是当下这一刻它是否解决了你的痛点。最后一个小小的广告MASA Blazor 即将发布敬请期待如果你对我们的组件库感兴趣无论是代码贡献、使用、提Issue欢迎联系我们参考https://dotnet.microsoft.com/apps/aspnet/web-apps/blazorhttps://docs.microsoft.com/zh-cn/aspnet/core/blazor/state-management?viewaspnetcore-6.0pivotsserver#persist-state-across-circuitshttps://sec.ch9.ms/ch9/daba/468d5211-982b-4c86-8b51-e1c8824edaba/dotNETConfNewBlazorWebAssembly_high.mp4https://developer.mozilla.org/zh-CN/docs/WebAssemblyhttps://ssr.vuejs.org/zh/
