閱讀本文大概需要 1.5 分鐘。
最近在幾個微信 .NET 交流群里大家討論比較頻繁的話題就是這幾天自己的面試經歷。
面試官：“你剛說你喜歡研究新技術，那麼你對 Blazor 了解多少？”。
作為一位專註於 .NET 開發的軟件工程師，你好意思說你對 Blazor 一點也不解嗎？.NET 新技術也就是那麼幾個，連微軟最近在逛推的 Blazor 你都不了解，你好意思說你喜歡研究新技術？
講真，確實有很多童鞋對 Blazor 還不了解，平時埋頭寫代碼改 Bug，哪有時間去研究 Blazor，再說這種玩意兒公司會不會採用還是個很大疑問呢。是這個理，但如果等你的公司（國內使用了.NET 技術的公司）都開始使用 Blazor 了，Blazor 還能算是新技術嗎？出於真正對技術的興趣和熱愛，對於新技術，有人會主動地去了解（不一定要研究得很深），而不是等到需要用的時候再去了解。至少他們會知道新技術有哪些優點，在公司技術選型上就可以給到自己的意見甚至推廣新技術的使用，這可能就是他們和普通程序員拉開差距的原因之一。
不管你是真對 Blazor 感興趣，還是只是為了應付面試，作為 .NET 開發者，你沒用過 Blazor，至少應該了解一下吧，哪怕是花個一兩分鐘看看這篇文章的介紹。
使用 C# 實現 Web 交互式 UI
Blazor 允許你使用 C# 來實現 Web 交互式 UI，而不需要使用 JavaScript。儘管 JavaScript 的生態很強大，但這種弱類型語言在業務邏輯比較複雜的大型 Web 開發上還是存在較大的缺陷。當然，經過幾年的發展 JavaScript 的弱類型問題可以通過工程手段來解決，甚至使用 TypeScript 來替代，但在實現可重用組件上還是有諸多的不理想。
Blazor 應用可以使用 C#、HTML 和 CSS 實現可重用 Web UI 組件，客戶端和服務器代碼都用 C# 編寫的，允許你共享代碼和庫。Blazor 是 ASP.NET Core 的一個新特性，所以可以很好的集成到 ASP.NET Core MVC/Razor Pages 應用中。
下面是一段來自於模板的 Blazor 代碼：
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount()
{
currentCount++;
}
}
在 WebAssembly 或服務器端運行
Blazor 支持兩種運行方式，一是在客戶端使用 WebAssembly 運行，二是在服務器端運行直接渲染到瀏覽器。
Blazor 可以使用 WebAssembly 直接在瀏覽器中運行客戶端 C# 代碼，正因為它是運行在 WebAssembly 上的 .NET 程序，所以客戶端也可以重用服務器端的代碼和庫。
即使不使用 WebAssembly，Blazor 也可以在服務器端運行客戶端的業務邏輯。客戶端 UI 事件使用實時消息框架 SignalR 發送回服務器，一旦執行完成，所需的 UI 更改將發送到客戶端渲染到 DOM 中。
目前主流開發單頁應用（SPA）使用 Vue 或 React 的很多，但要實現服務器端渲染（SSR），還是挺麻煩的，儘管有現成的像 Next.js 或 Nuxt.js 這樣的框架可以使用，但由於它們更新迭代比較快，依賴的 npm 包多而雜，後期維護和升級成本也很高。所以從 SSR 支持這一點來講，Blazor 應用還是有明顯優勢的。
基於開放的 Web 標準
通常是為了使用統一的編程語言或使用統一的標準，常見的做法是將一種編程語言編寫的代碼轉換為另一種編程語言，比如將 TypeScript 編寫代碼轉換成 JavaScript 以便在瀏覽器中運行。而 Blazor 使用的是開放的 Web 標準，不需要額外的插件或代碼語言轉換。Blazor 可以在所有主流的 Web 瀏覽器中工作，包括移動端瀏覽器。
在客戶端運行 Blazor 代碼和 JavaScript 框架一樣是在安全的沙箱中執行的，在基於開放的 Web 標準基礎上，Blazor 具有服務器端代碼的靈活性，比如直接連接數據庫。
和 JavaScript 交互
在 Blazor 應用中，你可以在 C# 代碼中調用 JavaScript 代碼，也可以在 JavaScript 代碼中調用 C# 代碼，兩者可以很容易實現交互操作。好處是，在使用 C# 編寫業務代碼時，你依然可以繼續使用現有龐大的 JavaScript 庫生態系統。當使用服務器端運行代碼時，Blazor 會負責在客戶端使用 JavaScript 無縫調用 C# 代碼。
下面是一個 JavaScrit 調用 C# 的示例[2]。
先使用 JSInvokable 特性標註一個 C# 方法為允許 JavaScript 調用：
<button type="button" class="btn btn-primary"
onclick="exampleJsFunctions.returnArrayAsyncJs()">
Trigger .NET static method ReturnArrayAsync
</button>
@code {
[JSInvokable]
public static Task<int[]> ReturnArrayAsync()
{
return Task.FromResult(new int[] { 1, 2, 3 });
}
}
然後在 JavaScript 代碼中調用 C# 代碼：
window.exampleJsFunctions = {
...
returnArrayAsyncJs: function () {
DotNet.invokeMethodAsync('BlazorSample', 'ReturnArrayAsync')
.then(data => {
data.push(4);
console.log(data);
});
},
...
};
其它
對我來說 Blazor 最吸引的優點是前後端代碼的共用以及組件的重用。通過 nuget 管理包不僅比 npm 方便，而且體積也小很多。
Blazor 的生態也正逐步發展起來了，雖然還沒有聽說哪個大公司在用，但 Blazor 的理念是未來趨勢，值得你花點時間了解和研究一下。
參考：
[1]. http://dwz.win/EU4
[2]. http://dwz.win/EU3
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※帶您來了解什麼是 USB CONNECTOR ?
※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面
※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!
※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※教你寫出一流的銷售文案?
台灣機車密度是世界之最，造成嚴重的污染問題，電動、綠能機車的開發一直是學者致力的目標。國立成功大學近日整合關鍵技術，研發出以新型氫能燃料與鋰電池做為混合動力的新電動機車「飛馬一號」，首航測試即輕易完成 80 多公里路程，估計實際續航力可達 160 公里。 由成大航太工程學系賴維祥教授帶領的研究團隊，一年半前在經濟部能源局「能源學界科技專案」補助下，開始與銓寶工業、福桑聯合企業進行產學合作，共同研發代號「飛馬一號」氫能電動機車。 成大指出，「飛馬一號」是從銓寶公司提供的電動車改裝而來，除了原有的鋰電池外，研究團隊另外在車後加裝了 3,000 瓦級的燃料電池，以及 2 支容積達 6.8 公升、能儲存 300 大氣壓的儲氫瓶，原理大致與汽車大廠 TOYOTA 年底即將量產的氫氣電動車相同。 「飛馬一號」的動力系統是以新高壓儲存技術填充氫氣，可達傳統方式的 4 倍密度，利用氫能直接啟動燃料電池，再讓燃料電池把電傳給鋰電池，鋰電池的電力則驅動馬達運轉，此一模式可讓鋰電池在行進間同時充電，延長使用壽命。 （Source：）
台北晶華酒店與 BMW 總代理汎德公司首度合作，在酒店停車場設置「BMW i 公共充電站」，為全台第一個五星級飯店「BMW i 公共充電站」，也是 BMW 計畫在各通路設置「BMW i 公共充電站」的首站。 擁有 BMW i3 或 BMW i8 車款車主，不論是否到晶華用餐或是住宿均可免費充電，但要付停車費，第一個小時 300 元，第二個小時 200 元。此外，其他廠牌的電動車，只要插頭符合，同樣適用。晶華表示，晶華麗晶酒店集團旗下晶英酒店包括蘭城晶英及太魯閣晶英酒店正計畫裝設中。 BMW 總代理汎德表示，BMW i3 及 BMW i8 於今年第 2 季起全球開始量產上市，BMW i3 是純電動車，一台售價新台幣 239 萬元起，台灣目前已有 40 至 50 張訂單，BMW i8 是油電混合車，一台售價新台幣 989 萬元，目前約有 30 張訂單，已在陸續交車中。 汎德表示，電動車是未來趨勢，汎德已在全台 BMW 經銷商及服務廠設置充電站，目前已設 28 座，年底會再增 2 座，合計為 30 座，BMW 車主都提供免費充電服務。另與晶華酒店合作，於台北晶華設置 2 座，現已正式啟用。此外，汎德還會與裕隆、台達電洽談合作事宜。 （照片提供：台北晶華酒店）
