Blazor VS 传统Web应用程序

原文作者: Christian Findlay

原文链接： https://christianfindlay.com/2020/07/09/blazor-vs-traditional-web-apps/

Blazor是Microsoft团队开发的单页面应用程序（SPA）框架，它是与React，Angular和Vue.js有相同之处，但是它使用的是C＃而不是JavaScript。它将C＃带入SPA领域，并向传统的Web应用程序框架（如ASP .NET Web窗体和ASP .NET Core MVC）挑战，来构建Web应用程序。本文讨论了SPA和传统Web应用程序之间的选择，并说明了服务器端渲染和客户端渲染之间的区别。

传统Web应用程序

传统的Web应用程序是很少或没有客户端处理的应用程序。HTML在服务器端渲染并传递到浏览器。它们主要围绕静态文本和填写表单，并且大多数交互都需要刷新整页。浏览器通过HTML表单将数据发送到服务器，然后服务器再进行处理。像 ASP 和 PHP 这样的技术，在客户端和服务器之间的进行数据传输并处理。这种方式允许 html代码 和后端代码写在一起， 这样的优势是可以快速进行页面开发，传统的Web应用程序工作流通常向用户提供一个表单，一个提交按钮，并且在用户单击按钮后会从服务器收到响应，这样的用户体验通常不好。

ASP Web Forms是传统Web应用程序技术的示例，但是它不支持设计现代Web API。Microsoft引入了.NET Core，它支持从现代Web API到传统Web应用程序的所有内容，.NET Core的MVC风格是用于构建传统Web应用程序的框架。

SPA 单页面应用程序

SPA单页应用程序是基于Web的应用程序，其中基于通过API调用与服务器之间进行数据传输来动态修改UI。SPA在客户端呈现 HTML DOM。服务器通常在会话开始时传输所有HTML，JavaScript和CSS或WebAssembly代码，并且不将其作为后续API调用的一部分进行传输。浏览器修改HTML DOM，而不是从服务器请求获取完整的HTML内容。

Ajax是迈向SPA框架的第一步，这种方法在2000年代初开始流行。它使用JavaScript调用服务器端API，允许异步处理并局部刷新页面。与传统的Web应用程序相比，改善了用户交互体验，浏览器可以在屏幕上执行数据的部分更新，并且每次调用都没有HTML传输，许多传统的Web应用程序开始部分集成Ajax，开发人员在后端定义API接口，然后前端js负责api接口调用和处理。

Webpack等JavaScript模块化的打包程序开始出现，它简化了构建纯JavaScript应用程序的过程，很方便对程序打包成原生的应用， 与Vue.js，Angular和React等框架结合使用时，SPA更方便构建和部署，并且前端和后端人员定义API后可以并行开发，提升效率。

什么是Blazor?

Blazor是一个SPA框架，它使用编译的C＃来操纵HTML DOM来替代JavaScript，Blazor允许使用服务器端或客户端托管模型，但是无论哪种情况，浏览器都可以操作HTML DOM客户端，该应用程序仍然是SPA应用程序。

对于C＃程序员而言，非Blazor的SPA框架可能会有陡峭的学习曲线。Typescript与C＃有一些相似之处，但是编程范例却大不相同。Blazor允许C＃开发人员使用Visual Studio进行构建和调试，而TypeScript主要将开发人员与VS Code联系在一起。Visual Studio工具集通常是C＃开发人员更熟悉的。

C＃程序员几乎无需学习就可以开始开发Blazor Web应用程序，如果C＃程序员已经使用ASP MVC，你会更得心应手，Blazor语法与ASP MVC语法非常相似，如果您的团队拥有MVC的代码库，则向Blazor的过渡将会更加容易。

Blazor托管模型

区分Blazor托管模型和页面渲染很重要,在客户端模型中，Blazor在浏览器内部的WebAssembly（WASM）上运行，在服务器端模型中，Blazor在服务器上运行，并通过Signal-R将HTML传输到客户端。两种模型都可提供与React，Vue.js或Angular等SPA框架同样的用户体验，但是有一些差异，服务器端模式不需要浏览器中的WASM支持，这意味着某些较旧的浏览器可以使用服务器端托管模型。

服务器模式的优点

• 初始页面下载可以小很多
• 可以利用已安装的服务器端组件进行处理
• Visual Studio完全支持使用服务器端模型进行调试

服务器模式的缺点

• 没有离线功能，断开互联网连接后，处理将停止。
• 延迟增加

客户端模式的优点

• 客户端UI处理，可以减少对服务器的压力
• 当用户比较多时，服务器不用去管理很多的Socket连接
• 比Js 有更好的处理性能

客户端模式的缺点

• WASM上的.NET目前还没有发挥其全部性能潜力, 但是AOT编译有望在不久的将来显著提高性能。
• 互动仅限于浏览器的功能
• 初始化页面比较慢，因为要下载 .NET 运行时。
• 调试客户端Blazor应用程序会受到一些限制和问题。

总结

用户通常期望现代的Web应用程序具有SPA的功能，传统的Web应用程序可能适用于涉及传统基础架构或简单页面，但是，如果用户在整个页面重新加载时提供了不好的体验，他们可能不太会喜欢使用这些程序，具有C＃经验的开发团队应在下一个Web应用程序中考虑Blazor,Blazor可能意味着不需要培训人员使用JavaScript或TypeScript，并且提供了服务器和客户端两种模式，可以灵活使用。

最后

欢迎扫码关注我们的公众号 【全球技术精选】，专注国外优秀博客的翻译和开源项目分享，也可以添加QQ群 897216102