我的 UI 组件库发布了!

查看 209|回复 12
作者:dufu1991   
前言
花了一年多的业余时间做了个移动 web 组件库 - STDF 。在此特别感谢我的老婆大人,承担了家里的很多杂事,才让我有时间做这个东西。
站点: https://stdf.design
GitHub: https://github.com/dufu1991/stdf
欢迎到 GitHub 上提 Issue 和 PR ,使它强大,使它更好!可以帮助到更多的人。
我想说一句,使用 Svelte 和 Tailwind 写代码真的是太爽了!
为何写这个组件库
首先最重要的是补充 Svelte 生态。
关于 UI 组件库,PC 端有很多优秀的产品,但是移动端并没有能与 PC 端比肩的产品,这是由于移动端的特殊性导致的。移动端产品大多数是 To C 业务,这就要求对组件库的灵活性有更高的要求。在设计组件 API 的时候,需要有更多的参数支持可供配置,但又不能设计得太过复杂。而在 UI 设计方面,不能有太多的个性化设计,这样才能达到组件的复用性。
市面上也有很多移动端的组件库,但是使用下来还是有很多痛点,比如一些组件库的设计风格太过个性化,导致组件的复用性不高;一些组件库的可配置 API 太少,无法通过简单的 API 配置出符合业务需求的组件;一些组件库的文档太过高深或简陋,使初上手的人很难理解组件的使用方法;一些组件库的文档和 Demo 中英混杂,难以查阅;一些组件库的 Demo 太少或太简陋,高频使用时无法直接复制使用,降低开发效率等。
在体验过 Svelte 和 Tailwind 之后,发现使用它们开发真的是非常舒服,所以就想着能不能把它们结合起来,做一个移动端的 UI 组件库。这样的话,就能够在移动端也享受到 Svelte 和 Tailwind 带来的开发体验了。
适用场景
在移动端有一种业务场景,应用不算复杂,使用 Vue 或者 React 开发其实会显得「大材小用」了,可能整个应用打包之后的 JS 体积也就几十 KB ,但是使用 Vue 或者 React 开发,这两个库的基础大小就超过了几十 KB ,这样就得不偿失了,而且移动端 To C 应用体积过大是非常不可取的。但是使用纯原生 JS 开发,又会显得开发效率低下,这个时候 Svelte 就是一个很好的选择,它的简洁语法,使原生 JS 代码有了响应式能力。
关于开源
除了 IT ,这个世界上应该没有任何一个行业会有这样一群人,他们把自己的时间和精力投入到一个项目中,然后把这个项目毫无保留地免费开源出来,让全世界的人都可以免费使用,而且还会不断地维护和更新这个项目,这就是开源社区的魅力所在。我崇拜这些改变世界的人,我也想成为其中的一员,哪怕只是一粒尘埃。
不要去讨论哪些什么国内开源环境糟糕之类的话题,把自己的想法 code 出来,然后开源出来,可能不完善,但有人用有人提 issue ,它就是有价值的。开源是一种精神,不需要任何理由,只要你想做,就去做。
结束
前段时间,一个阿里的朋友看到我在写这个组件库,不由发出感叹,还在卷组件库呢!是啊,2023 年了竟然还有人在写组件库。但 STDF 还是有一些非常适合的场景,而且它拥有足够灵活的 API 可供配置,有丰富的示例展示。对比大厂的组件库,它很弱小但也有其存在的价值。
面对来势汹汹的 AI ,写代码这种倾向于固定逻辑的工作可能是最先被 AI 取代的,但是我还是会继续写代码,因为我喜欢这种创造的过程,我喜欢这种思考的过程,我喜欢这种不断学习的过程,我喜欢这种完成一个功能的成就感。
创意,是 AI 无法取代的。
昨晚和一群高中同学吃饭,他又提我写书的玩笑,可惜的是,我的文字细胞已经死了。换个角度,如果将这个组件库的站点、文档、示例全部打印出来,牵强一点,也可以算是一本书了吧!
对世界永远保持敬畏与好奇,生命不息,折腾不止!希望自己永远年轻,永远热泪盈眶。

此文由 GitHub Copilot 辅助完成,但是我并不想感谢它。

组件, 组件库, svelte, 开源

leoQaQ   
首页有个 bug ,滑到底部顶部会一直闪烁
wingkwanli888   
不错啊,没记错的话 Svelte 社区好像还没有符合中国人使用习惯的移动端开源 UI 库,这应该是第一个
zyj1022   
顶一个!!
qiayue   
看起来不错。
起步教程那里,需要能够写一篇完全 step by step 的教程给后端看,完全不会也不懂前端工程搭建,看到你的文档也不知道该怎么操作。
296727   
首页的 fps 只有 4 ,卡的不行
linauror   
这个默认蓝色有点刺眼的感觉
296727   
https://imgur.com/a/g2j2Gma
andrew2558   
提个建议:组件页面,可以将组件的展示突出些(在屏幕中间,占用大部分空间),而代码可以收缩起来,当用户有需要时再手动展开代码
jerry12547   
首页那个 3d 动画有点卡
您需要登录后才可以回帖 登录 | 立即注册

返回顶部