最近blazor的WebAssembly 正式版出來了,正好手頭有一個項目采用的前后端分離模式做的,后端用的abp vnext(.net core 的一個很著名的框架)框架開發的,其實前端之前考慮的使用vue來做,但是看到了blazor的相關技術文章。就仔細看了下這個技術,也算是剛開始接觸學習,這里呢就邊學習邊開發,把開發過程給大家分享出來。
blazor分為 Server 和 WebAssembly 版,先給看一下官方的說明,然后我再結合項目具體說下,兩個版本官方的說明如下:
1、WebAssembly
Blazor WebAssembly 是單頁應用框架,用於使用 .NET 生成交互式客戶端 Web 應用。 Blazor WebAssembly 使用開放的 Web 標准(沒有插件或代碼置換),適用於包括移動瀏覽器在內的各種新式 Web 瀏覽器。通過 WebAssembly(縮寫為 wasm),可在 Web 瀏覽器內運行 .NET 代碼。 WebAssembly 是針對快速下載和最大執行速度優化的壓縮字節碼格式。 WebAssembly 是開放的 Web 標准,支持用於無插件的 Web 瀏覽器。WebAssembly 代碼可通過 JavaScript(稱為 JavaScript 互操作性或 JavaScript 互操作)訪問瀏覽器的完整功能。 通過瀏覽器中的 WebAssembly 執行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行,沙盒提供的保護可防御客戶端計算機上的惡意操作。

當 Blazor WebAssembly 應用生成並在瀏覽器中運行時:
* C# 代碼文件和 Razor 文件將被編譯為 .NET 程序集。
* 該程序集合 .NET 運行時將被下載到瀏覽器。
* Blazor WebAssembly 啟動 .NET 運行時,並配置運行時,以為應用加載程序集。 Blazor WebAssembly 運行時使用 JavaScript 互操作來處理 DOM 操作和瀏覽器 API 調用。
已發布應用的大小(其有效負載大小)是應用可用性的關鍵性能因素。 大型應用需要相對較長的時間才能下載到瀏覽器,這會損害用戶體驗。 Blazor WebAssembly 優化有效負載大小,以縮短下載時間:
* 在中間語言 (IL) 鏈接器發布應用時,會從應用刪除未使用的代碼。
* 壓縮 HTTP 響應。
* .NET 運行時和程序集緩存在瀏覽器中。
2、Server
Blazor 將組件呈現邏輯從 UI 更新的應用方式中分離出來。 Blazor Server在 ASP.NET Core 應用中支持在服務器上托管 Razor 組件。 可通過 SignalR 連接處理 UI 更新。運行時處理從瀏覽器向服務器發送 UI 事件,並在運行組件后,將服務器發送的 UI 更新重新應用到瀏覽器。Blazor Server用於與瀏覽器通信的連接還用於處理 JavaScript 互操作調用。

以上是兩個版本官方的說明區別,具體到項目來說,我這邊項目選用了WebAssembly的模式,理由如下:
1. WebAssembly雖然第一次加載比較慢,但是一旦緩存到客戶端后,速度就很快,因為本質上是執行的C#編譯后的代碼。
2. WebAssembly有個缺點就是目前不是全部瀏覽器都支持,IE是不支持的,但是我的項目面向的用戶不是大眾,而是部分使用人員,這塊可以通過要求用戶升級更新瀏覽器來使用,而且目前大多數用戶使用的瀏覽也已經是chrome內核的瀏覽器了,所以這塊不是問題。
3. WebAssembly雖然目前不支持對DOM的操作。但是可以通過調用js的方式來操作,這塊也不是問題。
4. 很多人可能覺得這不是sliverlight改頭換面了嗎,其實不然,sliverlight是需要對瀏覽器安裝插件的,就是電腦上要安裝sliverlight才行。這就降低了用戶使用的便利性。但是WebAssembly 是開放的 Web 標准,目前主流的瀏覽器基本都已支持這一標准。
5. 對於那些開發網站的目前建議不要用這個模式,畢竟使用ie的人員還是有一部分的,ie是打不開的,但是可以用server的模式(就算是server,就我目前的了解對於低版本的ie也是支持不好的),兩個模式互相修改也並不復雜。
本次就先說到這里,主要是大體介紹了下blazor的基本的兩個模式相關的信息和區別,下篇文章就開始創建一個項目來具體講一下基本的結構。