本文主要分享我創建 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 真有興趣的朋友加入，為了發廣告的就免了。想加入，可找張隊幫忙邀請，他加的人多😂。
當然，社區運營不是拉個群就完成的，還需要定期地舉辦線上線下的分享，還有邀請不同領域的大佬一起交流。目前來自前端圈的於航老師和敖天羽大大也被邀請進來了。
制定開發路線
在今年年中，我們打算能發布第一個版本 0.1.0，其中完成以下開發項：
- 基本實現 Ant Design 組件
- 組件的獨立發布腳本
- 完整文檔的構建腳本
如果進展順利，在年末 .NET 5 發布時，我們能發布生產可用的 1.0 版。
尋找貢獻者
要實現這些目標，光靠我一個人是不行的，我需要在社區中尋找到其他開發者一起貢獻這個項目。在社區中，目前已經為 AntBlazor 項目邀請到幾個開發者參與了代碼貢獻，並希望有更多對 Ant Design 和 Blazor 有興趣的開源愛好者加入。特別是希望能有企業用戶在有需求的情況下慷慨貢獻。
我們歡迎感興趣的前端開發者加入，Blazor 是一個完完全全的前端框架，我們在做的也是前端組件庫，是十分需要與感激有前端開發者加入到我們，推動 Blazor 在前端的發展。
我能做的是完善開發流程和引入一些好用的工具，盡量讓社區貢獻更方便。
開展技術分享
考慮到很多朋友還不太了解 Blazor，因此我會在社區中不定期舉辦分享和培訓。會找 Microsoft Reactor 的老師幫忙安排場地，也會在線上舉辦直播會議，給大家分享一下 Blazor 與參與開源項目的知識，讓他們能更好地入手給 AntBlazor 提交代碼。
在本周日（即3月21日）下午，我將在釘釘發起直播會議 直播已介紹，可進群點擊回看，下期再見！講解 Blazor 的官方文檔以及 ant-design-blazor 的項目結構以及示范寫 Ant Design 組件。釘釘群入口就是ant-design-blazor 項目README最下面的二維碼，大家掃碼之前記得點個 Star！
項目地址: https://github.com/ElderJames/ant-design-blazor 
參考：