DevUI开源的故事

DevUI开源的故事

前端组件库 @ 华为

以下是DevUI开源的故事,这个故事可能会很短,因为DevUI品牌从初创到现在也只有5年,开源的时间只有短短2年,但DevUI与社区开发者的故事却无时无刻不在发生,因此我们急于把它记录下来。

DevUI是谁

  1. DevUI是面向企业中后台产品的开源前端解决方案
  2. 服务于ToB企业、服务于工具类产品是我们的产品定位
  3. 沉浸灵活至简是我们的设计价值观
  4. DevUI团队致力于提升前端产品的体验质量和研发效率

图片.png

图片来源:devui.design/design-cn/s…

我们的开源产品

DevUI官网:devui.design

DevUI Github:github.com/DevCloudFE

Vue DevUI:gitee.com/devui/vue-d…

以下都是我们已开源的产品:

图片.png

开源决心

DevUI团队从2019年6月开始做开源,当时想法很纯粹:

DevUI在华为云内部服务于大量商用&内部业务,为何不将它开源到社区,让更多业务&用户也能享受到DevUI优秀的实践呢?

关于DevUI的前世今生以及开源的历程,可以参考之前的文章:

🏆 DevUI × 掘金 | 技术人的2020

对DevUI组件库王哥的专访

以下是DevUI5年的发展时间线:

image.png

从整个发展历程也可以看出,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 DevUINg DevUI Admin之外,我们做出了三个重要的尝试:Vue DevUIB站直播成立PMC

Vue DevUI

图片.png

DevUI拓展vue生态并不是拍脑袋的,而是经过慎重考虑的:

  • 2021年开始vue3/vite开始全面爆发,基于vue3/vite的生态在以极快的速度扩大
  • DevUI官方交流群里不断有小伙伴反馈:什么时候出vue版本?
  • DevUI Design是一套从华为云众多实际业务中孵化出来的设计体系(这套设计体系曾获得过德国红点设计奖),Ng DevUI只是这套设计体系在Angular框架上的实现,扩展其他框架的实现也是DevUI的长远规划,包括Vue框架。
  • 基于以上考虑,我们觉得:大概是时候了

于是在2021年5月正式开始通过社区开源的方式孵化Vue DevUI,详细的情况可以参考我们之前的文章:

让我们一起建设 Vue DevUI 项目吧!🥳

Vue DevUI 已经有10个组件成员啦~🥳😋

以下是Vue DevUI的仓库数据趋势图:

image.png

从趋势图也可以看出

Vue DevUI组件库的发展是非常迅速的,仅仅半年时间,诞生了60位contributor,开发了53个组件,超200个PR、1000次提交。

以下是Vue DevUI的贡献者列表

image.png

感谢每一位DevUI的贡献者!

B站

封面.png

在掘金社区混了一年多之后,我们不仅让社区开发者认识和了解了DevUI,还认识了非常多优秀的开发者,其中杨村长就是其中一个。

村长老师是一位Vue专家,并且有着非常丰富的教学经验,声音好听很有亲和力。

由于偶然的机会了解到村长在B站做直播,和村长的结识可以参考之前的文章:

跟村长老师做【Vue DevUI 开源指南】直播一个月的感受

跟村长老师的合作非常愉快,距离第一次和村长的直播已近2个月,一共直播了7次,每一次都是抱着期待的心情直播的:

  • 期待见到幽默风趣、和蔼可亲的村长老师
  • 期待与参与村长直播间的小伙伴一起完成一次技术之旅,看着大家每一条热情的弹幕,不管是欢迎的、提问的、讨论的,都非常温暖
  • 期待看到小伙伴们因为观看我和村长的直播感受到的快乐和成长
  • 期待再下一次的直播

每次和村长一起直播,我都感觉好久没直播了,虽然只过了短短的一个星期。

由于也有小伙伴们觉得直播的内容太简单了,我和村长也希望能提供一些更高质量的干货内容,所以直播的频率由一周改成了两周,不管一周一次还是两周一次,我们都会:

认真准备和对待每一次直播,争取让观看直播的小伙伴们能真正有所收获,不负这一个小时的守候。

PMC

图片.png

在做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组件的田主,同时他还是DropdownModalOverlay等多个组件的田主,他不仅精通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同学的掘金专栏:

juejin.cn/user/153897…

欢迎大家关注!

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同学的博客地址:

blog.csdn.net/xiejay97

欢迎大家关注!

duqingyu

duqingyu同学是唯一的两位同时给Ng DevUIVue DevUI提交过PR的同学(还有一位是flxy同学),并且duqingyu同学还是Vue DevUI组件库BadgeImagePreview两个组件的田主。

以下是duqingyu同学的个人博客:

www.duqingyu.top

欢迎大家关注!

成立PMC之后,PMC全体成员于2021年11月7日上午召开了第一次PMC会议,那天正好是立冬,加上内部Ng DevUINg DevUI AdminVue DevUI负责人一共有14人参会。会议从早上9点开到11点:

  1. 先是跟大家介绍了DevUI的整个体系和设计价值观
  2. 然后详细讨论了PMC运作的策略和规范
  3. 接着广泛讨论了DevUI未来开源生态建设的长远规划

大家相聚甚欢、讨论热烈,共同畅想了DevUI开源生态未来的蓝图,充满了无限的可能和遐想!

最后也将讨论的结论整理人任务卡的形式,先有PMC成员进行认领和细化,后续也会逐步开放出来,让社区开发者也有机会参与到DevUI开源生态的建设中来(大家再也不用蹲组件田啦😋)。

也欢迎有意愿、有想法、有能力的小伙伴加入到我们的PMCCommitter队伍中来,咱们干他一票大的!

目前DevUI开源组织一共有5名PMC成员、10名Committer、60+名Contributor

以下是DevUI的Committer列表:

  1. Zcating
  2. iel
  3. Lucky
  4. XieJay
  5. duqingyu
  6. brenner8023
  7. Marvin
  8. micd
  9. flxy1028
  10. to0simple

Contributor是实际给DevUI提交过PR的开发者,比如开发新组件&新特性、修复缺陷、完善文档&单测等。

Committer是从Contributor挑选最积极、活跃、优秀者,Committer除了提交PR参与实际的代码&文档贡献,还会参与代码检视、技术方案讨论、提建议、制定规范和流程等事务。

PMC是项目管理委员会的缩写,是从Committer中选择最杰出的,负责DevUI开源生态整体的路标规划、架构设计、新开源项目孵化、Committer提拔等全局性的事务。

故事

DevUI在做开源的过程中,深入社区,广泛地与开发者接触和沟通,结识了非常多优秀的社区开发者,他们积极、热情、充满朝气,都对技术充满热情,对未来充满信心!

以下是我们与DevUI的朋友们的故事。

Bob:不是等你有能力再去做事,而是在做事中获得能力。

AlanLee:努力提升自己,比仰望别人更有意义。

Wailen:伸手摘星,即使一无所获,也不至于满手污泥。

MICD:很多时候不是因为你看到希望了才要努力,而是你努力了才会有相应的回报。

无声

iel

JS老狗

村长

激励

今年5月份孵化🐣的Vue DevUI给了我们非常大的信心,坚定了DevUI做开源的决心,也让我们看到了社区开发者对DevUI开源的巨大热情,因此为了:

  • 给贡献者提供一定的荣誉感,我们为杰出贡献者专门设计了DevUI开源优秀贡献者荣誉奖杯,中间是大大的贡献者名字,并且有华为云DevUI的文案
  • 鼓舞贡献者,让DevUIContributor有更多的归属感,你们面对的不是一个冷冰冰的开源项目,而是一个温暖的DevUI开源组织,因此我们精心设计了DevUI定制精美抱枕Contributor人手一个
  • 激励更多的小伙伴参与到DevUI开源生态建设中来,我们专门制作了DevUI定制精美笔记本,通过抽奖的方式给到抽中奖品的幸运儿们

以下是效果图:

荣誉奖杯.jpeg

DevUI定制抱枕1.jpeg

DevUI定制抱枕2.jpeg

DevUI定制笔记本.JPG

DevUI招募贡献者啦

DevUI开源的故事
才刚刚开始
未来
我们希望与你一起
谱写更精彩的故事
                                                        —— 华为云DevUI开源组织

添加DevUI小助手微信:devui-official,拉你到我们的官方交流群。

加入DevUI开源生态建设你将收获什么

直接的价值:

  1. 通过打造一个实际的vue3组件库项目,学习最新的Vite+Vue3+TypeScript+JSX技术
  2. 学习从0到1搭建一个自己的组件库的整套流程和方法论,包括组件库工程化、组件的设计和开发等
  3. 为自己的简历和职业生涯添彩,参与过优秀的开源项目,这本身就是受面试官青睐的亮点
  4. 结识一群优秀的、热爱学习、热爱开源的小伙伴,大家一起打造一个伟大的产品

长远的价值:

  1. 打造个人品牌,提升个人影响力
  2. 培养良好的编码习惯
  3. 获得华为云DevUI团队的荣誉&认可和定制小礼物
  4. 成为PMC&Committer之后还能参与DevUI整个开源生态的决策和长远规划,培养自己的管理和规划能力
  5. 未来有更多机会和可能

DevUI开源,未来可期!

图片.png

彩蛋

今天是双十一,Ng DevUI组件的star数刚好突破1111,这是不是一种特别的暗示?

双十一,用用用!

难道意味着DevUI开源生态将要起飞🛫️?

未来将会有更多的社区开发者加入DevUI开源生态的建设

了解、使用、参与DevUI

DevUI不是个人开源

它的背后是一个有着坚定开源决心的团队

加入DevUI开源,让我们一起成长!

图片.png

欢迎反馈&建议

除了实际参与DevUI开源生态建设,我们也希望

在公司或个人业务中使用DevUI组件库的小伙伴们能给我们一些建议和反馈,好的坏的,我们都会虚心聆听。

你们的反馈不仅能让DevUI变得更好,反过来也能让你们的业务&开发者变得更好,让你们的用户变得更好,甚至让更多使用DevUI的业务和用户感受到沉浸式体验带来的愉悦感。

欢迎大家在评论区留言讨论!

文章分类
前端