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

目录

官方解释Blazor

Blazor Vs MVC

什么是MVC

什么是交互式Web UI

Blazor有什么优势

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

调试

全家桶

组件库

第三方库

包管理

性能

完了吗

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

为什么用SSR

什么时候用SSR

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

Blazor该选Web Assembly还是Server

我们在做什么

开源的组件库

MASA Blazor

MASA Blazor Pro

MASA EShop

总结

参考

官方解释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状态管理更强大