Blazor VS 传统Web应用程序

时间:2023-03-09 15:39:06
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应用程序之间的选择,并说明了服务器端渲染和客户端渲染之间的区别。

Blazor VS 传统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 VS 传统Web应用程序

什么是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 VS 传统Web应用程序

Blazor托管模型

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

Blazor VS 传统Web应用程序

服务器模式的优点

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

服务器模式的缺点

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

客户端模式的优点

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

客户端模式的缺点

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

总结

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

最后

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

Blazor VS 传统Web应用程序