【Blazor】|?總結/Edison Zhou
九月以來在學習Blazor做全棧開發，因此根據老習慣，我會將我的學習過程記錄下來，一來體系化整理，二來作為筆記供將來翻看。作為第一篇，我們先來了解一下這個Blazor到底是個什么鬼。
什么是Blazor？Blazor是微軟近年來主推的，基于C#、HTML與CSS來構建交互式Web UI的框架。?
借助 Blazor，開發人員可以使用 C# 生成客戶端和服務器代碼。他們還可以與前端客戶端代碼和后端邏輯共享代碼和庫。使用 C# 生成所有代碼可簡化在前端和后端之間共享數據，重復使用代碼以加速開發和維護。
Blazor的兩種模式
（1）Blazor Server模式
Blazor Server 是 Blazor 用戶界面框架（作為 ASP.NET Core Web 開發框架的一部分）的實現，并部署到 Web 服務器。使用 Blazor Server 開發應用程序會在 Web 服務器上生成 HTML，因為網站訪客通常使用 Web 瀏覽器來請求此內容。然后，該 HTML 會傳送到訪客的瀏覽器，并且系統將使用 ASP.NET Core SignalR 和首選 Web 套接字連接來維護雙向通信管道。
話外音：它需要下載的東西很小，可以使用所有服務器端的API，并且可以在不支持WebAssembly的瀏覽器中運行。但它不支持離線運行，網絡延遲的影響也較大。
單擊按鈕、導航以及與 Blazor Server 應用程序進行其他交互的用戶將通過此 SignalR 連接傳輸其操作，并且服務器將使用相同的連接來通過用戶界面更新進行響應。Blazor Server 框架使用 Web 服務器上生成的內容來自動更新瀏覽器。
（2）Blazor WebAssembly模式
首先，什么是WebAssembly？
WebAssembly (WASM) 是一種開放的二進制標準。它用于定義旨在 Web 瀏覽器中運行的程序的可移植代碼格式。
WebAssembly 是一種文本程序集語言，具有專用于實現快速下載和近乎本機性能的精簡二進制格式。
WebAssembly 為 C、C++、C# 和 Rust 等語言提供了編譯目標。它設計為與 JavaScript 一起運行，因此兩者可協同工作。WebAssembly 還可生成可下載和脫機運行的漸進式 Web 應用程序。
其次，什么是Blazor WebAssembly?
使用 Blazor WebAssembly，開發人員可以在瀏覽器中運行 .NET 代碼。
Blazor WebAssembly?是一種單頁應用框架，使用的是 WebAssembly 開放標準，無需安裝任何插件或代碼生成。
在瀏覽器中通過 WebAssembly 執行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行。該代碼具有沙盒提供的所有安全和保護特性。這有助于防止客戶端計算機上的惡意操作。
Blazor 使用編譯為 WebAssembly 模塊的 .NET 運行時，該模塊隨應用一起下載。該模塊可執行 Blazor 應用中包含的 .NET Standard 代碼。
話外音：首次應用訪問時下載量比較大，影響性能，這可能是最大的缺點。但它支持離線運行。
Blazor WebAssembly 應用僅限于執行該應用的瀏覽器的功能，但該應用可以通過 JavaScript 互操作訪問完整的瀏覽器功能。
最后，需要注意的是，Blazor WebAssembly當前只支持以下瀏覽器：
Microsoft Edge
Google Chrome
Mozilla Firefox
Apple Safa
如何選擇Blazor兩種模式？
微軟在官方文檔中也給出了如何抉擇何時使用Blazor：
Blazor 是一種非常棒的用戶界面框架，適用于已熟悉 .NET 并且希望獲得用于設計和交付基于 HTML 的應用程序的各種選項的開發人員。綜合上述準則，決定在下一個應用程序中使用 Blazor WebAssembly 還是 Blazor Server 時，請考慮下表：
Blazor和主流前端框架如何選擇？
這里引用葉影大佬的文章，本節下文中的我均指代葉影。
說到Blazor，必然會有人拿它跟現有廣泛應用的前端三大JS框架（React/Vue/Angular）對比，我也闡述一下個人觀點。
首先，Blazor在框架設計上并沒有閉門造車。在使用Blazor的過程中，可以充分感受到Blazor和當前主流前端技術的聯系：
組件式開發的范式，推薦以組件的形式作為頁面基本的UI元素
在html模板中，部分C#關鍵詞充當了類似“指令”的角色。例如@if和ng-if, @for和vue-for等等
html/css/code(JS/C#)的分離和組合。Blazor里每個頁面既可以拆分成MyPage.razor（html模板文件）,MyPage.razor.cs（C#代碼文件）和MyPage.razor.css（樣式文件）三部分，也可以將三者統一寫到MyPage.razor文件里。
依賴注入。有過Angular開發經驗的開發者，應該會對此深有體會。
其次，Blazor保留了C#和JS之間的互操作性。也就是說，Blazor既理所當然地利用了.NET現有的生態，也兼容更加繁榮的JS生態。這樣開放的思路，給了Blazor開源社區非常大的發展空間，比如很多早先由原生JS編寫的圖表開源項目，可以以相對較低的成本遷移到Blazor上來；又比如可以使用Blazor封裝三大框架已有的組件，或者原生組件（播放器等）。
因此，Blazor和前端三大框架之間，的確有相當一部分的功能其實可以互相取代。然而Blazor的目的，不是為了取代三大框架；從現狀來看，甚至連競爭的地位都談不上。Blazor能吸引的最主要人群，是.NET開發者，它給了開發者完全以C#作為主要語言實現全棧開發的機會。尤其是，前后端可以共享包含數據類型和邏輯模塊的C#代碼，這一優勢只有C#全棧開發者才能深切體會到。例如，對于后端出身的C#開發者，在前后端分離的環境下，以往更偏愛設計模式上與后端更相近的Angular；如今Blazor已逐漸成熟，可以“橫刀奪愛”了。
如上所說，Blazor并不能讓三大框架的絕大多數JS開發者產生興趣，更無法與當下繁榮的JS生態競爭。另外，在IE及其他一些老舊版本的瀏覽器仍未被完全淘汰的當下，為了保證頁面的普適和兼容，Blazor自然不會被大部分人看重。但作為基于Web Assembly的前端框架，它依然還是特別的：WASM的普及和發展，一定會利及Blazor，使其在未來有更大的發展空間。這里舉一個即將實現的例子：由于WASM可以在非Web環境下運行，那么Blazor將來也可以用于開發運行在非Web環境下的UI程序，這在官方的計劃中已經提及——Blazor Web Assembly MAUI。
上文出處：https://zhuanlan.zhihu.com/p/386150142，作者：葉影。
小結
基于Blaozr的特點，我們認為它應當是.NET技術棧的發團隊開發企業級信息管理系統的首選框架，特別是對于傳統行業的數字化IT團隊。
例如Edison所在的工業制造行業的IT團隊，受限于團隊規模和人員水平，不能像互聯網公司那樣搞純粹的大規模前后端獨立團隊，對性能的要求也不會有互聯網大促的要求那么高，此外最重要的是每個人的職責除了開發可能還兼顧運維和一定程度的需求梳理，因此利用已掌握的技術棧實現端到端的業務需求，將精力更多放到與業務的融合 和 微服務API邏輯的編寫 是更好的選擇。
最后，我想說：對傳統行業的數字化轉型來說，只有適合的技術，沒有最好的技術。
下一篇，就讓我們開始寫第一個Blazor應用程序吧！
參考資料
知乎問答，葉影，https://zhuanlan.zhihu.com/p/386150142
Microsoft Docs，《使用Blazor生成Web應用》
年終總結：Edison的2021年終總結
數字化轉型：我在傳統企業做數字化轉型
C#刷題：C#刷劍指Offer算法題系列文章目錄
.NET面試：.NET開發面試知識體系
.NET大會：2020年中國.NET開發者大會PDF資料
