Awesomes.cn has helped a lot of front-end developers since its release. In fact, in terms of experience and UI, we have done a good job, and we have been recognized by many students. But we decided to do a complete refactoring, or redevelopment, to be exact. As the lead developer of the new version of Awesomes, I’d like to talk about some of my thoughts.
Why redevelopment?
Awesomes created the original intention is to help the front-end developers better open source front library, is on our development team perspective, there is another important reason is that we want to do a according to our own ideas and design of products, not involved with product manager, do the thing that oneself like, a real and valuable. It’s also interesting to experiment with new front-end technologies and apply them to Awesomes, which is why we chose open source.
The first version of awesomes.cn was developed in Rails, and it was around that time that I was influenced by many of Rails’ best ideas. As I made a full shift to front-end development, during which TIME I was exposed to Node, I wanted to try out the full-stack development model of Node, since Awesomes itself is a front-end framework site. And so, after a lot of hesitation, we began the process of reinventing ourselves from scratch.
Technology stack selection
The most popular front-end framework is undoubtedly the rise of various MVVM frameworks. We choose Vue as our main front-end framework, and then request data through the interface. The whole development based on Vue componentization brings the improvement of development efficiency and maintainability. However, there are some disadvantages to this model, such as SEO is not friendly. It just so happened that vue 2.x brought SSR (server-side rendering) to us, so we decided to go in that direction. The SSR function is available, and the Vue Router can also be used to make things, but it is obviously difficult to make the whole project, I still hope to have a complete solution. So I turned my attention to a framework I’d read about earlier: Nuxt. After a period of trial development, I found it was exactly what I needed. Although there were many problems in the process, they were solved in the active community. I also recommend students to try it.
About the choice of UI framework
At the beginning, I decided to choose one of Vue’s component frameworks. Naturally, I chose the Element with the largest number of stars, and it didn’t take much effort to integrate into NUxT. However, later on, I found that there were fewer elements used, and many UI did not conform to our style, such as message prompt. Personally, I prefer the style of Bootstrap, because it can quickly encapsulate a required component. We hope it will be lighter and more free, so we finally choose Bootstrap 4.
About open source
As a non-tool-based library, open source itself does not have much value, but we still choose open source in the end, on the one hand, we hope that it can serve as a Demo for learning new front-end technologies, and on the other hand, we hope that more students can join us to improve Awesomes.
Function of adjustment
With this update, we’ve improved every feature to a certain extent, tweaking the data presentation and UI. Some important features have been added:
The front-end intelligence
As a community around front-end frameworks, we desperately needed a place to get the latest front-end news, major updates to the framework, and so on. Front-end Intelligence came into being, and you can read about it here: Which frame has stopped maintenance, and out of what awesome frame and other front-end consulting, the final goal is actually and our “front-end TOP100” similar, let you keep up with the pace of front-end development, expand your front-end vision.
Conclusion: at present, the new version of awesomes.cn is still under development and improvement, and there are many bugs that have not been dealt with yet. Please bear with us and report some bugs and suggestions.