| 閱文時長 | | 1.38分鍾 | 字數統計 | | 2218.4字符 |
| 主要內容 | | 1、引言&背景 2、學習過程記錄 3、概念性&底層知識 4、存疑&日后研究 5、聲明與參考資料 | ||
| 『淺嘗輒止·認識Blazor及基礎使用』 | |||
| 編寫人 | | SCscHero | 編寫時間 | | 2021/8/1 AM12:14 |
| 文章類型 | | 系列 | 完成度 | | 已完成 |
| 座右銘 | 每一個偉大的事業，都有一個微不足道的開始。 | ||
一、引言&背景 完成度：100%
a) 學習由來&目標
最近公司內部的技術分享大會提到了Blazor，初步了解到這是個可以使用C#編寫客戶端的技術，個人理解有些類似MVC中的Razor。於是通過微軟官方的學習路徑學習一下，傳送門。本次學習目標主要是了解幾個方面：
- Blazor是什么，為什么會推出專門技術？？能做什么？用在什么場景下？有哪些優劣勢？
- 目前的Blazor哪些公司應用了？未來的發展將如何？
- 我是否有必要深入研究這門技術？這門技術以我的其他技術棧是否可以勝任？
b) 總結&個人片面理解分析
- 從目前初步理解來看，Blazor這門技術與目前三大主流前端框架有許多相似的地方，比如：組件化開發、服務端渲染、Razor等。有一些三大前端框架開發基礎的，對這一套上手一定不會陌生。但博主還是認為，這門技術推出的時間，注定不會掀起風浪，因此學習價值並不大，在之后的有公司真正用起來了，再學習也不遲，一門技術的成熟一定要有一定的生態基礎。
- 目前來看國外生態還是強於國內，但依照目前態勢，還是觀望官方數據吧。
- 學習理念即可，比如C#替代JS，但博主認為這還是技術捆綁，C#更多的是做服務端，客戶端JS才是王者，而且目前的.Neter都具備JS技術棧的開發能力，並有強大的生態，用C#代替JS實在是別扭，因此如果不脫離實際來看，這門技術也是雷聲小雨點小。當然本次學習體驗還是不錯的，如果早推出十年，博主相信還是有機會。
c) 環境准備
- VS2019或VS2022最新版本
- VS Code。
- .Net5 SDK。
二、學習過程記錄 完成度：100%
a) 相關CLI
- 新建一個Blazor應用，名稱為上層文件夾目錄
dotnet new blazor
- 啟動並監聽運行，即修改了代碼會自動響應。
dotnet watch run
- 新建一個組件：頁面、組件等。
dotnet new razorcomponent -n [名稱] -o [類型：Pages等]
b) 完整過程
- 可見目標框架默認選擇的是.Net 5.0，博主用的IDE是VS2019，並不是VS2022，使用VS2022暫未測試，估計可能是.Net 6.0。
- 從目錄結構上來看，包含有.razor格式的文件，也包含有.cshtml格式的文件。看起來讓人覺得就是一個去掉了Controller的純前端的.cshtml的文件改了名字叫Razor。Blazor官方示例的例子，將客戶端的計數器使用了C#實現。沒有使用JS。可見Code實現了類似於Vue的響應式編程的效果。但是不禁讓人疑惑，類似於JS中強大的插件生態，替代了JS，C#又有哪些優勢呢？
- 新建的Blazor應用默認的示例。
三、概念性&底層知識 完成度：100%
1. WebAssembly。
WebAssembly (WASM) 是一種開放的二進制標准。 它用於定義旨在 Web 瀏覽器中運行的程序的可移植代碼格式。 WebAssembly 是一種文本程序集語言，具有專用於實現快速下載和近乎本機性能的精簡二進制格式。
WebAssembly 為 C、C++ 和 Rust 等語言提供了編譯目標。 它設計為與 JavaScript 一起運行，因此兩者可協同工作。 WebAssembly 還可生成可下載和脫機運行的漸進式 Web 應用程序。
2. BlazorWebAssembly。
使用 Blazor WebAssembly，開發人員可以在瀏覽器中運行 .NET 代碼。 它是一種單頁應用框架，使用的是 WebAssembly 開放標准，無需插件或代碼生成。在瀏覽器中通過 WebAssembly 執行的 .NET 代碼在瀏覽器的 JavaScript 沙盒中運行。 該代碼具有沙盒提供的所有安全和保護特性。 這有助於防止客戶端計算機上的惡意操作。
3. Blazor的兩種模式，即服務器渲染。官方的說法如下：
Blazor 服務器在 ASP.NET Core 應用中添加了對在服務器上托管 Razor 組件的支持。 可通過 SignalR 連接處理 UI 更新。運行時停留在服務器上並處理：
- 執行應用的 C# 代碼。
- 將 UI 事件從瀏覽器發送到服務器。
- 將 UI 更新應用於服務器發送回的已呈現的組件。
- Blazor 服務器用於與瀏覽器通信的連接還用於處理 JavaScript 互操作調用。
----來自《微軟官方文檔-什么是Blazor》[1]
4. Blazor Web 應用使用哪個運行時？
瀏覽器提供的運行時
使用 Web 應用部署的 .NET 運行時
Blazor 應用在瀏覽器中運行或在 .NET 5 運行時上的服務器上運行
使用 Web 應用部署的 JavaScript 運行時
5. 如何定義 Blazor UI？
作為混合使用 HTML 和 C# 的 Razor 頁面
Razor 文件定義了構成應用中部分 UI 的組件
作為使用 XML 的 XAML 頁面
使用 .NET Standard 庫中定義的 C#
四、存疑&日后研究 完成度：100%
- 調試方式，目前使用的是CLI啟動，F12找到Source沒有JS相關的代碼，不知道如何調試。另外可以看到Blazor引用了Blazor.server.js，底層也是相等於在用JS。
- 與幾大主流WebUI的優劣勢，如React、Angular、Vue等。目前看了幾篇文章，說是和GO等Web技術相比，性能弱但開發效率高。
五、聲明與參考資料 完成度：100%
原創博文，未經許可請勿轉載。
如有幫助，歡迎點贊、收藏、關注。如有問題，請評論留言！如需與博主聯系的，直接博客私信SCscHero即可。