“This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!”
When I was a graduate student, I used Vue2.0 to make an overwatch UI library.
I was obsessed with Overwatch, and one day I had an idea: What if I made the UI in the game into a front-end component library? And then I started doing it step by step, and finally I realized it.
- Overwatch UI website
- Github: overwatch-ui
Of course, it’s hard to write purely by yourself, so I read a lot of blogs, articles and videos during the implementation process.
Alas, time flies, it has been nearly 3 years. At that time, I just wanted to post it on V2ex to get a “like”. Today, I happened to see this topic, so LET’s share my experience of making this component library. I hope it can give you some inspiration ~
research
First of all, figure out what your component library is for. A programmer’s worst fear is ambiguity, but the same thing often happens when you build your own wheels.
In general, wheels are built for a few purposes:
- Be a pussy and write your resume. As the interview process continues, people who have never built a wheel are embarrassed to say they are the front end.
- Solve the problem. Discover on the market is not good, oneself write one.
- Just for fun. I’m one of those guys. Oh, it’s fun.
Someone said, “I’ll just build a wheel.” Is there a ready-made wheel on the market, and does the ready-made wheel solve your current problem?
To this, a lot of people began to retreat: alas, others have achieved, I still go back to play games. This is because you haven’t read through the tool and haven’t looked at the source code. In fact, all projects will have some flaws, no matter how many stars, there will be endless issues waiting to be dealt with. You only have to deal with one of them, not many, just one.
At the time, I was inspired by a Codepen project to create this UI library, and at the time there was no play-style front-end UI library on the market, so it was a good way to fill a gap.
If my UI library is useful, I don’t think it’s any good. I just want to see how it works. Oh, it’s fun
code
Blacksmithing also needs its own hard, usually write business, more practice components of the packaging ability. You don’t need to wrap everything in wheels, at least in terms of the API usage and the API provided by the component libraries on the market.
In addition, CSS skills also need to be hard. CSS compatibility can really drive you crazy: test it out yourself, and once you put it in certain environments, styles fly. < span style = “box-width: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;”
However, the requirement of component libraries is that CSS styles remain consistent across all environments.
Copy/Innovate
In the past, when it came to building a wheel, everyone thought it was awesome, but in 1202, when it came to building a wheel, everyone was more terrified: please don’t “invent” the wheel! Because a lot of people in the early days “invented” a bunch of weird wheels, resulting in the later people to use the pain.
You can start with 80% emulating market implementations and API designs and leave 20% for innovation. Don’t invent the wheel. Too weird an innovation can be a big mental burden on the user, who also doesn’t trust your wheels. The user may be thinking, “Well, this is not a good idea, so I’m going to use Ant Design.”
One more thing: many programmers can’t get around to copying others’ work. I also don’t recommend copying pixels when making real products. My advice is to “copy” the basic features first. The basic things are implemented almost the same in the market. For example, the button is border-RADIUS: 4px instead of 7px. The point is that there is a little bit of innovation.
Back to my UI library, VERY ashamed, the implementation and API Design copy Ant Design, UI copy overwatch, but my idea is relatively innovative, at least at that time no one has done so, I think this is innovation.
aesthetic
Everyone is to do the front end, are the association of the appearance of the president, there is no good-looking skin almost no will look down.
Now the CSS in my UI library is not so good, but I used the “game skin” gimmick to distract some attention.
Beauty is as easy as it is difficult to say. The easy place is that: looking ahead, the style of domestic UI library is almost the same, mainly small and fresh, while abroad is based on Material style, everyone copy me copy you. The hard part is not breaking through the aesthetic: your component library is similar to Ant Design, why shouldn’t I use Ant Design?
Look at the following two sites for style inspiration
- Many of you have heard of Dribbble, and it has a lot of good design sketches
- Like Dribbble above, Behance also has a lot of nice design sketches
- Lottiefiles I discovered recently, although this is a market for Lottie files, the beautiful designs on them can also inspire a lot of creative work
Usually have time to browse these a few websites more, look for inspiration.
test
No tests, no downloads. When I was doing business, no one wrote tests for several books. On the one hand, there was no time. On the other hand, all test codes were completely rewritten after function iteration.
Write libraries are different, and automated tests are a must. No matter what advanced problem your wheel solves, as long as there is no test coverage, almost no one will use your code. And the component library code is basically the same, so you don’t have to worry about having to do it all over again in one iteration.
Well, to write a test, learn Jest. But the real front-end component single test is not
expect(1 + 1).toEquals(2)
Copy the codeThat’s easy. In my opinion, front-end testing is the most difficult test to write in all technologies. There are too many things to Mock. One thing is not as good as a Mock. In addition to simple assertion operations, you should also know a lot about browser mocks and asynchronous timer mocks. This is extremely difficult for a rookie who hasn’t written a single test.
At that time, when I just started the single test of front-end components, IT was really very painful. After several days, it was failed, failed, failed! Finally, I set up my Mock environment and cried when I saw terminal SUCCESS!
We can start with testing the functions of the utility utils, then move on to testing component props, such as whether props were passed in, whether onClick was called, etc. Then we can test asynchronous functions and Mock some special environments. Finally, run an automated test on Travis.
release
This is one of the most difficult steps that many people encounter when writing a library for the first time: working day and night to get the functionality done, and then reaching the final release stage.
I hated this step myself: I was working so hard on the code, and I had to do the assembly line myself. And this thing and the above single test is the same, one is not good, all cool.
Publish a piece of the NPM publish process, NPM publish, tag, automatic update version, etc., local tests to be familiar with the NPM link command. There are also a lot of Repos on Github that have their own pipeline, so you can look at other people’s deployment and release processes, and see what works first, and then change it more efficiently.
I didn’t do a good job at this step. I didn’t really think that the library would be used by others, so I just automated test a pipline and release it with NPM run release.
README (copywriting)
README is the poster for all Repo, make sure to write beautiful! How many times have you chosen VsCode because of a nice Logo, or a README that is easy to read? The importance of README is self-evident.
The README is as simple as it can be. It doesn’t have to be a redux document that explains the context, the concept, and the third party tools.
Use less text and more graphics, GIFs, and code to showcase your UI component library.
Share my README formula:
- The title
- Product picture, Logo
- What is it (1~2 sentences), plus an official website (even a static web page is better than nothing)
- What problem has been solved?
- How to use (with simple code Demo, the best CodeSandbox, CodePen dynamic Demo) + effect pictures /Gif or video best
- More advanced usage (generally no one has the patience to read this at this point)
- Future/ Why did you make this thing (some personal Versailles crap)
The README is an important step for all libraries, just as it is for component libraries, so don’t think about writing code, calling it a day, going home, and playing games. You need to stand up for the row.
propaganda
If the copywriting ability is an important step, then the propaganda ability is an important step.
Even the best wine fears the deepest alley. Let’s share my own channel, which isn’t that complicated:
The first step is to send a wave of posts to v2ex.com, testing the waters and gathering feedback. The people on this website are generally not small white contestants, your ideas will not fool anyone, almost no one will say mercy, so this is also the most real feedback forum, after Posting to see how the feedback. If it is sprayed, it means that your wheel is not good and needs to be improved. If someone comes up with a better solution, it means that your wheel is not bright. If someone likes it, it can be promoted further.
The second step is to go to zhihu, Nuggets and other technical forums to post, probably means that he made a wheel or something. Do not post so pale: “I did a XXX” on the end, very boring. Learn more about the video of Student He in station B, the whole story, twists and turns, or add some technology: for example, the reason why I did watchwatch UI library was because I came up with this idea when I was playing the game. Do you really want to play the game? No, I had the idea a long time ago, but one day I decided to put the idea into practice while playing a game.
The third step, the ultimate killer, is to go to Ruan Yifeng’s “technology lovers weekly” to contribute, if you are recommended, and your wheel is strong enough to hold such a recommendation, then your Star number will not disappoint you.
ruanyf/weekly
The last
If you really want to implement a component library, you should think of it not just as a component library, but as a product, and the technical part is less important.
Of course, I am not all of these things above to do, but also to write while groping out. Whether your component library succeeds or fails, you will be rewarded. Enjoy the process, not the end result.
If you have a good idea, Go for it! Just do it!