再聊 Blazor，它是否值得你花時間學習

時間 2020-11-20

標籤 git github 後端瀏覽器服務器網絡架構框架工具性能欄目 Git 简体版

原文原文鏈接

以前寫了一篇文章《快速瞭解 ASP.NET Core Blazor》，你們關心最多的問題是，我該不應花時間去學習 Blazor。今天聊聊這個話題，並表達一下我我的的見解。git

在此以前，我仍是想不厭其煩的介紹一個 Blazor。github

Blazor 是微軟 .NET 團隊開發的一個新的 UI 框架，目前生態發展的還不錯。僅國內就出現了很多成熟的 UI 框架，好比基於 Ant Design 的企業級組件庫 ant-design-blazor^[1]、基於 ElementUI 的 element-blazor^[2] 和基於 Bootstrap 的 BootstrapBlazor^[3] 等，這些開源項目的發起人都是國內開發者。另外，你能夠在 GitHub 的 awesome-blazor^[4] 項目查看更豐富的 Blazor 資源。後端

要更好地瞭解 Blazor，一定要先知道 WebAssembly 是什麼。瀏覽器

WebAssembly 與 .NET 無關，WebAssembly 已經慢慢開始普及被採用。簡單來講，WebAssembly 是一種新的、相似彙編的網絡語言。它能夠在瀏覽器中運行，而且支持全部現代瀏覽器。因爲通過高度優化，因此運行速度快，接近本地應用。服務器

重要的是，WebAssembly 不是一種絕大多數開發者都會寫的語言，而是用來做爲編譯目標的。你能夠將代碼針對特定的處理器或操做系統編譯成 WebAssembly，而後讓你的程序在瀏覽器中運行。網絡

理解了 WebAssembly，咱們再來正式介紹一下 Blazor。架構

在概念上，Blazor 更像是 Vue 或 React，而不是 ASP.NET Core MVC。它是一個基於組件的框架，用於構建豐富的交互式 Web 應用程序。Blazor 與傳統 JavaScript 框架的主要區別在於，Blazor 組件徹底用 C# 和 Razor 編寫，不須要用到 JavaScript，但能夠和 JavaScript 交互。框架

Blazor 有兩種模式。一種是在服務器端運行再實時渲染到瀏覽器，叫服務端模式；一種是在客戶端使用 WebAssembly 運行，叫 WebAssembly 模式。兩種模式都使用了相同的面向組件的架構，但在運行這些組件的方式上卻有很大的不一樣。工具

服務端模式，就是渲染代碼的工做在服務器上運行，它使用 SignalR（一個用於管理客戶端和服務器之間的實時鏈接的 .NET 庫）將事件從瀏覽器發送到服務器，並將 DOM 的差別部分發送到瀏覽器進行渲染。即，服務端模式是服務器渲染你的組件並經過 SignalR 管理交互。性能

WebAssembly 模式，更容易理解一些。全部的代碼，包括框架和你的組件，都在瀏覽器中運行。你的 C# 代碼像其餘 .NET 應用程序同樣被編譯成 DLL，隨後 DLL 被髮送到瀏覽器，而後在瀏覽器中運行你的代碼。打開瀏覽器開發者工具，在第一次加載頁面時，你能夠看到它會下載一堆的 DLL。

這兩種模式都有各自的優點。服務端模式在瀏覽器中的工做較少，但因爲涉及到網絡，用戶界面交互會有一些延遲。WebAssembly 模式，運行速度較快，但第一次加載較慢，須要下載 DLL，加起來大約有 2M 的樣子。

這就是 Blazor。如今說說我我的對 Blazor 的見解。

對於 Blazor，最大的優勢是先後端代碼的共用以及組件的重用，並且能夠不須要 JavaScript，極大簡單了開發工做流。

從個人體驗來講，我不太滿意 Blazor 的服務端模式，由於大部分交互都要通過網絡，這就致使少量延遲，體驗不是很好。服務端模式不適合實時性要求較高的應用，比較適合供外網訪問的網站，好比公司官網和要求利於 SEO 的網站。

Blazor 的將來，我看好的是 WebAssembly 模式。性能上，WebAssembly 接近於本地應用。相對本地應用，它的好處是不須要安裝，不須要在客戶端升級，能夠說是結合了本地應用和 Web 網頁的優勢。並且基於 Blazor 的 WebAssembly 應用能夠建立爲 PWA(Progressive Web App)，以實現離線支持。

WebAssembly 是將來的趨勢，但要被廣泛性採用，還有一段較長的路要走。首批會採用 WebAssembly 的應用會是面向企業內部的應用，好比企業的 ERP、CRM 等應用。目前各大主流瀏覽器都已支持 WebAssembly，這一點也證實各大瀏覽器廠商推 WebAssembly 技術的決心。

相較於其它語言平臺，基於 .NET 平臺的 Blazor 在 WebAssembly 發展方面目前處於絕對的領先，更具備前瞻性。另外，羣友分享的最新消息：微軟公佈，在 .NET 6 中，Blazor 將增長支持基於 Web 渲染的跨平臺桌面應用^[5]。在我看來，藉助 C# 語言和 WebAssembly 性能的優點，將來 Blazor 有望接替 Electron 的位置，成爲跨平臺桌面應用的新霸主。

我我的很是看好 Blazor 的將來發展。對於已有 ASP.NET Core 開發經驗的人來講，學習 Blazor 並無多少學習成本。若是你是 .NET 開發者，在學有餘力的狀況下，我強烈建議你花點時間學一學 Blazor。

[1]. https://github.com/ant-design-blazor/ant-design-blazor
[2]. https://github.com/Element-Blazor/Element-Blazor
[3]. https://gitee.com/LongbowEnterprise/BootstrapBlazor
[4]. https://github.com/AdrienTorris/awesome-blazor
[5]. https://github.com/dotnet/aspnetcore/issues/27217