Kagol：2022年最值得推荐的前端开源文章

大家好，我是 Kagol，Vue DevUI 作者，从2020年开始一直专注于前端开源组件库的建设，在前端开源组件库、开源社区运营方面积累了一些经验，2020年主要的创作也是围绕前端组件库和开源两个主题展开。

我的组件设计积木理论

我觉得界面开发就像搭积木一样有趣，开发之前先把界面拆分成分层的多个模块，然后自顶向下用一个个积木进行拼接，其中最关键的就是组件的设计。

因此我将自己的组件设计观沉淀成了四篇小文，以 Carousel 走马灯组件为例进行深入浅出的阐述。

第一篇是总纲，介绍理论

• 前端开发的积木理论——像搭积木一样做前端开发

第二篇是基于理论的实现

• 用积木理论设计一个灵活好用的Carousel走马灯组件

第三篇是延伸，解释为什么要设计子组件

• CarouseIndicator 组件应用：0行JS代码实现好看的手风琴式折叠卡片效果

第四篇以应用收尾，通过丰富的使用场景描述积木理论的强大

• 用积木理论设计的Carousel组件都有哪些有趣的玩法？

四篇文章层层递进，深入浅出，虽然短小，但是五脏俱全，自成闭环。

开源组件库的沉淀

Vue DevUI 开源组件库组件的设计基本遵循积木理论，这个组件库是100多位社区开发者一起齐心协力完成的，前期肯定会有一些不统一的地方，不过经过持续的磨合和沟通，目前已经基本保持了一致的风格。

这期间也沉淀了不少 Vue3、Vite、TypeScript、JSX、ESLint 等方面的经验。

点赞最多（289点赞）的是以下这篇 Vue3 中使用 JSX 指南：

• 前端Vuer，请收下这份《Vue3中使用JSX简明语法》

还有一篇是 ESLint 相关的：

• 前端Vuer，请给你的项目加上 ESLint

以上两篇都是从 Vue DevUI 组件库的开源实践中沉淀下来的。

还有一篇是当时田主大会分享整理的文字版本：

• 从 CDK Tree 源码学习如何开发一个UI无关的 Tree 组件

还有几篇分析组件设计和实现原理的，是我们田主们的投稿。

有一篇分析 Tree 组件搜索功能实现原理的，是 daviForevel 同学的投稿：

• 手把手教你实现 Tree 组件搜索过滤功能，干货满满！

分析细粒度骨架屏组件设计原理的，是 ivestszheng 同学的投稿：

• 骨架屏优化——细粒度模式的实现

详解 Ripple 水波纹组件实现原理的，是 ErKeLost 同学的投稿：

• Ripple：这个广受好评的水波纹组件，你不打算了解下怎么实现的吗？

还有一些是搭建组件库的实践文章，也是我们的田主写的：

• vaebe 同学的 从零到一建立属于自己的前端组件库
• 还是 vaebe 同学的 你有没有好奇过vue文档的检索是怎么实现的？
• GaoNeng 同学的 包教包会 - 手把手为组件库支持volar

还有一些零散的总结：

• 介绍 Vue 优势的 老板：你为什么要选择 Vue？
• git rebase 变基操作的 好慌，我代码没了！不会是变基变出问题了吧？

不得不说，开源是一个巨大的宝库，如果你能好好利用，他能大大扩展你的技术视野，掌握你在平时开发业务时很难有机会掌握的技能，这些技能可以让你从另一个高度开发业务开发。

而且开源和公司开发最大的不同在于：开源是完全自由的，你可以随意根据自己的兴趣爱好选择要学习的项目和技术，并且有一帮志同道合的朋友和你一起成长，参与开源的经历会成为你编程人生很值得回忆的一段时光。

至少对我是如此。

一个开源社区运营小白的开源经验总结

2022年的年中总结我没有像以往那样仅仅罗列一堆花里胡哨的数据，而是花了很大篇幅总结我自己从一个开源小白，到慢慢感受到开源的魅力，我的所思所想。

• 我的开源思考

主要阐述我对开源动机、开源贡献、开源协作等的理解。

另外我还首次系统性地总结了我对于从0到1运营一个开源项目的理解，本来这篇文章要投稿到开源中国主办的《开源观止》10月刊的，结果《开源观止》从6月份到9月份发了4月份就停刊啦，很遗憾没有发布出来。

• DevUI 开源经验：从启动开源项目到运营开源社区

不过很幸运的是，我在做开源项目中总结的经验，有机会在中国开源年会成都分会场现场给大家进行分享，分享完 Raye 整理了一份文字稿。

• 从0到1开始运营你的开源项目——华为云DevUI成长经验分享

除了开源社区运营经验的分享，还写了好多版本推广文章。

Vue DevUI 的有3篇：

• 303点赞 Vue DevUI 1.0 正式发布
• 174点赞 Vue DevUI：100多位贡献者持续530多天，写了近60000行代码，这个新鲜出炉的 Vue3 组件库你不想尝试下吗？
• Vue DevUI v1.4 版本发布：从体验、效率、质量三个方面做了全方位的优化

Ng DevUI 的有3篇：

• Ng DevUI 周下载量突破1000啦！
• Ng DevUI 14 released!
• Angular DevUI 14.1.0版本已发布，快来看下都有哪些变化吧~

React DevUI 的有2篇：

• React DevUI：React 18 还没正式发布，我们已经开发了一个基于 React 18 的组件库
• React DevUI 18.0 正式发布

以及一些组件库周边的文章，比如：

• 主题定制的相关的 20行代码，给你的项目增加 DevUI 主题切换能力
• 规范相关的 如何在1分钟之内创建一个符合规范的DevUI组件
• 测试相关的 请收下这份《Vue DevUI 公开测试参考指南》
• 开源趣事的 差两个像素让我很难受，这问题绝不允许留到明年！

最后推荐下我自己的2022年开源总结，写了两个周末才写完的，请大家帮忙点个赞，谢谢！

把时间沉淀到自己的热爱里 | Kagol 的 2022 开源年终总结

另外，我正在参加掘金年度人气作者打榜活动，欢迎大家来捧场支持争取进个前50

https://rank.juejin.cn/rank/2022/writer/1504599026445150

--- END ---

我是 Kagol，如果你喜欢我的文章，可以给我点个赞，关注我的掘金账号和公众号 Kagol，一起交流前端技术、一起做开源！