對打 Angular，Blazor 贏在哪裏？

作者 | Ravindu Shehan Perera

譯者 | 王強

策劃 | 閆園園

Blazor 是一個 Microsoff ASP.NET Core 框架，用它無需任何附加組件或插件即可在瀏覽器中運行. NET 應用程序。相比之下，Angular 是一種基於組件的流行 JavaScript 框架，用於構建可擴展的 Web 應用程序。

本文將深入探討 Blazor 和 Angular 之間的異同，以幫助大家爲自己的下一個項目選擇最佳框架。

Blazor 是什麼？

Blazor 是微軟新出的 ASP.NET Core Web 框架，允許開發人員在 Web 應用程序中使用 C# 代碼。Blazor 應用基於現有的 Web 技術（例如 HTML 和 CSS）構建，但該框架允許開發人員使用 C# 和 Razor（一種流行的模板標記語法）而不是 JavaScript 語言。Blazor 這個名稱是 Browser 和 Razor 的組合。

使用 Blazor，開發人員能夠爲在. NET 中開發的，基於 WebAssembly 的客戶端應用程序創建交互式和可複用的 Web UI。此外，它讓開發人員能夠共享代碼和庫，因爲客戶端和服務端代碼都是用 C# 編寫的，從而爲開發人員提供了一個平臺，可以使用. NET 端到端開發充滿活力的現代單頁應用程序（SPA）。

Blazor 的最大賣點是它使用最新的 Web 標準，並且不需要額外的插件或附加組件即可在兩個單獨的部署模型（客戶端 WebAssembly 和服務端 ASP.NET Core）中運行。

Blazor 在 GitHub 上已經積累了超過 9K Stars，非常適合 Web 應用開發用途。但要完全理解 Blazor，我們必須深入瞭解它的起源。Blazor 提供了兩種開發選項，服務器和 WebAssembly。除此之外，Blazor 中還有另外三個可用的開發選項：

• Blazor PWA：開發漸進式 Web 應用。

• Blazor Hybrid：開發混合應用程序。

• Blazor Native：爲移動平臺創建原生應用程序。

Blazor 中的功能

• 使用 C# 創建 Web UI。

• 支持漸進式 Web 應用開發。

• 創建可複用的 C# 組件。

• 完全支持服務端調試。

• 支持服務端渲染，用於更快的 WebSocket 連接。

下面我們討論一下 Blazor 的一些優缺點。

Blazor 的優勢

• Blazor 共享服務端代碼和客戶端代碼：Blazor 允許開發人員在前端和後端之間複用代碼。

• 依賴注入：依賴注入是一個可用的對象，可以在 Blazor 中充當一個服務。Blazor 在其應用程序中使用依賴注入來實現控制反轉，它允許爲對象提供依賴。在 Blazor 中，依賴注入可以分爲多個類：注入器、客戶端和服務。Blazor 還有不同的注入器，例如構造器、屬性和方法。

• Visual Studio Code：我們可以使用 Visual Studio Code 開發 Blazor 應用，因爲它們都是微軟產品。當你在 Blazor 框架中開發應用程序時，VSCode 將幫助你輕鬆利用其各種功能。

• 與 JavaScript 的互操作性：Blazor 使用 Blazor WebAssembly 中的互操作功能來處理 DOM 操作。此外，這個 JavaScript 功能可以在 Blazor WebAssembly 中使用瀏覽器 API 調用。因此，Blazor 應用可以將. NET 方法與 JavaScript 函數結合使用。要了解更多信息，請參閱這篇文章：在 Blazor 中使用 JavaScript 互操作的優缺點（地址：https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx）。

Blazor 的缺點

Blazor 服務器的缺點：

• 無離線支持：Blazor Server 必須有活動的網絡連接。如果連接失敗，應用程序將停止工作，原因是整個項目託管在服務端，需要連接到互聯網。

• 使用 ASP.NET Core：Blazor 始終需要 ASP.NETCore 服務器才能運行。因此，如果你使用 Blazor 開發任何應用，你都應該先安裝 ASP.NETCore。

Blazor WebAssembly 的缺點：

• 應用程序體積：Blazor 執行時間取決於應用的體積。因此，基於 Blazor WebAssembly 構建的較重應用可能會影響性能。

• 受限於瀏覽器：瀏覽器的功能在 Blazor 中受到限制。因此，只要瀏覽器可以處理 Blazor，應該就不會有什麼問題。然而，並不是所有的瀏覽器都支持 WebAssembly，所以如果你碰巧在使用 Internet Explorer，可能就會遇到麻煩。

Angular 是什麼？

Angular 是一個基於 TypeScript 的前端框架。它被評爲世界上最受歡迎的開源 Web 框架之一。它可以幫助開發人員創建交互式用戶界面、單頁 Web 應用、高級 Web 應用等。它的前身是使用 JavaScript 的 AngularJS。但是隨着技術的發展，TypeScript 已經在 Angular 中取代了 JavaScript。

讓我們看看使用 Angular 的一些優勢。

Angular 的優點

• 支持：與 Blazor 相比，使用 Angular 的社區規模非常大。因此對於 Angular 來說，我們在應用開發過程中遇到問題時，找到解決方案的機會很高。

• 使用 TypeScript：TypeScript 有很多比 JavaScript 更好的屬性。例如，乾淨、可理解和可預測的代碼在 Angular 上表現更好。

• 可複用性：Angular 也像 Blazor 一樣支持可複用性，這對開發人員來說很有用。

• MVVM：Angular 是一個開源的 MVVM 框架，它將程序邏輯與用戶界面控件分開。用戶可以使用模型 - 視圖 - 視圖模型（也稱爲模型 - 視圖 - 綁定器）來保持代碼結構清晰、項目各自分離。他們可以快速輕鬆地更新、編輯和修復代碼。視圖負責託管可視項目並接收來自模型的輸入。ViewModel 連接視圖和模型。最後，模型包括了程序的邏輯。

Angular 的缺點

• 難學：即使對於經驗豐富的工程師來說，Angular 也是一個難以掌握、問題多多的框架。Angular 的難度來自於陡峭的學習曲線和需要深度知識才能理解的全套文檔。此外，Angular 是一個固執的框架，這意味着它有自己的做事方法，開發人員別無選擇，只能遵循它的風格。然而，一旦你掌握了 Angular，它就會成爲一個非常有益的工具。

• 搜索引擎優化：默認情況下，Angular 對搜索引擎優化並不友好。除非網站建立在服務端，否則搜索引擎爬蟲很難對其進行索引。但網站應該沒有障礙地在 SERP 中被索引和發現纔對。

• 體積較大：Angular 項目包的大小通常比其他框架的更大，這使得 Angular 應用運行緩慢。

Blazor 與 Angular 對比

我們來直接比較 Blazor 和 Angular。

Angular 和 Blazor 都是開源 Web 框架。主要區別在於 Angular 使用 TypeScript，而 Blazor 使用 C#。但兩者之間存在一些關鍵差異：

• Angular 已經存在了一段時間，但 Blazor 仍處於早期階段。

• 每個客戶端都必須有一個活動連接，並且 Blazor 將每個客戶端的組件狀態保存在服務器上。

• Blazor 現在提供了 scoped 組件樣式和 CSS 隔離。在 Angular 中，與組件樣式和 CSS 隔離相關的工具鏈已經非常成熟了。

• Angular 提供了對 PWA 的支持，但服務端 Blazor 不能用作 PWA。

下表詳細列出了 Angular 與 Blazor 的對比細節。

編程語言、發展歷史和流行度是兩者之間最顯著的區別。因爲世界各地的大公司都在使用 Angular，所以找到一份 Angular 開發人員的工作也容易得多。此外，Angular 是一個優秀的企業解決方案，它主要用於此類需求。

你應該根據你的目標來選擇框架。如果你想確保自己選擇的框架有一個龐大的社區，可以在需要時爲你提供幫助，請選擇 Angular。PWA 得到了 Angular 的強力支持，但 Blazor 的服務端尚未趕上。另一方面，Blazor 更適合熟悉 C# 的開發人員，而對於經驗豐富的 TypeScript 開發人員來說，上手 Blazor 會有些麻煩。如果你正在尋找一個完善的產品，Angular 是正確的選擇。

在選擇 Blazor 或 Angular 時，你必須考慮以下幾點：

何時使用 Blazor：

• 如果你是想要更快構建應用的 C# 開發人員。

• 當項目需要更快的週轉時間時。

何時使用 Angular：

• 如果你願意在 Angular 上投入大量的學習努力，以從一個久經考驗的框架中獲益。

• 如果你是一個頑固的 JavaScript 開發人員，永遠不會選擇使用. NET 進行 Web 開發。

• 如果你需要開發具有高靈活度的最小設計應用。

結論

在本文中，我全面概述了 Blazor 和 Angular 各自的功能和用法。這兩個框架都令人印象深刻，但每個框架都有其優點和侷限性。最終，你應根據項目要求在 Blazor 和 Angular 之間進行選擇，選出最能滿足你需求的一種。我建議閱讀它們的文檔以獲取更多信息。

現在你知道該選擇什麼了，如果你用過它們，請在下面的評論中分享你的經驗。感謝你的閱讀！

原文鏈接：

https://www.syncfusion.com/blogs/post/blazor-vs-angular.aspx/amp

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/XINv9q3-S1ZeANLV3ldq8A