本文主要分享我建立 Ant Design of Blazor 專案的心路歷程，以及文末有一個 Blazor 線上分享預告。

Blazor WebAssembly 來了！

Blazor 這個新推出的前端 Web 框架，想必是去年 .NET Core 3.0 釋出時才進入 .NET 開發者的視線的。但其實，那時釋出的是服務端託管版，而真正具有跨時代意義的，是即將在今年5月釋出的 WebAssembly 託管版。

我早在兩年前，2017年底，就已經在 Steve Sanderson 的一篇部落格中看到這個能完全執行在瀏覽器的前端框架。那時我還是個只會 vue 和一點 Angular 的年輕人，看到只用 C# 就能寫一樣的單頁應用，哪能經得住這種激動。那時就很期待能快點正式釋出。後來真的被納入 AspNetCore 專案的一部分，不斷髮展完善。沒想到最後會是服務端託管版本先發布，而一直髮展了接近3年的 WebAssembly 版本，也終於將在今年5月正式釋出！

發展至今，Blazor 已經從通過 SignalR 實現雙向繫結的服務端託管模式、到通過 WebAssembly 在瀏覽器上執行 .NET 執行時，再到現在還實現了 PWA、移動端原生控制元件繫結等技術，Blazor 在未正式釋出時就已經有如此多的功能，可見 ASP.NET 團隊和整個社群在 Blazor 上付出了有多大的精力、誠意與期待。ASP.NET 團隊還有一系列的開發計劃，今年底預計還會發布基於原生UI渲染系統的預覽版本。

也就是說，Blazor 目前還是前端 Web 框架，但是等到了明年，就會成為一個跨裝置平臺的客戶端框架了！

Blazor 現狀

那麼，現在我們就能馬上用起來了嗎？

能，也不能，這取決於你想怎麼用。如果像官方給出的開發模板那樣，使用 Bootstrap 作為樣式庫，而自己實現所有互動效果的話，完全可以用起來了。但是，如果希望有更具互動性更美觀的元件庫，能拿來就用，快速實現 UI 需求的話，能選擇的元件庫還不多，在 Awesome Blazor 列表中，完成度較高的開源的元件庫，最好的就有 Material Design 的實現 MatBlazor，其他的基於Bootstrap 的，大多是靠JS實現互動，Blaozr只是渲染最基本的一個Html標籤。再者還有收費的 Telerik UI、Radzen.Blazor 等等……國內還有好幾個原來做 WPF、MVC元件的廠商也開始了Blazor元件的販賣……

這種形勢，就等於是手上只有一個 angluar-cli，是能建立空白的元件，但離搭建出高水準的UI元件就還差十萬八千里了。那麼，該讓誰來填補元件庫的空白呢？我們參考一下已有的前端框架吧。

為什麼想做 Blazor 元件庫

目前我們用在專案中的前端框架元件庫，能數出名的 Ant Design、ElementUI、iView、Vuetify 莫不是依靠開源社群的力量打造出來的。所以，Blazor 的元件庫也需要靠開源社群貢獻！

那我們怎麼做 Blazor 的元件庫呢？

現代的前端元件庫大體上可以分兩個部分，一是設計語言與理論，二是具體框架實現。設計語言與理論更多地是 UI/UX 方面的設計。對我來說，最喜歡的設計以此是微軟的 Fluent Design、谷歌的 Material Design、再到螞蟻的 Ant Design。而具體框架實現就是由 React、Angular、Vue 等框架的實現了。

經過幾年來的實踐，還有對開源社群的觀察，分別用過 Bootstrap、iView、Material、PrimeNG 等元件庫之後，最終還是覺得 Ant Design 在 UI 設計、元件功能和實用性、專案工程、社群活躍度等方面總體上都做得很好。作為一個開源專案， 2019 年 7 月，Ant Design的 Github star 數超過 Material UI，成為全球 star 數最高的 React 元件庫專案。

還翻到篇文章，螞蟻UED接受採訪時說：

選擇 Design 這個域名，是期待我們能將設計價值觀、原則和模式逐步傳承下去，因為前端框架、設計風格都會過時，antd （Ant Design of React：用 React 前端框架實現的 Ant Design）一定會被淘汰。但如果我們有 Ant Design ，下個潮流來的時候，我們能快速搭建新的 Ant Design of XXX。非常感動的是，除了 antd，我們已經有 10+ 不同前端框架實現的 Ant Design。 我們的 Design 夢得到了真正的延續。

—— 螞蟻UED

於是一語成讖，WebAssembly 這一潮流來了，Ant Design of Blazor 應運而生。

我是如何做 Ant Design of Blazor

與 Ant Design 官方一致

Ant Design of Blazor （以下簡稱 AntBlazor）從一開始我就定位在與官方 React 實現的程式碼倉庫同規模的專案，並參考它的其他實現，如 NG-ZORRO、ant-design-vue 是如何做另一個框架的實現的。

• 參考 ant-design-vue 的命名，我把 Blazor 倉庫名改為 ant-design-blazor。
• 參考 NG-ZORRO 的 logo 改編，我把 Blazor 官網的 logo 摳下來，也把 Ant Design 的 logo 挖空並旋轉 -45°，把 Blazor logo 填上並修改顏色。
• 參考 NG-ZORRO 的樣式同步機器人，我也自己寫了樣式同步的 Github Action，定時檢查 ant-design 是否有新版本釋出，當有新版本時自動提交PR。
• 參考 ant-design 寫了 README 和 demo 文件。
• 參考 NG-ZORRO，使用 Angular 的 commit lints。
• 為了專案工程質量，使用 TS 編寫互操作指令碼，編譯指令碼都是開源的，對外部貢獻者儘量友好，而不是像已有的幾個 Blazor 元件庫那樣只給出混淆後的 js、css。
• 還有一些在文件構建時衍生出的副產品，如約定式路由、元件渲染服務等。

在為了與官方高度一致上的努力，還會繼續。希望有一天能在豐富 Blazor 生態的同時，還能成為被 Ant Design 生態認可的框架實現，能成為他們 Design 夢的一個延續。

發起 Blazor 中文社群

對與社群來說，Blazor 還是新鮮事物，就算髮布半年了，真正有在專案中運用的還是極少數。因此我建了個微信群，希望對 Blazor 真有興趣的朋友加入，為了發廣告的就免了。想加入，可找張隊幫忙邀請，他加的人多