最近在幾個微信 .NET 交流群里大家討論比較頻繁的話題就是這幾天自己的面試經(jīng)歷。

面試官：“你剛說你喜歡研究新技術，那你有了解過 Blazor 嗎？”

作為一位專注于 .NET 開發(fā)的軟件工程師，你好意思說你對 Blazor 一點也不解嗎？.NET 新技術也就是那么幾個，連微軟最近在逛推的 Blazor 你都不了解，你好意思說你喜歡研究新技術？

講真，確實有很多童鞋對 Blazor 還不了解，平時埋頭寫代碼改 Bug，哪有時間去研究 Blazor，再說這種玩意兒公司會不會采用還是個很大疑問呢。是這個理，但如果等你的公司（國內(nèi)使用了.NET 技術的公司）都開始使用 Blazor 了，Blazor 還能算是新技術嗎？出于真正對技術的興趣和熱愛，對于新技術，有人會主動地去了解（不一定要研究得很深），而不是等到需要用的時候再去了解。至少他們會知道新技術有哪些優(yōu)點，在公司技術選型上就可以給到自己的意見甚至推廣新技術的使用，這可能就是他們和普通程序員拉開差距的原因之一。

不管你是真對 Blazor 感興趣，還是只是為了應付面試，作為 .NET 開發(fā)者，沒用過 Blazor 很正常，但至少應該了解一下，哪怕是花個一兩分鐘看看這篇文章的介紹。

使用 C# 實現(xiàn) Web 交互式 UI

Blazor 允許你使用 C# 來實現(xiàn) Web 交互式 UI，而不需要使用 JavaScript。盡管 JavaScript 的生態(tài)很強大，但這種弱類型語言在業(yè)務邏輯比較復雜的大型 Web 開發(fā)上還是存在較大的缺陷。當然，經(jīng)過幾年的發(fā)展 JavaScript 的弱類型問題可以通過工程手段來解決，甚至使用 TypeScript 來替代，但在實現(xiàn)可重用組件上還是有諸多的不理想。

Blazor 應用可以使用 C#、HTML 和 CSS 實現(xiàn)可重用 Web UI 組件，客戶端和服務器代碼都用 C# 編寫的，允許你共享代碼和庫。Blazor 是 ASP.NET Core 的一個新特性，所以可以很好的集成到 ASP.NET Core MVC/Razor Pages 應用中。

下面是一段來自于模板的 Blazor 代碼：

@page "/counter"

Counter


Current count: @currentCount


class="btn btn-primary" @onclick="IncrementCount">Click me

@code {
    private?int currentCount = 0;

    private?void?IncrementCount()
    {
        currentCount++;
    }
}

在 WebAssembly 或服務器端運行

Blazor 支持兩種運行方式，一是在客戶端使用 WebAssembly 運行，二是在服務器端運行直接渲染到瀏覽器。

Blazor 可以使用 WebAssembly 直接在瀏覽器中運行客戶端 C# 代碼，正因為它是運行在 WebAssembly 上的 .NET 程序，所以客戶端也可以重用服務器端的代碼和庫。

即使不使用 WebAssembly，Blazor 也可以在服務器端運行客戶端的業(yè)務邏輯。客戶端 UI 事件使用實時消息框架 SignalR 發(fā)送回服務器，一旦執(zhí)行完成，所需的 UI 更改將發(fā)送到客戶端渲染到 DOM 中。

目前主流開發(fā)單頁應用（SPA）使用 Vue 或 React 的很多，但要實現(xiàn)服務器端渲染（SSR），還是挺麻煩的，盡管有現(xiàn)成的像 Next.js 或 Nuxt.js 這樣的框架可以使用，但由于它們更新迭代比較快，依賴的 npm 包多而雜，后期維護和升級成本也很高。所以從 SSR 支持這一點來講，Blazor 應用還是有明顯優(yōu)勢的。

基于開放的 Web 標準

為了使用統(tǒng)一的編程語言或使用統(tǒng)一的標準，常見的做法是將一種編程語言編寫的代碼轉(zhuǎn)換為另一種編程語言，比如將 TypeScript 編寫代碼轉(zhuǎn)換成 JavaScript 以便在瀏覽器中運行。而 Blazor 使用的是開放的 Web 標準，不需要額外的插件或代碼語言轉(zhuǎn)換。Blazor 可以在所有主流的 Web 瀏覽器中工作，包括移動端瀏覽器。

在客戶端運行 Blazor 代碼和 JavaScript 框架一樣是在安全的沙箱中執(zhí)行的，在基于開放的 Web 標準基礎上，Blazor 具有服務器端代碼的靈活性，比如直接連接數(shù)據(jù)庫。

和 JavaScript 交互

在 Blazor 應用中，你可以在 C# 代碼中調(diào)用 JavaScript 代碼，也可以在 JavaScript 代碼中調(diào)用 C# 代碼，兩者可以很容易實現(xiàn)交互操作。好處是，在使用 C# 編寫業(yè)務代碼時，你依然可以繼續(xù)使用現(xiàn)有龐大的 JavaScript 庫生態(tài)系統(tǒng)。當使用服務器端運行代碼時，Blazor 會負責在客戶端使用 JavaScript 無縫調(diào)用 C# 代碼。

下面是一個 JavaScrit 調(diào)用 C# 的示例。

先使用 JSInvokable 特性標注一個 C# 方法為允許 JavaScript 調(diào)用：

"button"?class="btn btn-primary"
        onclick="exampleJsFunctions.returnArrayAsyncJs()">
    Trigger .NET static method ReturnArrayAsync


@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);
      });
  },
  ...
};

其它

對我來說 Blazor 最吸引的優(yōu)點是前后端代碼的共用以及組件的重用。通過 nuget 管理和引用共用組件和庫不僅比 npm 包管理方便，而且體積也小很多。

Blazor 的生態(tài)也正逐步發(fā)展起來了，雖然還沒有聽說哪個大公司在用，但 Blazor 的理念是未來趨勢，值得你花點時間了解和研究一下。