Blazor VS 傳統Web應用程式

2021 年 1 月 9 日
筆記

原文作者: Christian Findlay
原文鏈接： //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