之前寫了一篇文章《快速瞭解 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