写在新版 Awesomes.cn 发布之时

976 阅读4分钟
原文链接: zhuanlan.zhihu.com

Awesomes.cn 自发布以来帮助了不少的前端开发者,其实就体验和UI上来说,我们做得还算不错了,也得到了很多同学的认可。但是我们依然决定做一个彻底的重构,准确来说是重新开发。作为Awesomes新版的主要开发者,我想谈谈自己的一些想法。

<img src="https://pic4.zhimg.com/v2-c42a515e3f4fb4e6d3a445fb8eca83cb_b.png" data-rawwidth="1348" data-rawheight="1230" class="origin_image zh-lightbox-thumb" width="1348" data-original="https://pic4.zhimg.com/v2-c42a515e3f4fb4e6d3a445fb8eca83cb_r.png">

为什么要重新开发?

Awesomes 创建的初衷是帮助前端开发者更好地选择开源前端库,站在我们开发团队的角度来说,还有一个重要的原因是,我们想做一个按照我们自己的想法和设计出来的产品,没有产品经理的参与,做一个真正自己喜欢的东西,并且有价值。此外,尝试捣鼓新的前端技术,并将其运用到 Awesomes 中,本身也是一件很有意思的事,这也是我们选择开源的目的。

第一版的 Awesomes.cn 是用 Rails 开发的,也就是在那个时候,我接受了很多 Rails 的优秀思想,并深受其影响。后来我全面转向了前端开发,期间也接触了 Node,于是我想尝试一下Node 的全栈开发模式,毕竟 Awesomes 本身是一个专注前端框架的网站。 就这样,在经历过多次犹豫之后,我们开始了从头改造的进程。

技术栈选择

前端当下最流行的无疑是各种 MVVM 框架的兴起,我们选择了 Vue 作为我们的前端主框架,然后通过接口请求数据,整个基于 vue 组件化开发,带来的是开发效率和可维护性的提升。不过这种模式会有一些不太好的地方,比如SEO不友好。恰巧 vue 2.x 版本给我们带来了SSR(服务端渲染),于是我们决定往这个方向走。 SSR 功能是有了,搭配 Vue Router 也能把东西做出来,但是把整个项目做出来显然很费劲,我仍然希望有一个完整的解决方案。于是我把注意力转向了之前了解到的一个框架:Nuxt。经过一段时间的试开发后,发现它正是我需要的东西,虽然过程中遇到了很多坑,但都在活跃的社区中得到了解决,在此也推荐各位同学去尝试一下。

关于 UI 框架的选择

一开始我是决定在 Vue 的组件框架中选择一个的,自然是选择了 star 数最多的 Element,也没费多大劲就融入了 nuxt,但是越到后面发现用到的Element组件越少,很多UI并不符合我们的风格,比如消息提示,个人倒是更喜欢 bootstrap 的风格,基于它也能很快封装一个自己需要的组件出来,我们希望它更轻更自由,于是最终我们选择了 Bootstrap 4。

关于开源

作为一个非工具型的库,开源本身并没有多大的价值,但最终我们仍然选择了开源,一方面是希望能作为一个前端新技术学习的 Demo,另外一方面是希望更多的同学能加入进来一起完善 Awesomes。

功能调整

这次的更新我们对每个功能都进行了一定程度的优化,调整了数据展现和 UI。同时新增了一些重要的功能:

前端情报

作为一个围绕前端框架的社区,我们迫切需要一个地方能够获取最新的前端新闻,框架重大更新等等,「前端情报」便应运而生了,你可以在这里了解到:哪个框架又停止维护了,又出了什么牛逼的框架等前端最新的咨询,最终目地其实和我们的「前端TOP100」类似,让你跟上前端发展的步伐,扩充你的前端视野。

<img src="https://pic4.zhimg.com/v2-1919da959dcd23764938434b4d8fc82f_b.png" data-rawwidth="1348" data-rawheight="1651" class="origin_image zh-lightbox-thumb" width="1348" data-original="https://pic4.zhimg.com/v2-1919da959dcd23764938434b4d8fc82f_r.png">

结语:目前新版 Awesomes.cn 仍处于开发完善中,很多地方都还存在尚未处理的 bug,请大家多多包涵,也希望大家能报告一下遇到的 bug 以及建议。