简介
建设温泉
近年来，我参与了几个web应用程序项目，这些项目实现为单页应用程序(SPA)，并使用REST API接口连接后端。在所有这些情况下，SPA都是使用React和Flux/Redux设计模式构建的。因为我的背景是以。net和azure为中心的，所以API通常是用。net Core构建的。由于SPA和API之间的技术差异，React是基于浏览器的JavaScript/TypeScript，而. net Core是基于云的c#，在两者中工作时总是需要上下文切换。(我更倾向于后台，但偶尔也会涉足UI。)
进入Blazor !
当Blazor第一次出现时，它承诺将从UI到API的代码库统一起来，这让我很兴奋。现在，随着。net 5使Blazor在实际项目中变得成熟，我已经准备好投入其中。那么，开拓者准备好了吗?你准备好了吗?
基于我们使用React构建这些web应用程序的经验，我想概述Blazor在这些关键领域的表现:
- SPA设计模式
- UI模型和使用API
- 验证和表格
- 组件
- 安全
- 日志记录和分析
- 本地化
SPA设计模式
React和Redux
Redux和React已经成为构建SPA的主要工具。Redux提供的可预测状态容器以及通过操作和还原器管理状态的能力是至关重要的。Redux是专门为与React一起工作而设计的，它将UI绑定为你的状态函数，并根据动作进行更新。
氟沙星换布莱泽
对于Blazor，同样的设计模式是首选。Flux(来自Facebook)是Redux所基于的设计模式。该模式由FluxorBlazor应用程序。带有简化器、分派器和动作的托管存储的概念都存在于c#中，不需要大量的代码。
此外，Fluxor包括一个回来的DevTools浏览器扩展(Chrome & Edge)，通过在时间轴导航中提供对当前状态和先前状态的访问来简化调试。这是一个很好的工具，可以看到当UI中发生动作时发生了什么。
下面是一个简单的Blazor页面的示例代码，使用带有UI动作和分派器的状态。
Index.razor
Index.razor.cs(后台代码)
引用:
- 替Blazor换Fluxor -https://github.com/mrpmorris/Fluxor
UI模型和使用API
使用Fluxor, Blazor可以达到与React/Redux相同的水平。但是应用程序的状态需要由各个页面的对象组成。此外，动作将通过路由与API交互。这两者都可以通过为模型手工编写c#类并映射到API端点来实现。在实践中，有一个更好的方法，代码生成。
NSwag
对于React SPA，通常使用NSwag基于OpenAPI规范的API生成DTO和操作的工具。这是通过API . net Core项目的PostBuild操作完成的。使用React解决方案，这些将生成TypeScript。代码生成也适用于Blazor，但它将创建c#类。
PostBuild动作示例
第一个命令创建了招摇。json OpenAPI规范从API的控制器。第二个程序使用HttpClient创建一个带有DTO类和“代理”类的c#客户机，以使用适当的请求和响应类型执行对所有API路由的调用。这对于React和Blazor来说非常棒，因为实际的UI代码现在可以引用状态存储中的DTO并执行所需的操作。
一个模型
上面生成的DTO的一个缺点是这些重复API(解决方案域)中的现有模型。与React使用TypeScript不同，Blazor使用原生c# . net代码。这带来了统一代码库的承诺!现在，NSwag代码生成可以调整为不创建DTO类(只创建HttpClient代理)，而是引用包含API使用的相同模型类的域模型类库。
引用:
验证和表格
验证规则
现在Blazor UI项目使用与API相同的领域模型，UI也可以利用公共业务和验证逻辑。这可以简单地使用带有域模型的DataAnnotations来完成。使用React，类似的客户端验证需要单独的冗余代码。耶，更多的代码统一!
使用DataAnnotations的示例模型
形式
Blazor还扩展了模型和验证用法形式．使用表单组件而不是简单的UI组件，将自动执行验证，并在摘要组件中显示结果。下面的示例显示了使用表单的相同简单Index页面。
Index.razorwithout form
Index.razorusing form
引用:
- Blazor形式和验证-https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0
组件
React和Blazor都是面向组件的UI框架，这意味着你可以组成一个组件页面。这些组件可以是简单的，复杂的，开箱即用的，3理查德·道金斯聚会，或习俗。这对于跨单个应用程序或跨组织的重用和一致性非常有用。
组件库
Blazor比React和其他一些SPA UI解决方案更年轻。然而，它正在迅速成熟，有许多3理查德·道金斯各方提供了组件库——从较小的开源集合到大型的商业产品。无论应用程序需求如何，都可以找到Blazor组件，从而消除了创建自己的需求。
示例库:
- Blazored
- Blazorise
- DevExpress Blazor组件
- MatBlazor
- MudBlazor
- Radzen Blazor组件
- Blazor的Telerik UI
自定义组件和库:
Blazor组件可以从头创建，也可以封装其他组件。它们使用相同的剃刀语法和我们习惯的c#代码。如果需要，这些也可以是库中的包，用于共享和/或通过nuget发布。
安全
到目前为止，我一直专注于UI问题，因为Blazor完全是关于UI的。然而，作为一名解决方案架构师，如果我不处理一些重要的横切关注点，那就太失职了。最大的问题是安全。SPA的安全性已经成为某种标准(就像React/Redux/API的使用一样)。这种典型的方法使用基于OAuth2.0协议的OpenID Connect (OIDC)。
授权
可以要求对整个Blazor应用程序或页面级别进行授权。这两种情况都应用了@属性[Authorize]，如下所示。
通过_Imports.razor进行应用程序级授权
通过Index.razor进行页面级授权
身份验证
Blazor包含Authentication库，它提供了基于JSON Web令牌(jwt)的基于令牌的身份验证。身份验证库使用ASP提供无缝身份验证。NET Core后端，集成了ASP。NET核心身份与API授权。
安全性是一个比这篇文章更大的话题。但是，Blazor能够很好地支持SPA后端身份验证和UI授权的需求。有关详细信息，请参阅下面的参考资料。
引用:
- Blazor认证库-https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/?view=aspnetcore-5.0
- 获取ASP。NET Core Blazor WebAssembly -https://docs.microsoft.com/en-us/aspnet/core/blazor/security/webassembly/standalone-with-authentication-library?view=aspnetcore-5.0&tabs=visual-studio
日志记录和分析
与应用程序的其余部分一样，Blazor UI可以从包括部署后的信息和异常跟踪中受益。此外，UI可能依赖于一些使用分析。令人高兴的是，这些担忧都有解决方案。
日志记录
在我最近的React SPA经验中，Application Insights在前端被用于跟踪TypeScript代码中启动的信息和异常。通过下面列出的nuget包，Blazor应用程序也可以做到这一点。有趣的是，此时，这是由3提供的理查德·道金斯派对，而不是微软。这在未来可能会改变。然而，由于它的存在，该包确实提供了跟踪跟踪、异常和度量所需的功能。它还提供了基于时间的测量跟踪。
分析
同样，谷歌分析已被证明是React SPA应用程序的一个有价值的补充。同样，同样可以用Blazor应用程序和下面列出的nuget包完成。在使用时，GA将默认跟踪事件，并且可以根据需要通过代码显式调用。
引用:
- AppInsights -https://github.com/IvanJosipovic/BlazorApplicationInsights
- 谷歌,https://github.com/isc30/blazor-analytics
本地化
本地化并不是每个应用程序都必须的，但是在。net Core中，通常会使用IStringLocalizer来执行翻译。Blazor完全支持此客户端以及API调用期间。这允许API路由根据用户文化/语言的需要本地化内容响应，就像React SPA一样。这还允许在需要时进行客户端代码转换。
引用:
- 开拓全球化与本土化——https://docs.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-5.0
总结
Blazor来了!开拓者准备好了!我很兴奋!Blazor是SPA领域的新产品，但作为解决方案的一部分，它满足了许多需要选择的条件。有些地方(主要是由于在现场的时间较短)它会延迟React。然而，尽管它相对较新，但还是有一些关键领域超越了React，比如模型、验证、代码基础统一等。所以恕我直言，如果你的平台和/或背景是。net Core, Blazor是下一个web应用程序的肯定选择。
