“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

Before, my understanding of open source was that a group of developers in different locations would submit PR to open source projects, and then the project administrator would review and incorporate the PR, and then nothing else. I didn’t understand why a group of strangers would voluntarily use their valuable business time to contribute code to an open source project done by a stranger.

It wasn’t until I did my own Vue DevUI open source project that I learned more about open source.

A single spark

My name is Kagol, and I am a general developer of the company. I have my own work to do in the company, and I am also responsible for the open source operation of DevUI component library.

I didn’t know I was so passionate about open source until I did this.

DevUI component library has been open source on Github since June 2019. At that time, we did not do open source, thinking that good wine does not need to be deep in the street (after all, it is through huawei cloud’s many commercial business component library, but also won the German Red Dot design award), how will some people like it.

The result, as mentioned in the DevUI open source story:

After the Github open source in June 2019, Ng DevUI did not make much progress in half a year. Although we never stopped releasing new versions every month, there were not many developers paying attention to us, and the star number did not exceed 100 within half a year, most of which were selected by DevUI team members themselves.

However, we didn’t lose heart and give up. Maybe I love sharing and writing. In March 2020, the leader asked me to open a technical column of DevUI team in Digg to publicize the Open source of DevUI.

We don’t want to run DevUI through advertising or any other utilitarian means. That’s not what open source is about. We want to reach out to developers and get them to know, understand, use, and become familiar with DevUI. Therefore, at the beginning of nuggets operation, we never publish soft articles, all are technical dry goods, these articles are DevUI team members collective wisdom crystallization and work experience, we will continue to output DevUI team practice and dry goods content.

For those of you interested in this experience, take a look at the summary I wrote last year:

Denver 🏆 DevUI x | 2020 people

Since my first technical post on February 26, 2020, my passion for open source has spread like wildfire, with 93 posts to date.

2020 is the first year of DevUI open source, because from this year, community developers began to pay attention to DevUI, some people in the gold digging technology circle actively talk about DevUI, some public accounts are also reprinted our articles, our star number has increased by 10 times.

This year, my understanding of open source has also changed. I gradually felt the tremendous energy of the community and the great enthusiasm of the community developers for open source. I also had a huge impulse to participate in the open source ecosystem and join this group of active developers who are passionate about technology and life.

Embrace open source

Since the end of 2020, I have worked on several open source projects in addition to the Ng DevUI open source component library.

On November 3, 2020, I made a Calendar Graph project, which can quickly generate a Github submission Graph. It supports component use, custom date interval, display text, submission times, and provides flexible theme customization and submission schedule printing and other practical functions. This open source project has been maintained for two and a half months, and it was intended to continue to enrich and support visual operation. However, it seems that this project is not a universal scenario, and no one uses it or participates in it. I had to give up, and I got 6 stars in total 🌟.

While working on the Calendar Graph project, I found that I often had to manipulate and transform colors and manipulate arrays, which were common methods, but I didn’t want to introduce heavy three-way dependencies like Lodash, so I created a KTools library. This library was incubated from the Calendar Graph project 🐣. KTools has no business scenarios due to the suspension of the Calendar Graph project. However, this library can be used as a general tool library, and you are welcome to provide more scenarios or participate actively. Build a lightweight yet very useful tool library. KTools has so far harvested 7 Star🌟.

At the end of November 2020, a friend came to me and said that he wanted to build a function that could translate English into Chinese in Excel with one click, and the data volume in Excel might reach 100,000 levels. Before, due to the small amount of data, he copied it manually one by one and translated it by hand using translation software. As the amount of data increases, manual translation will be very inefficient, so I hope I can help. So I created an open source project for Excel Translate, which is a Nodejs project that reads an Excel file, extracts the English from the cells, and translates it into Chinese using the Google Translate API. Then generate a Chinese Excel document with the same format as English Excel. Since this project is also a specific scene, it has not been maintained continuously. So far, it has received a total of 4 stars 🌟.

These open source projects did not catch on, but they also planted a seed of open source in my heart and made me realize that I need to make a popular and successful open source project:

  1. Open source projects need to have usage scenarios and actual users, which is very critical. Without people, the project has no value. Without value, there will be no one to contribute to it, and there will be no motivation to maintain it continuously. So when doing open source projects, value and users come first.
  2. The next thing is the technology stack. If you want to make a popular open source project and get the community of developers to contribute, you need to choose a popular technology stack, like the front end project. If you choose jQuery, I don’t think anyone will want to participate.
  3. There is also constant activity. Open source projects like Vue3 / Vite are updated almost every day. If an open source project is not updated for six months, a year or more, no one will want to use and contribute.

My understanding of open source projects is also gradually improving, if you have other ideas 💡, feel free to discuss them in the comments section.

Vue DevUI

On January 9, 2021, I created another open source project Vue DevUI, which is a Vue3 component library based on DevUI Design system. It is built with the latest Vite + Vue3 + TypeScript + JSX, and contains more than 60 simple, easy to use and flexible components.

This open source project has been quite successful, so I want to share with you the entire development history of Vue DevUI open source project from 0 to 1.

start-up

I first created a basic project using Vite, then set up a preliminary documentation system based on DevUI’s official website, added CommitLint to the basic Git commit information, and posted an internal recruit on DevUI’s official communication group:

The basic component library development process and component documentation system is completed. We hope you can join us to develop a DevUI component library based on Vue3 version, using the latest Vite+Vue3+TypeScript stack.

On February 22, 2020, our old friend Zcating submitted the first Button component written by TSX, which is also the first component of Vue DevUI component library.

The next day To0Simple joined the contributors and removed the shims.d.ts file. Since all components of the Vue DevUI component library were written in TSX mode, the shims.d.ts type declaration file for the. Vue file was not necessary.

At that time, the document system of Vue DevUI was still hand-written after Ng DevUI component library, and there were many imperfections. Later, To0Simple improved CodeBox and Highlight components, which were used to display and Highlight the demo code of the component.

On March 6th, Flxy1028 joined in and added Tabs.

From March 10th, to0Simple contributed Panel/Alert/Avatar in less than a week.

Originally, Vue DevUI had seen the light of hope, but since I just took over the ProjectMan business at that time (this experience is summarized in the undead bird 🐦 is Phoenix | 2021 summary, if you are interested in it), I didn’t have time to maintain the open source project, so maybe you have no direction and no confidence. Little by little, no one is contributing anymore.

restart

It wasn’t until May 2020 that I started to take a break from the ProjectMan business and decided to restart the Vue DevUI project.

On the first day of the Labor Day holiday, we officially recruited contributors to the Vue DevUI open source component library in the Nuggets community:

Let’s build the Vue DevUI project together! 🥳

In fact, I had no idea at that time. I only recruited 3 contributors internally, and the external developers didn’t know DevUI, and they didn’t know you Kagol, so why did they want to contribute?

Not surprisingly, after the recruitment article was sent, there was no response.

It wasn’t until June 2020 that one of our community friends started making strong contributions, first improving the unit test environment and esLint/Stylelint/LS-Lint code specification, and then contributing a new component almost every week, starting with the Radio checkbox component on June 27. By July 24 contributed Input box components, a total of 5 components were contributed.

This gives me great confidence!

I had just stepped out of the ProjectMan business, and I thought it was time to revive the Vue DevUI project!

So on August 3, 2021, I got the latest update from Vue DevUI in Nuggets:

Vue DevUI already has 10 component members ~ 🥳😋

A rapidly growing

The effect of this article is greatly beyond my expectation. As soon as the article is sent, there are a large number of small partners and small assistants’ wechat, so that the small assistants’ wechat can not be added. Hint:

The day after the post, a new PR was submitted. Lucky, a PMC member of the DevUI open source group, is still the most active contributor to Vue DevUI.

  • Within 3 daysThere are more than100 +Small partners in the community can contact us by adding the small assistant wechat, and join our core development group
  • Within five daysall61All of the component fields have been claimed40 +Partner becomesVue DevUIComponent repository owner
  • Within ten daysYou will giveVue DevUIadded11Name the new component member

To date, Vue DevUI has 77 contributors, 61 components, 359 PR and 1,598 submissions.

Only the beginning

Vue DevUI is also planning to release version 1.0 recently, I believe that soon (under the premise of ensuring the quality of course) will be able to meet you, enjoy!

Vue DevUI is not the end of the DevUI team’s open source work, but just the beginning. We will continue to improve DevUI’s open source ecosystem. It will be a long process, but we will not give up.

Welcome to participate in DevUI’s open source ecological construction! (Added small assistant wechat: devui-Official)

Open source comprehension

As a large number of community partners participated in the construction of Vue DevUI open source component library, I also had the opportunity to communicate more with excellent developers, which also deepened my understanding of open source.

What are open source contributions

The first is a deeper understanding of open source contributions.

I used to think of open source contributions as PR and writing code for open source projects.

That’s not entirely true.

An open source project is not much different from a typical corporate project, it’s all about providing some kind of value to the user, whether it’s solving a pain point or making the user do something more efficiently.

An open source project may have many components, starting with a basic framework, such as the Vue DevUI project:

  1. A Vite based infrastructure project that integrates vue3+TypeScript+JSX+ unit testing + various Lint tools
  2. Starting from this basic framework, it contains a component library, which is the core of the external offering
  3. A documentation system used to demonstrate the functionality of a component library
  4. aCLITools for doing automated things like automatically generating component templates, building component library artifacts, and so on

As can be seen from the above components, contributions may include:

  1. Write a new component and become the owner of this component
  2. Each component requires accompanying documentation in Both English and Chinese
  3. Unit testing to ensure component quality
  4. Improvement of engineering supporting tools (deep involvement is required to identify what tools we need and improve them continuously)
  5. Components get bugs, documentation gets bugs, and fixing those bugs is a contribution
  6. Further deducting, finding a bug in a component or document and making an issue is also a contribution
  7. The first version of a component is not necessarily the most perfect, its API, its source code may need to be refined and refactored, component optimization is also a contribution
  8. When a community developer submits an issue to an open source project without selecting a tag, you find it and add a tag to the issue, so that other developers who have just joined the open source project can see the tag and know at a glance whether they are interested in the issue and have the ability to solve it
  9. If someone made a pr, see the title of the pr, do you think he’s very interested in this feature you, want to know is how to achieve the others, then you can go to inspect the code (examines the process of code you can understand into a chance to communicate with authors pr, if you understand the code, feel write very good, can be in the comments write him an encouraging words; If you think your writing is bad, make a friendly comment about something that could be improved. The pr writer will thank you for your kind behavior and give you a friendly response. If you don’t understand the code, you can also actively ask questions about what you don’t understand and have a friendly discussion with the PR writer. In the process of interaction and discussion, I’m sure you will learn something.
  10. As open source projects evolve, there will be more friend to join in, friend just came in to this community is very strange, such as the vue devui a WeChat group, new members to join will be added to the group, then you give new members say hello, welcome the new friend, I think it is also a contribution to the open source project, Because you’re making this neighborhood warmer without even knowing it
  11. Continue to exercise, every member in the open source community background, experience, ability is different, there may be a lot of questions, just add buddy and turn in a group, you find the questions he raised, you just know, and gives his own ideas, let the questioner be suddenly enlightened, faster to find the answer to the question, and gains, and this is also a kind of contribution
  12. Because you often encounter the same problems, you identify them, document them and put them on the wiki of your open source project so that newcomers can see the quick start, which is also a contribution
  13. If I continue, I think there may be more forms of contribution, every action, language, writing, etc. that makes communities and open source projects better is a contribution

Every time you interact with the open source community, you learn more about it, and you grow. A kind word or a piece of advice can warm our hearts. I think this is the difference between open source projects and corporate projects.

contributors

The second is the understanding of the contributors.

I used to think you had to be a genius to contribute to open source, but it’s not true. On the contrary, it’s the millions of ordinary developers who contribute to open source that keep the whole open source ecosystem thriving and growing.

I’ve spoken to a number of DevUI owners who:

  1. Some are college students who want to gain practical experience by working on open source projects in preparation for future jobs
  2. Some are building their own component libraries and want to get some inspiration from being deeply involved in open source component libraries
  3. Others are new to open source and want to try out open source contributions
  4. Others are job-hunting friends who want to add some sparkle to their resumes by working on open source projects
  5. Some of them watched the B station live broadcast between me and the village head and were a little eager to try the taste of open source
  6. Some of them are recommended by friends and colleagues: “XD, DevUI is a great open source project, want to join us?”
  7. I also want to learn something up to dateVue3+Vite+TypeScriptTechnology, feel light learning is too boring, want to use an open source project to practice
  8. .

Although the original intention of participating in Vue DevUI open source project may be different for each owner, there is one thing in common: the owners who participate in open source are all people who love open source, love sharing, love technology and love life.

I can see this clearly by talking to them and looking at their code.

This has also changed my mentality. I used to think that to be open source is to release an open source project to Github or Gitee and leave it at that. Every now and then, I would go to the warehouse to check whether there is an Issue/PR or not, and check and add the code when someone comes to contribute.

As the number of contributors to Vue DevUI grew, I slowly developed a sense of responsibility and mission:

Everyone is so hard to participate in the contribution, whether it is developing components, improving documents, supplementing unit tests, submitting issues, providing feedback on the use, I can not live up to everyone’s efforts and enthusiasm, must do a good job of this component library, not necessarily the industry first, but must pass my own level.

In addition, I will try to make the operation and management of the whole community more efficient, so as to avoid repetitive work between the owners, and constantly improve the specification documents and Wiki documents, so that the new members can quickly integrate into DevUI. As long as there are new members in the early morning and early morning, I will ask my assistant to welcome them.

I will read each issue carefully and tag them carefully. For some simple ones, I will mark good-first-issue, so that the new comers will know that the task is not too difficult and I can claim it. For some that I am sure to do, I will tag welcome-contribution. Need-more-info and so on, if you’re not sure.

Every PR I receive a reminder from my wechat official account, and I will deal with it immediately when I see it. Almost every line of code will be carefully examined:

  1. For good writing, I will comment a word of encouragement
  2. There are also space optimizations, which I will kindly comment on, what is not well written, what could be improved
  3. I will also consult and confirm with the PR author about what I don’t understand or what I am worried about making a mistake

I see every code review as an opportunity to talk to the owners, and a lot of times I feel like it’s a win-win. You’re helping others and you’re learning a lot yourself, at least in my case.

So you are welcome to participate in the code review, you will be rewarded!

The open source community

One of the biggest differences I see between open source projects and corporate projects is that open source projects evolve in an invisible community.

We all work in the same company, and each member of the team has his or her own desk. Colleagues can communicate face to face at any time, and they are very familiar with each other.

But open source projects are different, and contributors to open source projects can be very geographically distributed and diverse.

I didn’t realize this before, but I felt like the people working on open source projects didn’t know each other, so there was no communication, and everyone was submitting code in a repository, and then the admin came in and it was done.

In the process of making Vue DevUI, I gradually feel the existence of community. Everyone participating in the open source project is more like watering the fruit trees in an orchard. All the people participating in the open source project belong to the orchard.

The difference is that some landowners take care of this patch of fruit, and some landowners take care of that patch of fruit, and sometimes IF I don’t have time, you might water my patch of fruit, and I’ll help you, so we can all maintain a patch of fruit together. When the tree bears its fruit, everyone harvests and shares.

New members, to the community is strange at first, he really needs a sense of belonging, he don’t know how to start, for example, if you have already into the friend told his guide how to do it, or tell what he should look at documents, then he will feel in touch with the community, thus forming a sense of belonging and feel I belong to the community. Just like when we come to a new company or school, I think you will be very happy if you have a tutor or a senior to introduce the company or school to you. If there is no one to talk to and communicate with you, you will definitely feel that you do not belong here.

Therefore, whenever a new member joins the group or a friend mentions PR for the first time, I will welcome him and give him a thumbs up to make him feel that this community is a warm community. I also encourage other owners to do the same to make the new members feel welcome, so that the whole ecology will be more prosperous and stronger.

Ng DevUI 1000 Star

Ng DevUI was open source on Github in June 2019. After more than a year, it finally reached 1000 Star on August 30, 2020. It was not easy!

Xi Big pu Ben! DevUI 1000 star!

We had a cake specially made to celebrate and commemorate this milestone.

The community gave us a lot of valuable suggestions and PR, especially Xiejay, who gave us a lot of constructive suggestions and PR for Ng DevUI open source component library, so he was recommended to become a PMC member of DevUI open source group.

Xiejay is also the founder of React DevUI, which currently has over 10 components. Welcome to join us in building!

Ng DevUI Admin 2.0

Ng DevUI Admin is also an open source project born in response to the needs of the community. In 2019, some partners in the community proposed whether they could create an Admin to facilitate the rapid establishment of the background system. After more than half a year of internal incubation, it was finally released on April 28, 2020, with version 1.0.

Extra extra! DevUI Admin V1.0 released!

Less than six months after the 1.0 release, we released DevUI Admin 2.0, which separated blocks from Admin and introduced a corresponding Angular CLI to help developers use our blocks. It is faster and more convenient to build a background management system based on DevUI Admin.

DevUI Admin 2.0 is out! 🥳

Welcome to use DevUI Admin, and give us feedback, we will continue to improve!

B stand live

The experience of station B live broadcast has been summarized in the previous article and will not be repeated.

Do “Vue DevUI Open Source Guide” live with the village head teacher for a month of feelings

DevUI is recruiting contributors

Both Vue DevUI and Ng DevUI are currently recruiting community contributors, welcome to join us!

Learn the latest Vue3+Vite+TypeScript+JSX technology, get to know the community partners who love learning and open source like you, build an excellent Vue3 component library products, and build an open, friendly and growing open source community ecosystem together!

Add small assistant wechat: Devui-Official to get you into devui technical communication group.

Welcome to: DevUI open Source story, and join the DevUI open source ecosystem to build!