快速了解 ASP.NET Core Blazor
最近在幾個(gè)微信 .NET 交流群里大家討論比較頻繁的話題就是這幾天自己的面試經(jīng)歷。
面試官：“你剛說(shuō)你喜歡研究新技術(shù)，那你有了解過(guò) Blazor 嗎？”
作為一位專注于 .NET 開(kāi)發(fā)的軟件工程師，你好意思說(shuō)你對(duì) Blazor 一點(diǎn)也不解嗎？.NET 新技術(shù)也就是那么幾個(gè)，連微軟最近在逛推的 Blazor 你都不了解，你好意思說(shuō)你喜歡研究新技術(shù)？
講真，確實(shí)有很多童鞋對(duì) Blazor 還不了解，平時(shí)埋頭寫(xiě)代碼改 Bug，哪有時(shí)間去研究 Blazor，再說(shuō)這種玩意兒公司會(huì)不會(huì)采用還是個(gè)很大疑問(wèn)呢。是這個(gè)理，但如果等你的公司（國(guó)內(nèi)使用了.NET 技術(shù)的公司）都開(kāi)始使用 Blazor 了，Blazor 還能算是新技術(shù)嗎？出于真正對(duì)技術(shù)的興趣和熱愛(ài)，對(duì)于新技術(shù)，有人會(huì)主動(dòng)地去了解（不一定要研究得很深），而不是等到需要用的時(shí)候再去了解。至少他們會(huì)知道新技術(shù)有哪些優(yōu)點(diǎn)，在公司技術(shù)選型上就可以給到自己的意見(jiàn)甚至推廣新技術(shù)的使用，這可能就是他們和普通程序員拉開(kāi)差距的原因之一。
不管你是真對(duì) Blazor 感興趣，還是只是為了應(yīng)付面試，作為 .NET 開(kāi)發(fā)者，沒(méi)用過(guò) Blazor 很正常，但至少應(yīng)該了解一下，哪怕是花個(gè)一兩分鐘看看這篇文章的介紹。
使用 C# 實(shí)現(xiàn) Web 交互式 UI
Blazor 允許你使用 C# 來(lái)實(shí)現(xiàn) Web 交互式 UI，而不需要使用 JavaScript。盡管 JavaScript 的生態(tài)很強(qiáng)大，但這種弱類型語(yǔ)言在業(yè)務(wù)邏輯比較復(fù)雜的大型 Web 開(kāi)發(fā)上還是存在較大的缺陷。當(dāng)然，經(jīng)過(guò)幾年的發(fā)展 JavaScript 的弱類型問(wèn)題可以通過(guò)工程手段來(lái)解決，甚至使用 TypeScript 來(lái)替代，但在實(shí)現(xiàn)可重用組件上還是有諸多的不理想。
Blazor 應(yīng)用可以使用 C#、HTML 和 CSS 實(shí)現(xiàn)可重用 Web UI 組件，客戶端和服務(wù)器代碼都用 C# 編寫(xiě)的，允許你共享代碼和庫(kù)。Blazor 是 ASP.NET Core 的一個(gè)新特性，所以可以很好的集成到 ASP.NET Core MVC/Razor Pages 應(yīng)用中。
下面是一段來(lái)自于模板的 Blazor 代碼：
@page "/counter"Counter
Current count: @currentCount
@code {
private?int currentCount = 0;
private?void?IncrementCount()
{
currentCount++;
}
}
在 WebAssembly 或服務(wù)器端運(yùn)行
Blazor 支持兩種運(yùn)行方式，一是在客戶端使用 WebAssembly 運(yùn)行，二是在服務(wù)器端運(yùn)行直接渲染到瀏覽器。
Blazor 可以使用 WebAssembly 直接在瀏覽器中運(yùn)行客戶端 C# 代碼，正因?yàn)樗沁\(yùn)行在 WebAssembly 上的 .NET 程序，所以客戶端也可以重用服務(wù)器端的代碼和庫(kù)。
即使不使用 WebAssembly，Blazor 也可以在服務(wù)器端運(yùn)行客戶端的業(yè)務(wù)邏輯?？蛻舳?UI 事件使用實(shí)時(shí)消息框架 SignalR 發(fā)送回服務(wù)器，一旦執(zhí)行完成，所需的 UI 更改將發(fā)送到客戶端渲染到 DOM 中。
目前主流開(kāi)發(fā)單頁(yè)應(yīng)用（SPA）使用 Vue 或 React 的很多，但要實(shí)現(xiàn)服務(wù)器端渲染（SSR），還是挺麻煩的，盡管有現(xiàn)成的像 Next.js 或 Nuxt.js 這樣的框架可以使用，但由于它們更新迭代比較快，依賴的 npm 包多而雜，后期維護(hù)和升級(jí)成本也很高。所以從 SSR 支持這一點(diǎn)來(lái)講，Blazor 應(yīng)用還是有明顯優(yōu)勢(shì)的。
基于開(kāi)放的 Web 標(biāo)準(zhǔn)
為了使用統(tǒng)一的編程語(yǔ)言或使用統(tǒng)一的標(biāo)準(zhǔn)，常見(jiàn)的做法是將一種編程語(yǔ)言編寫(xiě)的代碼轉(zhuǎn)換為另一種編程語(yǔ)言，比如將 TypeScript 編寫(xiě)代碼轉(zhuǎn)換成 JavaScript 以便在瀏覽器中運(yùn)行。而 Blazor 使用的是開(kāi)放的 Web 標(biāo)準(zhǔn)，不需要額外的插件或代碼語(yǔ)言轉(zhuǎn)換。Blazor 可以在所有主流的 Web 瀏覽器中工作，包括移動(dòng)端瀏覽器。
在客戶端運(yùn)行 Blazor 代碼和 JavaScript 框架一樣是在安全的沙箱中執(zhí)行的，在基于開(kāi)放的 Web 標(biāo)準(zhǔn)基礎(chǔ)上，Blazor 具有服務(wù)器端代碼的靈活性，比如直接連接數(shù)據(jù)庫(kù)。
和 JavaScript 交互
在 Blazor 應(yīng)用中，你可以在 C# 代碼中調(diào)用 JavaScript 代碼，也可以在 JavaScript 代碼中調(diào)用 C# 代碼，兩者可以很容易實(shí)現(xiàn)交互操作。好處是，在使用 C# 編寫(xiě)業(yè)務(wù)代碼時(shí)，你依然可以繼續(xù)使用現(xiàn)有龐大的 JavaScript 庫(kù)生態(tài)系統(tǒng)。當(dāng)使用服務(wù)器端運(yùn)行代碼時(shí)，Blazor 會(huì)負(fù)責(zé)在客戶端使用 JavaScript 無(wú)縫調(diào)用 C# 代碼。
下面是一個(gè) JavaScrit 調(diào)用 C# 的示例。
先使用 JSInvokable 特性標(biāo)注一個(gè) C# 方法為允許 JavaScript 調(diào)用：
@code {
[JSInvokable]
public?static Task<int[]> ReturnArrayAsync()
{
return Task.FromResult(new?int[] { 1, 2, 3 });
}
}
然后在 JavaScript 代碼中調(diào)用 C# 代碼：
window.exampleJsFunctions = {
...
returnArrayAsyncJs: function () {
DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
.then(data => {
data.push(4);
console.log(data);
});
},
...
};
其它
對(duì)我來(lái)說(shuō) Blazor 最吸引的優(yōu)點(diǎn)是前后端代碼的共用以及組件的重用。通過(guò) nuget 管理和引用共用組件和庫(kù)不僅比 npm 包管理方便，而且體積也小很多。
Blazor 的生態(tài)也正逐步發(fā)展起來(lái)了，雖然還沒(méi)有聽(tīng)說(shuō)哪個(gè)大公司在用，但 Blazor 的理念是未來(lái)趨勢(shì)，值得你花點(diǎn)時(shí)間了解和研究一下。
-
精致碼農(nóng)
帶你洞悉編程與架構(gòu)
↑長(zhǎng)按圖片識(shí)別二維碼關(guān)注，不要錯(cuò)過(guò)網(wǎng)海相遇的緣分