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

之前寫了一篇文章《快速了解 ASP.NET Core Blazor》，大家關心最多的問題是，我該不該花時間去學習 Blazor。今天聊聊這個話題，并表達一下我個人的看法。

在此之前，我還是想不厭其煩的介紹一個 Blazor。

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

作者：精緻碼農-王亮

出處：http://cnblogs.com/willick

聯系：[email protected]

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利。如有問題或建議，請多多賜教，非常感謝。