Element: A Retrospective
We are the FE team of ele.me, one of the biggest food delivery companies in China. You may know us from Element, the most popular open source project of ours, a desktop UI library based on Vue.js 2.0. Today, we’d like to begin our journey here at Medium by looking back at what we have done with Element.
The Genesis
It all began exactly a year ago. Back then, the work on frontend engineers’ desks started to pile up as our company grew ever faster. Same thing happened to the UED team, as they had to design almost every page of every site. So, the idea of building a component library with a set of design language was spontaneous.
That’s how Element came to be. But at that point, a lot of thing were unclear. Yes, we knew it was going to be a component library. We were sure it would be based on Vue.js, since it was the weapon of choice for over half of the FE developers in our team. But should we just include basic components applicable to almost every admin page? Or should we cover all business components that are only useful for a few pages? And, was it going to be an open source project? We didn’t know. After a month of trying, we finished some business components, like restaurant picker and city picker, but we knew it was not enough. Maybe we needed to take a step back and do some more thinking.
After another two months of searching and investigating, the FE team and the UED team have finally come to see what Element should look like:
- it will solely cover common components
- it will be built with Vue.js 2.0
- it will be open to the community
With a clear goal in mind, we set off.
First Glance
Early last September, we announced Element to the community after three months of developing. Thanks to the global popularity of Vue.js, Element got more than 100 stars the same day it was announced.
Back then, we had just released the first RC of Element, absolutely clueless about when its first major version would be available. We had no homepage, so our users had to look up the GitHub repository for component demos; we were still working on its Chinese documentation, let alone an English translation.
But it was then that we realized we had made the right choice opening Element to the community. Developers all around the world reached out to us, helping us fix bugs and make improvements. With their help, after nine RCs, we released Element 1.0.0 in November.
During those two months, the community and we have:
- solved 426 GitHub issues
- pushed 818 commits
- achieved 92% coverage of unit test
- built a homepage with documentations
- created a project logo (the one you see at the beginning of this article)
Ever Growing
We never stopped making Element better. Here are some updates we’d like to share with you.
English Documentations
Since Element’s first appearance, the community has been asking for English documentations. Not long after, a professional translation team volunteered to help. Thanks to their hard work, we officially published Element’s English documentations together with version 1.0.1. You can check it out here.
New Versions
Element is now 1.2.3, 20 versions from its first release. In these versions, we shipped four brand new components (Carousel, Collapse, Cascader and ColorPicker), all of which were demanded by the community. And of course, dozens of new features and bug fixes can be found along the way.
Ecosystem
Centered around Element, there are several tools and services at your disposal:
- starter kit: a preset template to bootstrap your project
- custom theme tool: a CLI tool to generate your very own Element theme
- online theme preview: an online service to preview and download theme transform in real-time
- awesome Element: a curated list of Element projects
And also, Element itself is a part of the Vue ecosystem. We are glad if it makes your developing more enjoyable :)
A Big Thank You
Now on GitHub, Element has over 9.4k stars and counting. It is what it is today because of the community. In fact, we never thought it would go this far when we first started because we didn’t know you guys are this awesome.
Another thing we’d like to mention particularly: i18n. Element supports 26 different languages, and 24 of them are made possible by developers all over the globe. From this single fact you can see how helpful the community has been to us.
So, a big thank you to all our users!
The Future
We are fully aware there is still a lot of work to do: Keyboard navigation is not good, accessibility is poor, some bugs are long overdue, etc. We will work on them.
And as always, your contributions are welcome. We’d love to take this road with all of you.
Finally, we will see you in element.eleme.io.
