Blazor University （1）介绍 - 什么是 Blazor？
原文鏈接：https://blazor-university.com/overview/what-is-blazor/
什么是 Blazor？
Blazor 是一個單頁應用程序開發框架。Blazor 這個名稱是單詞 Browser 和 Razor（.NET HTML 視圖生成引擎）的組合/變異。這意味著 Blazor 不必在服務器上執行 Razor 視圖以便將 HTML 呈現給瀏覽器，而是能夠在客戶端上執行這些視圖。
具有客戶端執行能力的 Blazor 應用Blazor 還支持在服務器上執行 SPA。
Blazor 不是什么
Blazor 不像 Silverlight，微軟之前在瀏覽器內托管應用程序的嘗試。Silverlight 需要一個瀏覽器插件才能在客戶端上運行，這阻止了它在 iOS 設備上運行。
Blazor 不需要在客戶端上安裝任何類型的插件即可在瀏覽器中執行。Blazor 要么運行在服務器端，在這種情況下，它在服務器上執行，瀏覽器僅作為一個終端，要么通過使用 WebAssembly 在瀏覽器本身中運行。
因為 WebAssembly 是一種 Web 標準，它在所有主要瀏覽器上都受支持，這意味著 Blazor 客戶端應用程序可以在 Windows/Linux/Mac/Android 和 iOS 上的瀏覽器中運行。
Blazor 是開源的
Blazor 源代碼[1]可在此處獲得。源代碼歸 .NET 基金會[2]所有，該基金會是一個非營利組織，旨在支持基于 .NET 框架的開源項目。
據 .NET 基金會稱，在撰寫本文時，它得到了 3,700 家公司的支持，并有 61,000 名貢獻者。
什么是 WebAssembly？
WebAssembly（簡稱為“Wasm”）是一個指令集，旨在運行在任何能夠解釋這些指令或將它們編譯為本機機器代碼并執行它們的主機上。
Wasm 是一種以特定二進制格式格式化的指令集。因此，任何遵守本規范的主機（硬件或軟件）都能夠讀取二進制文件并執行它們——無論是解釋的，還是直接編譯成特定于設備的機器語言。
Wasm 類似于 .NET 源代碼編譯成的通用指令集（通用中間語言）。就像 .NET 一樣，Wasm 可以從 C# 等高級語言生成。
Blazor 不需要在客戶端上安裝 .NET 即可通過 WebAssembly 運行。
支持的瀏覽器
| Android browser | 67 |
| Chrome | 57 |
| Chrome for Android | 74 |
| Edge | 16 |
| Firefox | 52 |
| Firefox for Android | 66 |
| iOS Safari | 11 |
| Opera | 44 |
| Opera mobile | 46 |
| Safari | 11 |
| Samsung Internet | 7.2 |
數據來自 CanIUse.com[3]
Blazor 托管模型
Blazor 目前有兩種托管模型， Blazor Server 和 Blazor Web Assembly。服務端托管于 2019 年 9 月發布，Web Assembly 于 2020 年 5 月正式發布。
Blazor Web Assembly
優點
Web Assembly 在客戶端的瀏覽器內部運行，因此可以部署為靜態文件。盡管如此，由于瀏覽器安全限制，Blazor Wasm 應用程序不會直接從本地文件系統運行。
Blazor Wasm 可以離線工作。當與服務器的網絡連接丟失時，客戶端應用程序可以繼續運行（顯然它將無法與服務器通信以檢索新數據）。
它還可以很容易地作為漸進式 Web 應用程序[4]運行，這意味著客戶可以選擇將我們的應用程序安裝到他們的設備上，并在需要時運行它，而無需任何網絡訪問。
在客戶端機器上運行代碼，這意味著服務器負載顯著降低。
缺點
blazor.webassembly.js文件用于引導客戶端應用程序。它會下載所有必需的 .NET DLL 程序集，這使得應用程序的啟動時間在您的應用程序第一次運行時比服務器端慢（DLL 然后會由瀏覽器緩存，從而使后續啟動更快）。
Mono 框架用于解釋 .NET 中間語言，因此比運行 Blazor Server 慢。計劃在未來的版本中進行提前 (Ahead-of-time AOT) 編譯。
Blazor Wasm 尚不支持多個線程，因此所有處理都發生在 UI 線程上——盡管對服務器/JavaScript 等的調用是異步發生的，所以不要阻止 UI 的響應。
此外，Blazor Wasm 僅適用于較新的瀏覽器，對搜索引擎不友好（除非我們啟用服務器端預渲染）。
Blazor Server
優點
Blazor Server 在將 HTML 內容發送到客戶端瀏覽器之前對其進行預渲染。這使它對搜索引擎友好，并且沒有可察覺的啟動時間。
Blazor Server 應用程序將在較舊的瀏覽器（例如 Internet Explorer 11）上運行，因為不需要 Web Assembly，只需要 HTML 和 JavaScript。當代碼在服務器上執行時，還可以在 Visual Studio 中調試我們的 .NET 代碼。
缺點
Blazor Server 為當前客戶端設置內存中會話，并使用 SignalR 在服務器上運行的 .NET 和客戶端瀏覽器之間進行通信。對于所有用戶，所有內存和 CPU 的使用都會以服務器為代價。這也意味著客戶端與首先為其提供服務的服務器綁定，因此無法使用負載均衡。
初始頁面被渲染并發送到瀏覽器后，blazor.server.js 文件將 hook 瀏覽器中的任何相關用戶交互事件，以便它可以在用戶和服務器之間進行通信。例如，如果呈現的元素注冊了 @onclick 事件，則 blazor.server.js 將 hook 到其 JavaScript onclick 事件，然后使用其 SignalR 連接將該事件發送到服務器并執行相關的 .NET 代碼。
<p>Current?count?=?@CurrentCount </p> <button?@onclick=IncrementCount>Click?me</button> @code {private?int?CurrentCount;public?void?Increment(){CurrentCount++;} }.NET 代碼執行完成后，Blazor 將重新渲染頁面上的組件，然后將 HTML 的增量包發送回客戶端的瀏覽器，以便它可以更新其顯示，而無需重新加載整個頁面。
注意： 稍后將深入介紹渲染樹。
如果我們運行一個標準的 Blazor 應用程序，單擊菜單中的 Counter 鏈接，然后單擊 Click me 按鈕，我們可以觀察到與服務器之間的 SignalR 數據通信。
在 Chrome 瀏覽器中運行應用程序。
單擊應用程序菜單中的 Counter 鏈接。
按 F12 打開瀏覽器的開發者工具。
在開發人員工具窗口中，單擊網絡選項卡。
重新加載頁面。
接下來，單擊 WS 選項卡（WebSocket 的縮寫）。
單擊 _blazor 項以顯示套接字數據。
單擊 Click me 按鈕將顯示類似于以下內容的網絡流量（為便于閱讀而進行了刪減和格式化）。
相應的來自服務器的響應如下所示：
注意： 突出顯示的 1 表示增量 HTML，并且是計數器的新值。
如果客戶端的瀏覽器和服務器沒有關閉或者它們之間的網絡連接很慢，特別是當觸發狀態更改的事件頻繁時，這種往返會提供緩慢的體驗。例如，諸如 onmousemove 之類的事件會經常觸發。
此外，需要大量 HTML 增量更新的更改也可能很慢。例如，如果我們的頁面中有一個 HTML <textarea> 組件，它更新了顯示區域以在用戶鍵入時預覽用戶的輸入，那么來自服務器的 delta HTML 將隨著添加到 <textarea> 中的每個字符而增加。當輸入內容變大時，會導致每次按鍵都進行較大的網絡傳輸。
與 Blazor Wasm 不同，一旦從瀏覽器到服務器的連接丟失，應用程序就會無響應。Blazor 將嘗試重新建立與服務器的連接，但在成功之前，應用程序會顯示消息“正在嘗試重新連接到服務器……”并阻止所有鼠標與用戶界面的交互。
Blazor Mobile Bindings
2020 年 1 月，Microsoft 宣布了 Blazor Mobile Bindings，這是一個實驗性項目，允許開發人員結合使用 Blazor 和 Xamarin.Forms (XAML) 的 Razor 變體來構建本機移動應用程序。
你可以在這里[5]找到官方公告。
安裝 Blazor
服務器端 Blazor 和 Blazor WebAssembly 現在都作為 .NET Core 3.2.0 的一部分發布。安裝 Blazor 現在就像安裝 Visual Studio 16.6 或更高版本一樣簡單！您可以通過此鏈接[6]下載最新版本的 Visual Studio。
安裝時，請確保在 Workloads 選項卡下選擇選項 ASP.NET 和 Web 開發。
創建項目
打開 Visual Studio。
單擊創建新項目。
在搜索框中鍵入 Blazor。
選擇 Blazor WebAssembly 應用。
點擊下一步。
輸入項目名稱，例如 MyFirstBlazorApp。
點擊下一步。
選中 ASP.NET Core 托管復選框。
單擊創建。
創建頁面
在 Blazor 中，頁面是可以通過 URL 訪問的頂級視圖。在本練習中，我們將從頭開始重新創建 Counter.razor 頁面。
在解決方案資源管理器窗口中，展開 MyFirstBlazorApp.Client 項目。
展開 Pages 文件夾。
右鍵單擊 ·Counter.razor· 并將其刪除。
右鍵單擊Pages 文件夾。
選擇 添加->Razor 頁面 并創建一個名為 Counter.razor 的新頁面。如果您收到“腳手架”錯誤，您可以選擇另一種文件格式并為其指定 .razor 文件擴展名。
Razor 頁面是一個獨立的視圖。我們可以包含 HTML 和 Razor 視圖標記，以及事件等所需的任何 C# 方法。使用以下內容啟動新的 Razor 頁面。
@page?"/counter" <h1>Counter</h1> <p>The?counter?value?is?@currentCount</p> @code?{private?int?currentCount=?42; }第一行標識呈現此頁面內容所需的 URL。路由部分將介紹更高級的路由技術。
接下來是一些標準的 HTML，一個帶有頁面標題的 H1 和一個帶有一些內容的段落。就像使用標準 ASP.NET Razor 頁面一樣，可以通過使用 @ 符號對其進行轉義來插入可編程內容。在本示例中，我們將顯示 currentCount 私有成員的值。
最后，聲明頁面的 @code 節。這是我們編寫屬性/方法、事件處理程序或其他任何我們需要的代碼的地方。這里我們聲明了 currentCount 私有成員和設置它的初始值。運行應用程序，單擊頁面左側的 Counter 鏈接，您應該會看到如下內容：
與頁面交互
到目前為止，我們已經綁定了頁面的私有成員，以便在呈現 Razor 視圖時將其值作為 HTML 輸出。接下來，我們將更新該值作為對用戶操作的響應。
更改 razor 視圖以包含以下按鈕標記。
<button?class="btn?btn-primary"?@onclick=IncrementCount>Increment?counter</button>這將添加一個 HTML 按鈕并使用一些 Bootstrap 樣式使其看起來更漂亮。它還將其 onclick 事件設置為執行名為 IncrementCounter 的方法。方法實現非常簡單，放在 @code 節。
@page?"/counter" <h1>Counter</h1> <p>The?counter?value?is?@currentCount</p> <button?class="btn?btn-primary"?@onclick=IncrementCounter>Increment?counter</button> @code?{private?int?currentCount?=?42;private?void?IncrementCounter(){currentCount++;} }現在再次運行應用程序，導航到 Counter 頁面，然后單擊按鈕查看頁面更新的值。
參考資料
[1]
Blazor 源代碼: https://dotnetfoundation.org/
[2].NET 基金會: https://dotnetfoundation.org/
[3]CanIUse.com: https://caniuse.com/#search=wasm
[4]漸進式 Web 應用程序: https://web.dev/progressive-web-apps/
[5]這里: https://devblogs.microsoft.com/aspnet/mobile-blazor-bindings-experiment/
[6]此鏈接: https://visualstudio.microsoft.com/vs/
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Blazor University （1）介绍 - 什么是 Blazor？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Xamarin效果第一篇之时间轴
- 下一篇： .NET Core中使用结果过滤器Res