Meeting DevUI
First DevUI
The earliest time to contact DevUI can be traced back to January 2020. At that time, I bought a server at a student price on huawei cloud official website. At that time, I used to visit Huawei cloud official website quite often. Later, I saw The Angular UI framework DevUI in an article, so I went to the DevUI official website and felt good about it. However, I stopped paying attention to it because I did not learn Angular and did not need it for projects.
Meet DevUI again
I met DevUI again in the gold mining article, Vue DevUI already has 10 component members ~ 🥳😋, and I wanted to join after reading the article. But at that time in the heart of their own technology is very vegetables, just graduated this year, no experience accumulation, so dare not immediately comment that want to join, so they will first comment to ask themselves is a fresh graduate students can join.
Unexpectedly, the DevUI team responded very readily, so I added the wechat account of DevUI’s little assistant and joined the core members of the Vue DevUI project.
When I joined the group, I wanted to get Avatar, Input and other simple components to practice my hand. When I entered the warehouse, I was dumbfounded that there were no simple components.
Identify the component
There are only Gantt, Form, Mention, and NavSprite components left in the group.
Finally, the Form component is selected.
The original intention to participate in the DevUI open source project
purpose
The purpose of participating in open source projects is simple
- Improve their technical ability, accumulate more development experience
- Add some extra points to your resume for future job interviews
- To get closer to the big guy
impact
In fact, the most important or want to improve their own technology.
When you get out of school and go to work, you find that what you know and what you know are very few and that your problem-solving skills are not strong enough…
So I chose my motto: “It is more meaningful to strive to improve yourself than to look up to others.” To motivate yourself.
I also wrote this sentence in my wechat signature, the company’s wechat signature, and the cover of my blog
Wechat signature:
Enterprise wechat signature:
Personal blog cover:
feeling
easily
By easy, I don’t mean easy in the sense that development tasks are easy, but easy in the sense that development time points are easy.
Compared with the project at work, the development time of the project at work is tight and the construction period is short. The company hopes that the product can be launched as soon as possible. And do open source projects, more relaxed, are each member of the use of spare time to develop.
challenge
When I first started developing forms, I looked at the Angular version of the Form component and found that forms have a lot of apis and a lot of functions to implement.
So we try to develop, but the headache is the function of form verification. Form verification is divided into two types, one is template-driven verification, the other is responsive form verification.
Responsive form verification well, Zcating boss shared an article a simple responsive form design, and then to refer to the element- Plus source code form implementation, and finally achieve responsive form verification.
More headache is template-driven form verification, when I saw the NG version of template-driven form verification, the verification code is written directly in a single component, for example, the input box needs validation, directly written in the input component. I thought, is this a form validation implementation in a single component? Wailen verifies that the template driver is implemented in the D-Input component. Wailen says it is not implemented in the D-Input component. Therefore, I finally thought that I could use vUE instructions to achieve template-driven form validation.
Adhere to the
At that time, I found it difficult to develop template-driven form validation, so I suggested to Kagol that I would like to develop it with someone else.
Fortunately, I persevered in the end.
methods
As Kagol said, to build this complex component, you need to do the design first, make a minimum working version, and then improve it. This idea really works, and I use it a lot in my work.
When designing the Form component, I watched Chen Jianfeng (the owner of the DataTable field) in the decision group to sort out the details of the DataTable, and I wrote a simple mind map of the Form component by imitating it myself.
harvest
physical
Received a small gift from DevUI team, DevUI customized pillow ~
Personal growth
Here’s an introduction to the Vue DevUI repository, because it is
- 🔥 Learn the latest
Vite+Vue3+TypeScript+JSXtechnology - 🎁 Learn how to design and develop components
- ⭐ get involved in the open source community
- 🎊 Meet a group of friends who love learning and open source
thinking
Must we strive for perfection?
I started developing the Form component around August 8th and didn’t submit the PR for the basic Form until October 7th.
As a matter of fact, I finished the basic version of the Form component at the end of August, but I always wanted to write the component better before submitting it. Just at the beginning of September, there was a new project at work, and the development time was relatively tight. It was 9116 working time for more than a month, so the development progress of the Form was suspended for more than a month. Therefore, I submitted the PR for the basic version of the Form during the National Day holiday. There was no time to fix some of the problems raised by the big check until the work project was finished.
Looking back on what I did, I think I should have submitted the smallest available Form first and then improved it, rather than submitting it when it was perfect.
Thinking about the Form component
According to the ng form component, it is divided into several sub-components: form-label, form-item, form-Control, and form-Operation. Personally, I think we can refer to elder-Plus and keep only the form and form-item components. Incorporating the rest of the functionality into the form-item component makes it easier to write fewer tags when writing template code.