如何用 Blazor 实现 Ant Design 组件库？
本文主要分享我創(chuàng)建 Ant Design of Blazor 項(xiàng)目的心路歷程，已經(jīng)文末有一個(gè) Blazor 線上分享預(yù)告。
Blazor WebAssembly 來(lái)了！
Blazor 這個(gè)新推出的前端 Web 框架，想必是去年 .NET Core 3.0 發(fā)布時(shí)才進(jìn)入 .NET 開(kāi)發(fā)者的視線的。但其實(shí)，那時(shí)發(fā)布的是服務(wù)端托管版，而真正具有跨時(shí)代意義的，是即將在今年5月發(fā)布的 WebAssembly 托管版。
我早在兩年前，2017年底，就已經(jīng)在 Steve Sanderson 的一篇博客中看到這個(gè)能完全運(yùn)行在瀏覽器的前端框架。那時(shí)我還是個(gè)只會(huì) vue 和一點(diǎn) Angular 的年輕人，看到只用 C# 就能寫(xiě)一樣的單頁(yè)應(yīng)用，哪能經(jīng)得住這種激動(dòng)。那時(shí)就很期待能快點(diǎn)正式發(fā)布。后來(lái)真的被納入 AspNetCore 項(xiàng)目的一部分，不斷發(fā)展完善。沒(méi)想到最后會(huì)是服務(wù)端托管版本先發(fā)布，而一直發(fā)展了接近3年的 WebAssembly 版本，也終于將在今年5月正式發(fā)布！
發(fā)展至今，Blazor 已經(jīng)從通過(guò) SignalR 實(shí)現(xiàn)雙向綁定的服務(wù)端托管模式、到通過(guò) WebAssembly 在瀏覽器上運(yùn)行 .NET 運(yùn)行時(shí)，再到現(xiàn)在還實(shí)現(xiàn)了 PWA、移動(dòng)端原生控件綁定等技術(shù)，Blazor 在未正式發(fā)布時(shí)就已經(jīng)有如此多的功能，可見(jiàn) ASP.NET 團(tuán)隊(duì)和整個(gè)社區(qū)在 Blazor 上付出了有多大的精力、誠(chéng)意與期待。ASP.NET 團(tuán)隊(duì)還有一系列的開(kāi)發(fā)計(jì)劃，今年底預(yù)計(jì)還會(huì)發(fā)布基于原生UI渲染系統(tǒng)的預(yù)覽版本。
也就是說(shuō)，Blazor 目前還是前端 Web 框架，但是等到了明年，就會(huì)成為一個(gè)跨設(shè)備平臺(tái)的客戶(hù)端框架了！
Blazor 現(xiàn)狀
那么，現(xiàn)在我們就能馬上用起來(lái)了嗎？
能，也不能，這取決于你想怎么用。如果像官方給出的開(kāi)發(fā)模板那樣，使用 Bootstrap 作為樣式庫(kù)，而自己實(shí)現(xiàn)所有交互效果的話，完全可以用起來(lái)了。但是，如果希望有更具交互性更美觀的組件庫(kù)，能拿來(lái)就用，快速實(shí)現(xiàn) UI 需求的話，能選擇的組件庫(kù)還不多，在 Awesome Blazor 列表中，完成度較高的開(kāi)源的組件庫(kù)，最好的就有 Material Design 的實(shí)現(xiàn) MatBlazor，其他的基于Bootstrap 的，大多是靠JS實(shí)現(xiàn)交互，Blaozr只是渲染最基本的一個(gè)Html標(biāo)簽。再者還有收費(fèi)的 Telerik UI、Radzen.Blazor 等等……國(guó)內(nèi)還有好幾個(gè)原來(lái)做 WPF、MVC組件的廠商也開(kāi)始了Blazor組件的販賣(mài)……
這種形勢(shì)，就等于是手上只有一個(gè) angluar-cli，是能創(chuàng)建空白的組件，但離搭建出高水準(zhǔn)的UI組件就還差十萬(wàn)八千里了。那么，該讓誰(shuí)來(lái)填補(bǔ)組件庫(kù)的空白呢？我們參考一下已有的前端框架吧。
為什么想做 Blazor 組件庫(kù)
目前我們用在項(xiàng)目中的前端框架組件庫(kù)，能數(shù)出名的 Ant Design、ElementUI、iView、Vuetify 莫不是依靠開(kāi)源社區(qū)的力量打造出來(lái)的。所以，Blazor 的組件庫(kù)也需要靠開(kāi)源社區(qū)貢獻(xiàn)！
那我們?cè)趺醋?Blazor 的組件庫(kù)呢？
現(xiàn)代的前端組件庫(kù)大體上可以分兩個(gè)部分，一是設(shè)計(jì)語(yǔ)言與理論，二是具體框架實(shí)現(xiàn)。設(shè)計(jì)語(yǔ)言與理論更多地是 UI/UX 方面的設(shè)計(jì)。對(duì)我來(lái)說(shuō)，最喜歡的設(shè)計(jì)以此是微軟的 Fluent Design、谷歌的 Material Design、再到螞蟻的 Ant Design。而具體框架實(shí)現(xiàn)就是由 React、Angular、Vue 等框架的實(shí)現(xiàn)了。
經(jīng)過(guò)幾年來(lái)的實(shí)踐，還有對(duì)開(kāi)源社區(qū)的觀察，分別用過(guò) Bootstrap、iView、Material、PrimeNG 等組件庫(kù)之后，最終還是覺(jué)得 Ant Design 在 UI 設(shè)計(jì)、組件功能和實(shí)用性、項(xiàng)目工程、社區(qū)活躍度等方面總體上都做得很好。作為一個(gè)開(kāi)源項(xiàng)目， 2019 年 7 月，Ant Design的 Github star 數(shù)超過(guò) Material UI，成為全球 star 數(shù)最高的 React 組件庫(kù)項(xiàng)目。
還翻到篇文章，螞蟻UED接受采訪時(shí)說(shuō)：
選擇 Design 這個(gè)域名，是期待我們能將設(shè)計(jì)價(jià)值觀、原則和模式逐步傳承下去，因?yàn)榍岸丝蚣堋⒃O(shè)計(jì)風(fēng)格都會(huì)過(guò)時(shí)，antd （Ant Design of React：用 React 前端框架實(shí)現(xiàn)的 Ant Design）一定會(huì)被淘汰。但如果我們有 Ant Design ，下個(gè)潮流來(lái)的時(shí)候，我們能快速搭建新的 Ant Design of XXX。非常感動(dòng)的是，除了 antd，我們已經(jīng)有 10+ 不同前端框架實(shí)現(xiàn)的 Ant Design。我們的 Design 夢(mèng)得到了真正的延續(xù)。
—— 螞蟻UED
于是一語(yǔ)成讖，WebAssembly 這一潮流來(lái)了，Ant Design of Blazor 應(yīng)運(yùn)而生。
我如何做 Ant Design of Blazor
與 Ant Design 官方一致
Ant Design of Blazor （以下簡(jiǎn)稱(chēng) AntBlazor）從一開(kāi)始我就定位在與官方 React 實(shí)現(xiàn)的代碼倉(cāng)庫(kù)同規(guī)模的項(xiàng)目，并參考它的其他實(shí)現(xiàn)，如 NG-ZORRO、ant-design-vue 是如何做另一個(gè)框架的實(shí)現(xiàn)的。
參考 ant-design-vue 的命名，我把 Blazor 倉(cāng)庫(kù)名改為 ant-design-blazor。
參考 NG-ZORRO 的 logo 改編，我把 Blazor 官網(wǎng)的 logo 摳下來(lái)，也把 Ant Design 的 logo 挖空并旋轉(zhuǎn) -45°，把 Blazor logo 填上并修改顏色。
參考 NG-ZORRO 的樣式同步機(jī)器人，我也自己寫(xiě)了樣式同步的 Github Action，定時(shí)檢查 ant-design 是否有新版本發(fā)布，當(dāng)有新版本時(shí)自動(dòng)提交PR。
參考 ant-design 寫(xiě)了 README 和 demo 文檔。
參考 NG-ZORRO，使用 Angular 的 commit lints。
為了項(xiàng)目工程質(zhì)量，使用 TS 編寫(xiě)互操作腳本，編譯腳本都是開(kāi)源的，對(duì)外部貢獻(xiàn)者盡量友好，而不是像已有的幾個(gè) Blazor 組件庫(kù)那樣只給出混淆后的 js、css。
還有一些在文檔構(gòu)建時(shí)衍生出的副產(chǎn)品，如約定式路由、組件渲染服務(wù)等。
在為了與官方高度一致上的努力，還會(huì)繼續(xù)。希望有一天能在豐富 Blazor 生態(tài)的同時(shí)，還能成為被 Ant Design 生態(tài)認(rèn)可的框架實(shí)現(xiàn)，能成為他們 Design 夢(mèng)的一個(gè)延續(xù)。
發(fā)起 Blazor 中文社區(qū)
對(duì)與社區(qū)來(lái)說(shuō)，Blazor 還是新鮮事物，就算發(fā)布半年了，真正有在項(xiàng)目中運(yùn)用的還是極少數(shù)。因此我建了個(gè)微信群，希望對(duì) Blazor 真有興趣的朋友加入，為了發(fā)廣告的就免了。想加入，可找張隊(duì)幫忙邀請(qǐng)，他加的人多????。
當(dāng)然，社區(qū)運(yùn)營(yíng)不是拉個(gè)群就完成的，還需要定期地舉辦線上線下的分享，還有邀請(qǐng)不同領(lǐng)域的大佬一起交流。目前來(lái)自前端圈的于航老師和敖天羽大大也被邀請(qǐng)進(jìn)來(lái)了。
制定開(kāi)發(fā)路線
在今年年中，我們打算能發(fā)布第一個(gè)版本 0.1.0，其中完成以下開(kāi)發(fā)項(xiàng)：
基本實(shí)現(xiàn) Ant Design 組件
組件的獨(dú)立發(fā)布腳本
完整文檔的構(gòu)建腳本
如果進(jìn)展順利，在年末 .NET 5 發(fā)布時(shí)，我們能發(fā)布生產(chǎn)可用的 1.0 版。
尋找貢獻(xiàn)者
要實(shí)現(xiàn)這些目標(biāo)，光靠我一個(gè)人是不行的，我需要在社區(qū)中尋找到其他開(kāi)發(fā)者一起貢獻(xiàn)這個(gè)項(xiàng)目。在社區(qū)中，目前已經(jīng)為 AntBlazor 項(xiàng)目邀請(qǐng)到幾個(gè)開(kāi)發(fā)者參與了代碼貢獻(xiàn)，并希望有更多對(duì) Ant Design 和 Blazor 有興趣的開(kāi)源愛(ài)好者加入。特別是希望能有企業(yè)用戶(hù)在有需求的情況下慷慨貢獻(xiàn)。
我們歡迎感興趣的前端開(kāi)發(fā)者加入，Blazor 是一個(gè)完完全全的前端框架，我們?cè)谧龅囊彩乔岸私M件庫(kù)，是十分需要與感激有前端開(kāi)發(fā)者加入到我們，推動(dòng) Blazor 在前端的發(fā)展。
我能做的是完善開(kāi)發(fā)流程和引入一些好用的工具，盡量讓社區(qū)貢獻(xiàn)更方便。
開(kāi)展技術(shù)分享
考慮到很多朋友還不太了解 Blazor，因此我會(huì)在社區(qū)中不定期舉辦分享和培訓(xùn)。會(huì)找 Microsoft Reactor 的老師幫忙安排場(chǎng)地，也會(huì)在線上舉辦直播會(huì)議，給大家分享一下 Blazor 與參與開(kāi)源項(xiàng)目的知識(shí)，讓他們能更好地入手給 AntBlazor 提交代碼。
在本周日（即3月21日）下午，我將在釘釘發(fā)起直播會(huì)議，講解 Blazor 的官方文檔以及 ant-design-blazor 的項(xiàng)目結(jié)構(gòu)以及示范寫(xiě) Ant Design 組件。釘釘群入口就是ant-design-blazor 項(xiàng)目README最下面的二維碼，大家掃碼之前記得點(diǎn)個(gè) Star！
項(xiàng)目地址: https://github.com/ElderJames/ant-design-blazor
小聲地拉一下贊助：為了加載速度，我把文檔站點(diǎn)部署在了Gitee上。但是Gitee需要收費(fèi)的專(zhuān)業(yè)版才能自動(dòng)更新和自定義域名，年費(fèi)99元…如果能收到捐贈(zèng)，我會(huì)在項(xiàng)目README中放上用戶(hù)頭像，以及公示使用情況。點(diǎn)下面的贊賞就好，記得備注 Github Account。
參考：
專(zhuān)訪螞蟻金服體驗(yàn)技術(shù)UED：Ant Design希望成為世界級(jí)設(shè)計(jì)體系
https://zhuanlan.zhihu.com/p/110863773
總結(jié)
以上是生活随笔為你收集整理的如何用 Blazor 实现 Ant Design 组件库？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： DotNetCore Web应用程序中的
- 下一篇： 【实战 Ids4】║ 控制台密码模式搭配