1. 程式人生 > >面試官:你剛說你喜歡研究新技術,那麼請說說你對 Blazor 的瞭解

面試官:你剛說你喜歡研究新技術,那麼請說說你對 Blazor 的瞭解

閱讀本文大概需要 1.5 分鐘。

最近在幾個微信 .NET 交流群裡大家討論比較頻繁的話題就是這幾天自己的面試經歷。 面試官:“你剛說你喜歡研究新技術,那麼你對 Blazor 瞭解多少?”。 作為一位專注於 .NET 開發的軟體工程師,你好意思說你對 Blazor 一點也不解嗎?.NET 新技術也就是那麼幾個,連微軟最近在逛推的 Blazor 你都不瞭解,你好意思說你喜歡研究新技術? 講真,確實有很多童鞋對 Blazor 還不瞭解,平時埋頭寫程式碼改 Bug,哪有時間去研究 Blazor,再說這種玩意兒公司會不會採用還是個很大疑問呢。是這個理,但如果等你的公司(國內使用了.NET 技術的公司)都開始使用 Blazor 了,Blazor 還能算是新技術嗎?出於真正對技術的興趣和熱愛,對於新技術,有人會主動地去了解(不一定要研究得很深),而不是等到需要用的時候再去了解。至少他們會知道新技術有哪些優點,在公司技術選型上就可以給到自己的意見甚至推廣新技術的使用,這可能就是他們和普通程式設計師拉開差距的原因之一。 不管你是真對 Blazor 感興趣,還是隻是為了應付面試,作為 .NET 開發者,你沒用過 Blazor,至少應該瞭解一下吧,哪怕是花個一兩分鐘看看這篇文章的介紹。 ## 使用 C# 實現 Web 互動式 UI ![ ](http://qn-tc.geekgist.com/202006/25142708) 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 程式碼: ```cs @page "/counter"

Counter

Current count: @currentCount

@code { private int currentCount = 0; private void IncrementCount() { currentCount++; } } ``` ## 在 WebAssembly 或伺服器端執行 ![ ](http://qn-tc.geekgist.com/202006/25144024) 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 標準 ![ ](http://qn-tc.geekgist.com/202006/25142434) 通常是為了使用統一的程式語言或使用統一的標準,常見的做法是將一種程式語言編寫的程式碼轉換為另一種程式語言,比如將 TypeScript 編寫程式碼轉換成 JavaScript 以便在瀏覽器中執行。而 Blazor 使用的是開放的 Web 標準,不需要額外的外掛或程式碼語言轉換。Blazor 可以在所有主流的 Web 瀏覽器中工作,包括移動端瀏覽器。 在客戶端執行 Blazor 程式碼和 JavaScript 框架一樣是在安全的沙箱中執行的,在基於開放的 Web 標準基礎上,Blazor 具有伺服器端程式碼的靈活性,比如直接連線資料庫。 ## 和 JavaScript 互動 ![ ](http://qn-tc.geekgist.com/202006/25142527) 在 Blazor 應用中,你可以在 C# 程式碼中呼叫 JavaScript 程式碼,也可以在 JavaScript 程式碼中呼叫 C# 程式碼,兩者可以很容易實現互動操作。好處是,在使用 C# 編寫業務程式碼時,你依然可以繼續使用現有龐大的 JavaScript 庫生態系統。當使用伺服器端執行程式碼時,Blazor 會負責在客戶端使用 JavaScript 無縫呼叫 C# 程式碼。 下面是一個 JavaScrit 呼叫 C# 的示例[2]
。 先使用 JSInvokable 特性標註一個 C# 方法為允許 JavaScript 呼叫: ```cs @code { [JSInvokable] public static Task ReturnArrayAsync() { return Task.FromResult(new int[] { 1, 2, 3 }); } } ``` 然後在 JavaScript 程式碼中呼叫 C# 程式碼: ```js 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.