我的 UI 组件库发布了!

2023-04-28 16:34:59 +08:00
 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 辅助完成,但是我并不想感谢它。

7963 次点击
所在节点    JavaScript
101 条回复
zhw2590582
2023-04-29 22:13:49 +08:00
这个白底蓝色太刺眼了啊
qbhy
2023-04-29 22:43:30 +08:00
牛逼,已点赞。
顺手发一下我写的 Golang 框架 github.com/goal-web/goal ,目前正在写文档
dufu1991
2023-04-30 00:12:14 +08:00
@majunbo 1 、步骤条同一个页面的 Demo 数据,加载渲染可能会有点慢,对比其他页面也就大概 1S 左右的区别,正常页面不会在同一个页面同时加载如此多的 Step 。
2 、在有弹出层的页面(如 Dialog )弹出内容,不要关闭,此时利用系统返回上一页就会出现,原因是在使用到 Popup 组件的时候,为了防止滚动穿透,在有弹出内容的时候,默认阻止了 body 滚动,弹出内容关闭时又恢复。如果不关闭弹出层使用系统级返回上一级,此时 body 是禁止滚动的。
3 、我在 iOS 的微信浏览器内未发现,MIUI 的 Android 内未发现,麻烦发一下具体手机型号和系统版本。微信魔改的 X5 内核与主流的 web 标准相差越来越远,性能方面也是堪忧,只能发现问题针对性地修改。
dufu1991
2023-04-30 00:13:17 +08:00
@Mindzy 打开 F12 看标签名称应该看得出来。
dufu1991
2023-04-30 00:15:41 +08:00
@ashong 你是在桌面端吗?有没有注意到一行字「 Slider 区域绑定了 Touch 事件,请直接在移动设备或通过开发者工具模拟移动设备预览。」
dufu1991
2023-04-30 00:20:22 +08:00
@yamedie 感谢,这 3 点建议都很中肯,我仔细研究一下。
dufu1991
2023-04-30 00:24:35 +08:00
@chaoschick 移动设备上可是区域这么小,table 好像没有一个好的展示方式和适用场景,其他移动端组件库好像也没怎么看到 table 组件。
dufu1991
2023-04-30 00:37:29 +08:00
@iTakeo 确实是考虑到闰月的情况,比如先选择 0331 ,再选择 2 月,日就会恢复到 1 。出于两点考虑,技术层面,不用单独对每一个年每一个月份单独处理,逻辑处理上会简单很多;更重要的是从交互层面考虑,大多数情况,重新选择月份时日是不会改变的,这就会给用户一个心理预期,但是当先选择 0331 ,再选择 2 月,如果判断是否是闰月之后,自动显示 28 或 29 ,粗心的用户会根据心理预期而忽略了日的变动,索性让其区别更加明显,「强迫」其重新选择。这是我的考虑。
dufu1991
2023-04-30 00:40:11 +08:00
@MXMIS 你滑动的区域是不是在 3D 模型内?那是模型区域,不属于文档内滚动。
dufu1991
2023-04-30 00:56:17 +08:00
@Socrazy 应该有很多方式,我用的是
```javascript
document.addEventListener('gesturestart', function (event) {
event.preventDefault();
});
```
dufu1991
2023-04-30 11:12:58 +08:00
@dufu1991 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好地建议?
dufu1991
2023-04-30 11:17:48 +08:00
@yamedie 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好的建议?
iTakeo
2023-04-30 20:44:19 +08:00
@dufu1991 时间 picker 我也写过,我的处理方法是尽量减少用户的负担,假如用户选择了 3 月份的 30 ,后面又选择了 2 月,就默认跳到 28 ,不归 1 ,如果用户又切回了 3 月,再默认回到 30
majunbo
2023-05-01 11:44:38 +08:00
@dufu1991 荣耀 50 ,版本号 7.0.0.135 ,安卓版本 12
leoQaQ
2023-05-04 10:32:47 +08:00
@dufu1991 桌面端,bug 已经无了
yuedanwork
2023-05-04 16:03:35 +08:00
感谢 op 的组件库,看到该项目的当天就已在我的 Chrome 插件项目用上了

一直都在找一个比较好用的轻量的基于 tw 的 svelte 组件库(因为本身也不是大项目 只需要少数的组件即可),op 这个库解决了我的需求。在此感谢 op

项目地址: https://github.com/yuedanlabs/icp-query-extension

Chrome 插件地址: https://chrome.google.com/webstore/detail/icp-query-extension/plmfnmaihcmijdanpbondfejclejejfa

同时插件昨天更新了部分功能,也欢迎感兴趣的小伙伴体验

使用下来对组件库也有一些需要完善的地方,未来有时间我也会考虑根据自己的需要贡献一点代码,希望 op 的项目在 svelte 的生态中走的更远
dufu1991
2023-05-04 17:25:26 +08:00
@yuedanwork 确实需要实际项目来验证使用是否方便。
dufu1991
2023-07-28 16:43:04 +08:00
@dreamramon 最近新增了个脚手架,可以尝试一下。
dufu1991
2023-07-28 16:52:10 +08:00
@ashong 增加了指针事件,鼠标也可以操作
ads1029
2023-08-30 17:15:54 +08:00
太强了! 总觉得国内对 svelte 和 tailwind 的态度不咸不淡,真心感激 op 的付出,希望能有更多人加入这个社区吧

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/936264

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX