本文主要分享我創(chuàng)建 Ant Design of Blazor 項目的心路歷程，已經(jīng)文末有一個 Blazor 線上分享預告。

Blazor WebAssembly 來了！

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

我早在兩年前，2017年底，就已經(jīng)在 Steve Sanderson 的一篇博客中看到這個能完全運行在瀏覽器的前端框架。那時我還是個只會 vue 和一點 Angular 的年輕人，看到只用 C# 就能寫一樣的單頁應用，哪能經(jīng)得住這種激動。那時就很期待能快點正式發(fā)布。后來真的被納入 AspNetCore 項目的一部分，不斷發(fā)展完善。沒想到最后會是服務端托管版本先發(fā)布，而一直發(fā)展了接近3年的 WebAssembly 版本，也終于將在今年5月正式發(fā)布！

發(fā)展至今，Blazor 已經(jīng)從通過 SignalR 實現(xiàn)雙向綁定的服務端托管模式、到通過 WebAssembly 在瀏覽器上運行 .NET 運行時，再到現(xiàn)在還實現(xiàn)了 PWA、移動端原生控件綁定等技術，Blazor 在未正式發(fā)布時就已經(jīng)有如此多的功能，可見 ASP.NET 團隊和整個社區(qū)在 Blazor 上付出了有多大的精力、誠意與期待。ASP.NET 團隊還有一系列的開發(fā)計劃，今年底預計還會發(fā)布基于原生UI渲染系統(tǒng)的預覽版本。

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

Blazor 現(xiàn)狀

那么，現(xiàn)在我們就能馬上用起來了嗎？

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

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

為什么想做 Blazor 組件庫

目前我們用在項目中的前端框架組件庫，能數(shù)出名的 Ant Design、ElementUI、iView、Vuetify 莫不是依靠開源社區(qū)的力量打造出來的。所以，Blazor 的組件庫也需要靠開源社區(qū)貢獻！

那我們怎么做 Blazor 的組件庫呢？

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

經(jīng)過幾年來的實踐，還有對開源社區(qū)的觀察，分別用過 Bootstrap、iView、Material、PrimeNG 等組件庫之后，最終還是覺得 Ant Design 在 UI 設計、組件功能和實用性、項目工程、社區(qū)活躍度等方面總體上都做得很好。作為一個開源項目， 2019 年 7 月，Ant Design的 Github star 數(shù)超過 Material UI，成為全球 star 數(shù)最高的 React 組件庫項目。

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

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

—— 螞蟻UED

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

我如何做 Ant Design of Blazor

與 Ant Design 官方一致

Ant Design of Blazor （以下簡稱 AntBlazor）從一開始我就定位在與官方 React 實現(xiàn)的代碼倉庫同規(guī)模的項目，并參考它的其他實現(xiàn)，如 NG-ZORRO、ant-design-vue 是如何做另一個框架的實現(xiàn)的。

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

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

發(fā)起 Blazor 中文社區(qū)

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

當然，社區(qū)運營不是拉個群就完成的，還需要定期地舉辦線上線下的分享，還有邀請不同領域的大佬一起交流。目前來自前端圈的于航老師和敖天羽大大也被邀請進來了。

制定開發(fā)路線

在今年年中，我們打算能發(fā)布第一個版本 0.1.0，其中完成以下開發(fā)項：

• 基本實現(xiàn) Ant Design 組件
• 組件的獨立發(fā)布腳本
• 完整文檔的構建腳本

如果進展順利，在年末 .NET 5 發(fā)布時，我們能發(fā)布生產(chǎn)可用的 1.0 版。

尋找貢獻者

要實現(xiàn)這些目標，光靠我一個人是不行的，我需要在社區(qū)中尋找到其他開發(fā)者一起貢獻這個項目。在社區(qū)中，目前已經(jīng)為 AntBlazor 項目邀請到幾個開發(fā)者參與了代碼貢獻，并希望有更多對 Ant Design 和 Blazor 有興趣的開源愛好者加入。特別是希望能有企業(yè)用戶在有需求的情況下慷慨貢獻。

我們歡迎感興趣的前端開發(fā)者加入，Blazor 是一個完完全全的前端框架，我們在做的也是前端組件庫，是十分需要與感激有前端開發(fā)者加入到我們，推動 Blazor 在前端的發(fā)展。

我能做的是完善開發(fā)流程和引入一些好用的工具，盡量讓社區(qū)貢獻更方便。

開展技術分享

考慮到很多朋友還不太了解 Blazor，因此我會在社區(qū)中不定期舉辦分享和培訓。會找 Microsoft Reactor 的老師幫忙安排場地，也會在線上舉辦直播會議，給大家分享一下 Blazor 與參與開源項目的知識，讓他們能更好地入手給 AntBlazor 提交代碼。

在本周日（即3月21日）下午，我將在釘釘發(fā)起直播會議，講解 Blazor 的官方文檔以及 ant-design-blazor 的項目結構以及示范寫 Ant Design 組件。釘釘群入口就是ant-design-blazor 項目README最下面的二維碼，大家掃碼之前記得點個 Star！

項目地址: https://github.com/ElderJames/ant-design-blazor

小聲地拉一下贊助：為了加載速度，我把文檔站點部署在了Gitee上。但是Gitee需要收費的專業(yè)版才能自動更新和自定義域名，年費99元…如果能收到捐贈，我會在項目README中放上用戶頭像，以及公示使用情況。點下面的贊賞就好，記得備注 Github Account。

參考：

• 專訪螞蟻金服體驗技術UED：Ant Design希望成為世界級設計體系
• https://zhuanlan.zhihu.com/p/110863773