以下是DevUI開源的故事,這個故事可能會很短,因為DevUI
品牌從初創到現在也只有5年
,開源的時間只有短短2年
,但DevUI
與社群開發者的故事卻無時無刻不在發生,因此我們急於把它記錄下來。
DevUI是誰
- DevUI是面向企業中後臺產品的開源前端解決方案
- 服務於
ToB企業
、服務於工具類產品
是我們的產品定位 沉浸
、靈活
、至簡
是我們的設計價值觀- DevUI團隊致力於提升前端產品的
體驗
、質量
和研發效率
圖片來源:https://devui.design/design-cn/start
我們的開源產品
DevUI官網:https://devui.design
DevUI Github:https://github.com/DevCloudFE
Vue DevUI:https://gitee.com/devui/vue-devui
以下都是我們已開源的產品:
開源決心
DevUI團隊從2019年6月開始做開源,當時想法很純粹:
DevUI在華為雲內部服務於大量商用&內部業務,為何不將它開源到社群,讓更多業務&使用者也能享受到DevUI優秀的實踐呢?
關於DevUI
的前世今生以及開源的歷程,可以參考之前的文章:
以下是DevUI
5年的發展時間線:
從整個發展歷程也可以看出,DevUI團隊對做開源的巨大決心!
起步
2019年6月在Github開源之後,Ng DevUI在半年之內都沒有太大的動靜,雖然我們每個月都從不停止釋出新版本,但是關注我們的開發者一直不多,star數也半年之內始終沒有突破100,其中有很大一部分還是DevUI團隊成員自己點的。
不過我們並沒有灰心和放棄,因為
我們知道沒有什麼有價值的事情是可以輕易做成功的,我們也知道輕易放棄意味著真正的失敗。
所以
我們也在不斷地思考怎麼做開源,畢竟我們也是剛開始做開源,沒有經驗,幾乎是摸著石頭過河。
掘金
2020年3月,我們開始嘗試性地在掘金運營DevUI團隊
的技術專欄,我們不希望通過打廣告以及其他任何功利性的方式運營DevUI,這不是我們開源的初衷,我們希望能觸達開發者,讓他們主動認識、瞭解進而使用、熟悉DevUI。
所以掘金運營的初期,我們從不發軟文,全部都是技術乾貨,這些文章是DevUI團隊所有成員集體的智慧結晶和工作經驗,和社群大佬相比,不一定是最好的文章,但
都是大家付出時間用心寫的,所以也慢慢獲得了社群小夥伴們的認可。
2020年一年時間內,一共寫了39篇
文章,其中有6篇是社群的小夥伴Zcating同學貢獻的,Zcating
是我們DevUI開源組織的早期支持者和貢獻者,入群時間比我們很多DevUI團隊成員還早,他
- 不僅給我們投稿過技術文章
- 在Ng DevUI專案中活躍
- 而且在Vue DevUI成立初期提供了第一個元件
- 現在也是
Button
/Modal
/Dropdown
/Table
等多個元件的田主,也是我們DevUI開源組織的PMC成員
。
2020年可以說是DevUI開源的元年,正是在這一年,DevUI開始在社群有一定的曝光度,star數也突破了500
,掘金專欄的關注者也超過了1000
。
反思
不過我們的下載量依然慘不忍睹,只有區區的每週100多,我們也在不斷思考、反思和嘗試
為什麼那麼少人用DevUI呢?
國內Angular社群確實不如Vue、React火,但也不至於這麼少,國內Angular元件庫確實屈指可數,稍微做得比較好的就只有Ng Zorro,這是Ant Design的Angular版本,Ng Zorro每週的下載量超過40000,這說明國內還是有Angular使用者的。
我們其實並不想與別人競爭,包括Ng Zorro,我們也有過交流和互動,我們只是想
豐富Angular的生態,讓國內的Angular使用者除了Zorro,會有一個其他的選擇。
而且我們的定位和Zorro也不完全一樣,我們是
面向ToB企業
的工具類產品
的,這是我們的基因,也是我們的優勢。
堅持
至今我們依然沒有想明白為什麼用DevUI的人那麼少,不過這不影響我們做開源的決心!
或許
開源是一條漫長的道路,不堅持個三年五年,就不要抱怨開源難做,我們也會一直堅持做下去的。
也歡迎
- 使用過DevUI的開發者給予我們更多的輸入和反饋,這樣我們也能知道自己哪裡沒做好,進而不斷改進
- 同樣歡迎社群的開發者一起參與到DevUI的開源建設中來,一起搭建一個高質量元件庫,並完善元件庫的生態
- 我們也會始終保持開放的心態,接受社群的意見和反饋,不斷思考和反思,如何將
DevUI
的體驗、質量做好
嘗試
2021年,在Ng DevUI和Ng DevUI Admin之外,我們做出了三個重要的嘗試:Vue DevUI
、B站直播
、成立PMC
。
Vue DevUI
DevUI擴充vue生態並不是拍腦袋的,而是經過慎重考慮的:
- 2021年開始
vue3
/vite
開始全面爆發,基於vue3
/vite
的生態在以極快的速度擴大 DevUI官方交流群
裡不斷有小夥伴反饋:什麼時候出vue版本?- DevUI Design是一套從華為雲眾多實際業務中孵化出來的設計體系(這套設計體系曾獲得過德國紅點設計獎),Ng DevUI只是這套設計體系在Angular框架上的實現,擴充套件其他框架的實現也是DevUI的長遠規劃,包括Vue框架。
- 基於以上考慮,我們覺得:大概是時候了
於是在2021年5月正式開始通過社群開源的方式孵化Vue DevUI,詳細的情況可以參考我們之前的文章:
以下是Vue DevUI的倉庫資料趨勢圖:
從趨勢圖也可以看出
Vue DevUI
元件庫的發展是非常迅速的,僅僅半年時間,誕生了60位
contributor,開發了53個
元件,超200個
PR、1000次
提交。
以下是Vue DevUI
的貢獻者列表
感謝每一位DevUI的貢獻者!
B站
在掘金社群混了一年多之後,我們不僅讓社群開發者認識和了解了DevUI,還認識了非常多優秀的開發者,其中楊村長就是其中一個。
村長老師是一位Vue專家,並且有著非常豐富的教學經驗,聲音好聽很有親和力。
由於偶然的機會了解到村長在B站做直播,和村長的結識可以參考之前的文章:
跟村長老師做【Vue DevUI 開源指南】直播一個月的感受
跟村長老師的合作非常愉快,距離第一次和村長的直播已近2個月,一共直播了7次,每一次都是抱著期待的心情直播的:
- 期待見到幽默風趣、和藹可親的村長老師
- 期待與參與村長直播間的小夥伴一起完成一次技術之旅,看著大家每一條熱情的彈幕,不管是歡迎的、提問的、討論的,都非常溫暖
- 期待看到小夥伴們因為觀看我和村長的直播感受到的快樂和成長
- 期待再下一次的直播
每次和村長一起直播,我都感覺好久沒直播了,雖然只過了短短的一個星期。
由於也有小夥伴們覺得直播的內容太簡單了,我和村長也希望能提供一些更高質量的乾貨內容,所以直播的頻率由一週改成了兩週,不管一週一次還是兩週一次,我們都會:
認真準備和對待每一次直播,爭取讓觀看直播的小夥伴們能真正有所收穫,不負這一個小時的守候。
PMC
在做Vue DevUI
開源專案的過程中,我們感受到了社群開發者對於做開源的巨大熱情,8月3日向社群同步Vue DevUI的進展之後,
3天之內
就有超過100+
社群的小夥伴通過新增小助手微信(devui-official)聯絡到我們,並加入到我們的核心開發群5天之內
所有61
個元件田都被認領完,共有40+
小夥伴成為Vue DevUI元件庫田主- 第二天就有新的PR提交上來
10天之內
大家就給Vue DevUI
新添了11名新成員
不過我們也發現一些問題:
- 有些小夥伴一開始對開源抱有一顆火熱的心,想積極投身到開源中來,認領了元件之後卻一直未有實際行動,另一方面,有一些躍躍欲試想參與進來的小夥伴又沒有元件田可以認領,這會導致開源專案的進展受到影響
- 新加入的小夥伴問的最多的問題就是怎麼參與貢獻,怎麼提問題,怎麼開始著手貢獻,雖然我們寫了一些Wiki可以部分解決這個問題,不過這始終只是解決特定問題的臨時辦法,出現一個問題解決一個,沒有節奏和章法,這對開源專案和貢獻者都是很大的傷害
- 在參與貢獻的小夥伴中,我們也發現有一些非常積極、活躍、富有經驗、能力又強、又有強烈的參與開源的意願,這部分貢獻者本應該做出更大的貢獻和成就,甚至主導開源專案的管理、長遠路標規劃、新專案的孵化等全域性性的事務,如果能識別出來,對開源專案和貢獻者都是一種雙贏的局面
- 還有一些小夥伴希望通過參與開源專案為自己的簡歷和職業生涯增彩,我們怎麼能幫助他們實現自己的目標
我們也在不斷思考怎麼解決類似的問題
我們希望所有參與DevUI開源生態建設的貢獻者們都能收穫自己想要的,因此我們參考了業界開源的做法,結合DevUI自身的特點,決定成立DevUI開源PMC
PMC
是專案管理委員會的縮寫,一般是為了
促進整個社群長期和健康的發展,並確保獲得一定的平衡,以及獲得同行們的好評,並能夠讓協作進行下去
經過內部仔細的討論和碰撞,我們於2021年11月3日正式成立DevUI PMC
,並從DevUI開源生態的所有貢獻者當中精挑細選了5名貢獻者為PMC成員,他們分別是:
Zcating
Zcating同學我們在掘金介紹過多次,他擁有非常豐富的開發經驗,也是DevUI開源的早期貢獻者(早到比很多DevUI團隊成員還早),並且早在1年前就給DevUI團隊掘金專欄投稿過6篇RxJS原理分析的乾貨文章,Vue DevUI
剛開始孵化的時候,Zcating同學也非常積極,不僅積極參與,而且很快就開發了Vue DevUI
第一個元件:Button,後面也一直保持非常高的活躍度,積極檢視程式碼、提出並解決問題,並且現在也是DevUI複雜度TOP1的Table
元件的田主,同時他還是Dropdown
、Modal
、Overlay
等多個元件的田主,他不僅精通Angular框架,對RxJs響應式程式設計有原理層面的理解,而且熟悉React、Vue等多個框架,擁有全棧和架構的能力。
這是Zcating
同學的個人公眾號:zcx的工作室
歡迎大家關注!
iel
iel同學是DevUI CLI
的開創者,從0到1設計和實現了現在Vue DevUI專案中的devui-cli
,實現了建立元件模板、生成元件庫入口檔案&sidebar左側元件導航的自動化,大大提升了元件開發的效率和規範一致性,同時iel
還是Toast
元件的田主,早在8月9日就實現了Toast
元件的全部功能,自從iel
參與DevUI開源以來,一直保持非常積極、活躍的狀態。iel
同學也是第一個總結DevUI開源經驗文章的,目前也在積極參與DevUI與村長在B站的直播,雖然iel
同學經驗尚淺,但是年輕有為、對技術充滿熱情。
以下是iel
同學的掘金專欄:
https://juejin.cn/user/1538972011203662
歡迎大家關注!
Lucky
Lucky同學看名字就是能給別人帶來好運的人,8月3日我們在掘金同步了Vue DevUI最新的進展,8月4日,Lucky
同學就提交了Rate元件的PR,這效率太讓人印象深刻了。之後,Lucky同學在Vue DevUI
專案中一直非常活躍,提交了超過20個PR,是所有人中提交PR數量最多的,而且Lucky也非常積極地參與程式碼檢視,也是參與程式碼檢視最頻繁的。除了積極、活躍之外,Lucky同學還是Upload
元件,這也是DevUI中非常複雜的元件,另外,Lucky同學還主動識別到文件中缺乏BackTop功能並快速落地,有效提升了文件的體驗。
XieJay
XieJay同學是Ng DevUI元件庫的積極貢獻者,也是Ng DevUI
中提交PR次數最多的貢獻者,同時他也是Ng DevUI
元件庫的實際使用者,給我們反饋了Ng DevUI
元件庫的很多問題,讓我們對開發者的時機需求有更多的洞察和了解,進而不斷優化Ng DevUI
元件庫。
以下是XieJay
同學的部落格地址:
https://blog.csdn.net/xiejay97
歡迎大家關注!
duqingyu
duqingyu同學是唯一的兩位同時給Ng DevUI和Vue DevUI提交過PR的同學(還有一位是flxy同學),並且duqingyu
同學還是Vue DevUI
元件庫Badge
和ImagePreview
兩個元件的田主。
以下是duqingyu
同學的個人部落格:
歡迎大家關注!
成立PMC之後,PMC全體成員於2021年11月7日上午召開了第一次PMC會議,那天正好是立冬,加上內部Ng DevUI
、Ng DevUI Admin
、Vue DevUI
負責人一共有14人蔘會。會議從早上9點開到11點:
- 先是跟大家介紹了DevUI的整個體系和設計價值觀
- 然後詳細討論了PMC運作的策略和規範
- 接著廣泛討論了DevUI未來開源生態建設的長遠規劃
大家相聚甚歡、討論熱烈,共同暢想了DevUI開源生態未來的藍圖,充滿了無限的可能和遐想!
最後也將討論的結論整理人任務卡的形式,先有PMC成員進行認領和細化,後續也會逐步開放出來,讓社群開發者也有機會參與到DevUI開源生態的建設中來(大家再也不用蹲元件田啦?)。
也歡迎有意願、有想法、有能力的小夥伴加入到我們的PMC
和Committer
隊伍中來,我們們幹他一票大的!
目前DevUI
開源組織一共有5名PMC
成員、10名Committer
、60+名Contributor
。
以下是DevUI的Committer
列表:
Contributor
是實際給DevUI提交過PR的開發者,比如開發新元件&新特性、修復缺陷、完善文件&單測等。
Committer
是從Contributor
挑選最積極、活躍、優秀者,Committer
除了提交PR參與實際的程式碼&文件貢獻,還會參與程式碼檢視、技術方案討論、提建議、制定規範和流程等事務。
PMC
是專案管理委員會的縮寫,是從Committer
中選擇最傑出的,負責DevUI開源生態整體的路標規劃、架構設計、新開源專案孵化、Committer
提拔等全域性性的事務。
故事
DevUI在做開源的過程中,深入社群,廣泛地與開發者接觸和溝通,結識了非常多優秀的社群開發者,他們積極、熱情、充滿朝氣,都對技術充滿熱情,對未來充滿信心!
以下是我們與DevUI的朋友們的故事。
Bob:不是等你有能力再去做事,而是在做事中獲得能力。
AlanLee:努力提升自己,比仰望別人更有意義。
Wailen:伸手摘星,即使一無所獲,也不至於滿手汙泥。
MICD:很多時候不是因為你看到希望了才要努力,而是你努力了才會有相應的回報。
激勵
今年5月份孵化?的Vue DevUI給了我們非常大的信心,堅定了DevUI
做開源的決心,也讓我們看到了社群開發者對DevUI開源的巨大熱情,因此為了:
- 給貢獻者提供一定的榮譽感,我們為傑出貢獻者專門設計了
DevUI開源優秀貢獻者
榮譽獎盃,中間是大大的貢獻者名字,並且有華為雲DevUI
的文案 - 鼓舞貢獻者,讓
DevUI
的Contributor
有更多的歸屬感,你們面對的不是一個冷冰冰的開源專案,而是一個溫暖的DevUI開源組織,因此我們精心設計了DevUI定製精美抱枕
,Contributor
人手一個 - 激勵更多的小夥伴參與到DevUI開源生態建設中來,我們專門製作了
DevUI定製精美筆記本
,通過抽獎的方式給到抽中獎品的幸運兒們
以下是效果圖:
DevUI招募貢獻者啦
DevUI開源的故事
才剛剛開始
未來
我們希望與你一起
譜寫更精彩的故事
—— 華為雲DevUI開源組織
新增DevUI小助手微信:devui-official
,拉你到我們的官方交流群。
加入DevUI開源生態建設你將收穫什麼
直接的價值:
- 通過打造一個實際的vue3元件庫專案,學習最新的
Vite
+Vue3
+TypeScript
+JSX
技術 - 學習從0到1搭建一個自己的元件庫的整套流程和方法論,包括元件庫工程化、元件的設計和開發等
- 為自己的簡歷和職業生涯添彩,參與過優秀的開源專案,這本身就是受面試官青睞的亮點
- 結識一群優秀的、熱愛學習、熱愛開源的小夥伴,大家一起打造一個偉大的產品
長遠的價值:
- 打造個人品牌,提升個人影響力
- 培養良好的編碼習慣
- 獲得華為雲DevUI團隊的榮譽&認可和定製小禮物
- 成為PMC&Committer之後還能參與DevUI整個開源生態的決策和長遠規劃,培養自己的管理和規劃能力
- 未來有更多機會和可能
DevUI開源,未來可期!
彩蛋
今天是雙十一,Ng DevUI元件的star數剛好突破1111,這是不是一種特別的暗示?
雙十一,用用用!
難道意味著DevUI開源生態將要起飛?️?
未來將會有更多的社群開發者加入DevUI開源生態的建設
瞭解、使用、參與DevUI
DevUI不是個人開源
它的背後是一個有著堅定開源決心的團隊
加入DevUI開源,讓我們一起成長!
歡迎反饋&建議
除了實際參與DevUI開源生態建設,我們也希望
在公司或個人業務中使用DevUI元件庫的小夥伴們能給我們一些建議和反饋,好的壞的,我們都會虛心聆聽。
你們的反饋不僅能讓DevUI變得更好,反過來也能讓你們的業務&開發者變得更好,讓你們的使用者變得更好,甚至讓更多使用DevUI的業務和使用者感受到沉浸式體驗帶來的愉悅感。
歡迎大家在評論區留言討論!