原文作者: Christian Findlay
原文鏈接：https://christianfindlay.com/2020/07/09/blazor-vs-traditional-web-apps/

Blazor是Microsoft團(tuán)隊開發(fā)的單頁面應(yīng)用程序（SPA）框架，它是與React，Angular和Vue.js有相同之處，但是它使用的是C＃而不是JavaScript。它將C＃帶入SPA領(lǐng)域，并向傳統(tǒng)的Web應(yīng)用程序框架（如ASP .NET Web窗體和ASP .NET Core MVC）挑戰(zhàn)，來構(gòu)建Web應(yīng)用程序。本文討論了SPA和傳統(tǒng)Web應(yīng)用程序之間的選擇，并說明了服務(wù)器端渲染和客戶端渲染之間的區(qū)別。

傳統(tǒng)Web應(yīng)用程序

傳統(tǒng)的Web應(yīng)用程序是很少或沒有客戶端處理的應(yīng)用程序。HTML在服務(wù)器端渲染并傳遞到瀏覽器。它們主要圍繞靜態(tài)文本和填寫表單，并且大多數(shù)交互都需要刷新整頁。瀏覽器通過HTML表單將數(shù)據(jù)發(fā)送到服務(wù)器，然后服務(wù)器再進(jìn)行處理。像 ASP 和 PHP 這樣的技術(shù)，在客戶端和服務(wù)器之間的進(jìn)行數(shù)據(jù)傳輸并處理。這種方式允許 html代碼 和后端代碼寫在一起， 這樣的優(yōu)勢是可以快速進(jìn)行頁面開發(fā)，傳統(tǒng)的Web應(yīng)用程序工作流通常向用戶提供一個表單，一個提交按鈕，并且在用戶單擊按鈕后會從服務(wù)器收到響應(yīng)，這樣的用戶體驗通常不好。

ASP Web Forms是傳統(tǒng)Web應(yīng)用程序技術(shù)的示例，但是它不支持設(shè)計現(xiàn)代Web API。Microsoft引入了.NET Core，它支持從現(xiàn)代Web API到傳統(tǒng)Web應(yīng)用程序的所有內(nèi)容，.NET Core的MVC風(fēng)格是用于構(gòu)建傳統(tǒng)Web應(yīng)用程序的框架。

SPA 單頁面應(yīng)用程序

SPA單頁應(yīng)用程序是基于Web的應(yīng)用程序，其中基于通過API調(diào)用與服務(wù)器之間進(jìn)行數(shù)據(jù)傳輸來動態(tài)修改UI。SPA在客戶端呈現(xiàn) HTML DOM。服務(wù)器通常在會話開始時傳輸所有HTML，JavaScript和CSS或WebAssembly代碼，并且不將其作為后續(xù)API調(diào)用的一部分進(jìn)行傳輸。瀏覽器修改HTML DOM，而不是從服務(wù)器請求獲取完整的HTML內(nèi)容。

Ajax是邁向SPA框架的第一步，這種方法在2000年代初開始流行。它使用JavaScript調(diào)用服務(wù)器端API，允許異步處理并局部刷新頁面。與傳統(tǒng)的Web應(yīng)用程序相比，改善了用戶交互體驗，瀏覽器可以在屏幕上執(zhí)行數(shù)據(jù)的部分更新，并且每次調(diào)用都沒有HTML傳輸，許多傳統(tǒng)的Web應(yīng)用程序開始部分集成Ajax，開發(fā)人員在后端定義API接口，然后前端js負(fù)責(zé)api接口調(diào)用和處理。

Webpack等JavaScript模塊化的打包程序開始出現(xiàn)，它簡化了構(gòu)建純JavaScript應(yīng)用程序的過程，很方便對程序打包成原生的應(yīng)用， 與Vue.js，Angular和React等框架結(jié)合使用時，SPA更方便構(gòu)建和部署，并且前端和后端人員定義API后可以并行開發(fā)，提升效率。

什么是Blazor?

Blazor是一個SPA框架，它使用編譯的C＃來操縱HTML DOM來替代JavaScript，Blazor允許使用服務(wù)器端或客戶端托管模型，但是無論哪種情況，瀏覽器都可以操作HTML DOM客戶端，該應(yīng)用程序仍然是SPA應(yīng)用程序。

對于C＃程序員而言，非Blazor的SPA框架可能會有陡峭的學(xué)習(xí)曲線。Typescript與C＃有一些相似之處，但是編程范例卻大不相同。Blazor允許C＃開發(fā)人員使用Visual Studio進(jìn)行構(gòu)建和調(diào)試，而TypeScript主要將開發(fā)人員與VS Code聯(lián)系在一起。Visual Studio工具集通常是C＃開發(fā)人員更熟悉的。

C＃程序員幾乎無需學(xué)習(xí)就可以開始開發(fā)Blazor Web應(yīng)用程序，如果C＃程序員已經(jīng)使用ASP MVC，你會更得心應(yīng)手，Blazor語法與ASP MVC語法非常相似，如果您的團(tuán)隊擁有MVC的代碼庫，則向Blazor的過渡將會更加容易。

Blazor托管模型

區(qū)分Blazor托管模型和頁面渲染很重要,在客戶端模型中，Blazor在瀏覽器內(nèi)部的WebAssembly（WASM）上運(yùn)行，在服務(wù)器端模型中，Blazor在服務(wù)器上運(yùn)行，并通過Signal-R將HTML傳輸?shù)娇蛻舳恕煞N模型都可提供與React，Vue.js或Angular等SPA框架同樣的用戶體驗，但是有一些差異，服務(wù)器端模式不需要瀏覽器中的WASM支持，這意味著某些較舊的瀏覽器可以使用服務(wù)器端托管模型。

服務(wù)器模式的優(yōu)點(diǎn)

?初始頁面下載可以小很多?可以利用已安裝的服務(wù)器端組件進(jìn)行處理?Visual Studio完全支持使用服務(wù)器端模型進(jìn)行調(diào)試

服務(wù)器模式的缺點(diǎn)

?沒有離線功能，斷開互聯(lián)網(wǎng)連接后，處理將停止。?延遲增加

客戶端模式的優(yōu)點(diǎn)

?客戶端UI處理，可以減少對服務(wù)器的壓力?當(dāng)用戶比較多時，服務(wù)器不用去管理很多的Socket連接?比Js 有更好的處理性能

客戶端模式的缺點(diǎn)

?WASM上的.NET目前還沒有發(fā)揮其全部性能潛力, 但是AOT編譯有望在不久的將來顯著提高性能。?互動僅限于瀏覽器的功能?初始化頁面比較慢，因為要下載 .NET 運(yùn)行時。?調(diào)試客戶端Blazor應(yīng)用程序會受到一些限制和問題。

總結(jié)

用戶通常期望現(xiàn)代的Web應(yīng)用程序具有SPA的功能，傳統(tǒng)的Web應(yīng)用程序可能適用于涉及傳統(tǒng)基礎(chǔ)架構(gòu)或簡單頁面，但是，如果用戶在整個頁面重新加載時提供了不好的體驗，他們可能不太會喜歡使用這些程序，具有C＃經(jīng)驗的開發(fā)團(tuán)隊?wèi)?yīng)在下一個Web應(yīng)用程序中考慮Blazor,Blazor可能意味著不需要培訓(xùn)人員使用JavaScript或TypeScript，并且提供了服務(wù)器和客戶端兩種模式，可以靈活使用。

最后

歡迎掃碼關(guān)注我們的公眾號 【全球技術(shù)精選】，專注國外優(yōu)秀博客的翻譯和開源項目分享，也可以添加QQ群 897216102

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的Blazor VS 传统Web应用程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。