写在 Element 一周年之际

就在今天,即 3 月 13 日,Element 迎来了它一周岁的生日,对,它一周年了。一年前的今天,GitHub 中的一个 eleme / element 仓库悄然诞生。

立项之初,Element 的开发者与设计师一起努力,希望能够有成套的搭建后台站点的解决方案,4 月 14日 Element 发布了它的第一个内部版本(@ele/element),只有 17 个为饿了么业务量身定制的组件,这是我们最初的起点——所有人可能都想不到,日后他会成为最流行的 Vue 组件库之一,扬名中外。

里程碑

回顾历史,Element 已经走过了一段很长的路,但之后还将走一段更长的路。

2016 年 8 月 29 日,Element 从 Vue 1.x 过渡至 Vue 2,发布了 1.0.0-rc.1,此时的开发者们还需要同时维护 Vue 1.x 和 Vue 2 两个版本的 Element。

2016 年 9 月 3 日,JS Conf 现场。几位在场的开发受到了「现场开源」这一行为的感染,毅然在现场宣布了开源,直到当晚正式推送代码前,该库可能成为了史上 stars 最多的空仓库。开源仅 3 天,stars 就突破一千。


2016 年 9 月 28 日,期待已久的 Element 中文文档终于上线了。

随后我们就确定和 @SwiftGG翻译组 合作开始整理英文文档。翻译团队经过一个多月的努力后,英文文档也正式上线。

2016 年 10 月 1 日,Vue.js 2.0 正式发布。尤小右在发布声明里特别提到了 Element。

2016 年 10 月 11 日,Element 启动了测试计划,随后为所有组件都添加了单元测试。

2016 年 11 月 9 日,Element 发布了第一个正式版 Hydrogen。

2016 年 11 月 16 日, Element 发布了 1.0.1 以及英文文档,从此开启了国际化之路。

2016 年 12 月 13 日,由我们的设计师精心设计的 Element logo 公布。

2016 年 12 月 29 日,Element 发布 1.1.0 Helium,新增 Carousel 和 Collapse 组件。

2017 年 2 月 22 日,Element 发布 1.2.0 Lithium,新增 Cascader 和 ColorPicker 组件。

成就


截至本文撰写时,Element 已获得 9,734 stars,1,423 forks,代码覆盖率达到了 88%,这不仅仅是饿了么的开发者和设计师们所做出的努力,更应该要感谢整个社区对我们的支持与鼓励:Element 仓库中现存 2,246 issues 以及 1,212 个 pull requests,每个月在 npm 中有 22k 次下载,420 位用户在 Gitter 中热烈讨论,i18n 支持 26 种语言,更有多达 108 位开发者参与完善了 Element,感谢大家,让 Element 变得更好,这些数据让我们充满对 Element 的未来充满了自信。

在此我们也要特别感谢 Element 的捐助者们:感谢所有通过微信、支付宝和 OpenColletive 给我们打赏的同学,同时也感谢 Laravist 的慷慨赞助。

抄袭风云

毫不意外,每个成功的项目都会遭遇到同样的问题——被抄袭,不过:「开源社区的事情,怎么能叫抄呢」?

我们认为,开源不假,但作者们付出的心血是真的;学习虽好,但复制粘贴就有点令人不齿。

越南设计师抄袭 Element 官网

2017 年 2 月 2 日,我们的设计师之一梓非徐在微博爆料,越南设计师在著名平台 dribbble 抄袭我们的 Element 官网设计,态度十分恶劣,经过维权后 dribbble 已将相关的抄袭作品删除。



iView 的大胆操作

iView 也给我们这群理想的开源主义者泼了一桶冰凉的水。

在 2016 年 9 月 29 日,一个希望我们参考 iView 修改文档的声音传来,我们注意到了 iView 这个同类型的组件库,当时作者是这么说的(图中的 jingsam 后来成为了 iView 的贡献者之一):



在 2016 年 11 月 7 日,iView 发布第一篇推广文Vue高效UI组件库-iView开发实践 - 知乎专栏,这里提到了对 Element 的学习,但是我们却注意到 iView 有复制 Element 的代码。比如日期选择器(DatePicker)组件的神还原,之后的还有多语言、表单校验功能的大肆抄袭,部分代码作者有注明出处,还有一些并没有(下图为在 iView 仓库搜索「elemefe」的结果)。可笑的是,作者四处宣传自己的设计多优良,不提 Element 也罢,多个场合公然出言诋毁 Element,鼓吹自己的效率,用这种方式来表现自己的技术,恐怕不妥。

这里举个例子。 iView 在 2016 年 12 月 15 日有一次提交,其中涉及到 picker.vue 文件的是这一部分,而这一天 Element 仓库里 picker.vue 的代码是这样的。两者的相似程度不用我们说,相信大家都能看出来。

之后我们注意到 iView 的开发者在一些场合诋毁 Element 的 UI,这似乎与当时自己的评价「很漂亮」并不相符,或许是因为在学习的过程中,审美水平也逐渐随之提高——我们也有一丝欣慰,因为 Element 本身也提供了一些设计规范,去协助大家进行更好的设计,使本来设计能力比较低下的人至少做得不太遭,设计规范确实在渐渐影响着大家做出更好的设计,提升自己的审美标准。

不仅如此,iView 的开发者以此举办了许多收费活动,赚得钵盆满体的同时不知道有没有忘记开源的初衷。

近期 iView 发布了他们的 2.0 版本,我们甚至都不敢去统计,有多少代码与 Element 神似,只是稍稍一看,就看到了:「呀,又是一模一样」。

比如最近 iView 的 2.0 分支上出现了 test/unit 目录,看起来是准备开始写测试了。这个目录里有一个 utils.js,Element 的相应目录里也有一个 utils.js。截至本文撰写时,两者唯一的区别就是我们的 Vue.use(Element) 被改成了 Vue.use(iView),接下来的部分完全一样。有意思的是,我们注意到贡献这个文件的并不是 iView 的作者本人,看起来开发团队内部对抄袭 Element 代码这件事已经达成了某种默契。

总结


不过,我们接的住多少赞美,就经得起多少诋毁,这些声音同样让我们反思总结,从而使 Element 发展得更好。

Element 伴随着开发团队的成长而壮大,它可能是 Vue 2 最有名的组件库,但要想做到 Top 1,或者保持 Top 1,我们还需要加倍努力。当然,Element 一路走来,跟公司的支持密不可分,饿了么大前端团队在未来还会提供更多更好用、好玩、有趣的东西给大家,我们始终坚持开源精神,不忘初心。

当然,我们非常欢迎社区来为我们做贡献,提出 pull request 或者力所能及地解决一些 issue 都是我们所欢迎的——赠人玫瑰,手有余香,开源社区的维护,不仅仅是靠一个团队,一个公司,我们相信是靠所有热爱开源,拥有开源精神,热衷于分享和交流的人。

最后,如果您喜欢 Element,也欢迎给我们打赏 :)
编辑于 2017-03-14

文章被以下专栏收录

    只看代码的话,上 https://github.com/ElemeFe 。这一群人,关心的不是「如何写前端」而是「如何很好地运行一个 ( web ) APP」;这一群人,会在监控屏上加上弹幕,会让实习生自主招聘,会设计、编写、监控整个 APP 的生命周期;这一群人,玩的时候... 更卖力,就像从来没来过那般卖力,卖力地热爱生活。所以这些创作大多基于 ❤️