花了一年多的业余时间做了个移动 web 组件库 - STDF 。在此特别感谢我的老婆大人,承担了家里的很多杂事,才让我有时间做这个东西。
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 辅助完成,但是我并不想感谢它。
![]() | 1 leoQaQ 2023-04-28 16:40:08 +08:00 首页有个 bug ,滑到底部顶部会一直闪烁 |
2 wingkwanli888 2023-04-28 16:41:37 +08:00 via iPhone 不错啊,没记错的话 Svelte 社区好像还没有符合中国人使用习惯的移动端开源 UI 库,这应该是第一个 |
![]() |   3 zyj1022 2023-04-28 16:45:59 +08:00 顶一个!! |
![]() | 4 qiayue PRO 看起来不错。 起步教程那里,需要能够写一篇完全 step by step 的教程给后端看,完全不会也不懂前端工程搭建,看到你的文档也不知道该怎么操作。 |
5 296727 2023-04-28 16:47:56 +08:00 首页的 fps 只有 4 ,卡的不行 |
6 linauror 2023-04-28 16:48:03 +08:00 ![]() 这个默认蓝色有点刺眼的感觉 |
7 296727 2023-04-28 16:50:41 +08:00 |
8 andrew2558 2023-04-28 16:51:42 +08:00 提个建议:组件页面,可以将组件的展示突出些(在屏幕中间,占用大部分空间),而代码可以收缩起来,当用户有需要时再手动展开代码 |
![]() | 9 jerry12547 2023-04-28 16:51:57 +08:00 首页那个 3d 动画有点卡 |
![]() | 10 yangheng4922 2023-04-28 16:51:58 +08:00 好看 ,动画也很丝滑 |
11 aper 2023-04-28 16:52:39 +08:00 CPU 10700 打开首页 CPU 占用 100% |
12 xwayway 2023-04-28 16:55:32 +08:00 不错不错 |
![]() | 13 yikeshuo 2023-04-28 16:58:41 +08:00 赞赞 |
![]() | 14 17681880207 2023-04-28 16:59:43 +08:00 ![]() Open Srouce 对程序员而言,就是精神上的桃花源,美好又神圣~相信每一个 Star 和 Issue 都会给每一个开源作者内心无比的满足。 如果我也可以像作者一样,那我觉得这件事情... |
![]() | 15 AnroZ 2023-04-28 17:01:05 +08:00 作为外行,看着还以,点赞 |
![]() | 16 LiuJiang 2023-04-28 17:01:14 +08:00 牛批,赞赞赞,很棒!支持下! |
17 Laobai 2023-04-28 17:10:14 +08:00 老哥,牛批!!! |
![]() | 18 2I0Mto2kjm0c0B9i 2023-04-28 17:20:45 +08:00 赞 |
19 luoxiang 2023-04-28 17:23:01 +08:00 niubi |
![]() | 20 imchenlong 2023-04-28 17:24:07 +08:00 非常不错。 |
21 1044523901 2023-04-28 17:25:36 +08:00 人手一个 ui 库啊,不错~ |
![]() | 22 KevinDo2 2023-04-28 17:26:50 +08:00 你组件库里的开关组件动效好爽好解压啊,我刚刚切换了几十次 |
![]() | 23 tracerking 2023-04-28 17:28:47 +08:00 不错不错 最近我也在搞基于 svelte 的 ui 组件 没想到已经出来了 |
24 llo 2023-04-28 17:30:37 +08:00 赶紧非常不错 |
![]() | 25 BeijingBaby 2023-04-28 17:35:32 +08:00 看了一下很赞,下期 dev.com.cn 周报推荐一下 (个人原因停更几期,马上恢复更新) |
![]() | 26 IamJ 2023-04-28 17:41:06 +08:00 赞。楼主这文档网站是用什么搭的? |
![]() | 27 TaoLoading 2023-04-28 17:43:26 +08:00 OP 牛逼。另外官网有点小 bug ,当顶部操作栏与“优势 & 目标”的第二行头部位置重叠时,会有闪烁 |
28 chenpbh 2023-04-28 17:43:29 +08:00 dota |
![]() | 30 dufu1991 OP @296727 首页因为有 3D 模型,开始渲染的时候会比较吃 CPU 和 GPU ,确实会掉帧,加载完成后还好。不过一般首页也就第一次打开会看一下,后续都主要是在组件页面。 |
![]() | 32 dufu1991 OP @andrew2558 我开发的个人喜好是,找到 Demo 中符合自己的部分,直接复制代码使用,不用再去查看具体 API 。所以 STDF 的 Demo 写的非常多,多到有点罗嗦的地步。所以我认为代码部分很重要。 |
![]() | 33 dufu1991 OP @tracerking 可以搞桌面端的,那才是大工程。 |
![]() | 34 dufu1991 OP @IamJ 就是 Svelte 和 Tailwind ,只是搭建得很早,当时 Vite 还不成熟,打包使用的还是 Rollup 。Demo 用的就是 Vite 。 |
![]() | 36 assclb 2023-04-28 17:56:51 +08:00 已 star |
![]() | 38 azui999 2023-04-28 18:09:33 +08:00 看的晕了, |
![]() | 39 WGinit 2023-04-28 18:39:20 +08:00 点赞,看到了前端老哥的情怀 |
![]() | 40 intmax2147483647 2023-04-28 18:51:55 +08:00 一个人做的吗 |
![]() | 41 akring 2023-04-28 19:06:37 +08:00 网站没做宽屏适配的吗,34 寸带鱼屏看起来有点诡异 |
![]() | 42 buxudashi 2023-04-28 19:09:38 +08:00 但是一旦使用,就得又定制。 这一弄组件库就得改,改起来的成本 也不小。 |
![]() | 43 beginor 2023-04-28 19:09:52 +08:00 赞! 开源传万世,因有我参与! |
![]() | 44 dreamramon 2023-04-28 19:16:00 +08:00 最好有个教程能让后端的同学直接开工。。。 |
![]() | 45 earthmessenger 2023-04-28 19:45:25 +08:00 组件文档标题旁的句子挺有趣的 |
![]() | 46 yamedie 2023-04-28 19:52:11 +08:00 终于看到一个 Material Design 风格以外的“完成度足够高的 Svelte 组件库”,收藏了,感谢楼主的付出! ----- 但还是想杠一下关于开源的那段话,愿意开源的职业应该有很多种吧,学者、作家、教师、医生…… 另外 IT 也有相当一部分人达不到有作品可以开源的水平(他们只会 CURD 或者调包),还有很大一部分人闭源赚钱…… (我的意思是没必要太刻意的把 IT 升格 XD ) ----- 草草看了一下,关于组件库提点小建议: 1 、很多尺寸的定义写在 script 里,比如在 TabBar 的 labels 里定义 size: 20 ,这个怎么适配不同分辨率的移动设备?比如我用 iPad Mini 屏幕宽度有 768px ,看这个 TabBar 时,图标大小仍然是很小的 20px ,四个图标之间有巨大的空档。我不知道 postCSS 的 px2rem 插件方不方便跟这个组件库集成起来……(怎么实现 px 自动转换成 rem 或 vw 单位,以适配多种屏幕尺寸?) 2 、Loading 组件竟然有十几种之多,type="1_1"这种命名方式有点不严谨,以后扩展只能是 1_18 或 2_1 这样了吗,能不能尽量把它们语义化 3 、Picker 不支持点击选区外的选项来让它被选中,我只能拨动来选中某一项,这类交互还得多参考一下 Vant 之类的组件库 |
![]() | 47 ashong 2023-04-28 20:09:00 +08:00 demo slider 不工作 |
![]() | 48 Imindzzz 2023-04-28 20:21:49 +08:00 可能还是因为移动端定制化要求比较高,导致没啥组件库 |
![]() | 49 dufu1991 OP |
![]() | 50 ohwind 2023-04-28 21:12:41 +08:00 很棒!希望不会有人端起碗吃饭放下碗骂娘 |
51 nnegier 2023-04-28 21:23:27 +08:00 via Android 很丝滑哇 |
![]() | 52 dufu1991 OP @TaoLoading 已修正 |
![]() | 54 dufu1991 OP @dreamramon 正在计划中 |
![]() | 56 wananzz 2023-04-29 00:36:27 +08:00 看了下,是挺不错的,蹲个 Figma 文件… |
![]() | 57 oyjt 2023-04-29 00:58:14 +08:00 很不错的组件库,每个组件都包含了多种丰富的使用样式,很强大也很实用。支持作者,已 Start |
58 jigi330 2023-04-29 01:46:51 +08:00 666 |
![]() | 59 QKgf555H87Fp0cth 2023-04-29 02:39:40 +08:00 国内开源还是比较差点。大家压力都大,又比较少赞助,贡献的人也少。 有的是,为了 KPI 。用过他们的,半成品...,标签的 CSS 没法传参数进去,只能放弃,像 MUI 就很完善。 有的是,工作刚好需要用到,所以开源,后面不需要用到了,就年久失修。 有的是,官方自己都不更新,比如又拍云。 有的是,提交 Issue ,说暂不支持。 有的是,申请两次 QQ 群,两三天都还没审核。 有的是,提交了 Issue ,都没合并也没拒绝。 有翻译过一点点,比如 MediaWiki 、PHP 、Laravel 、MUI 等,也 GitHub 赞助某人,也自己写点自己用的库,不过还是力量薄弱,跟玩似的。还是得靠你们。 |
![]() | 60 Aloento 2023-04-29 04:49:35 +08:00 非常不错;能看出来 OP 不是专业做设计的( |
61 luodan 2023-04-29 05:41:27 +08:00 不错!已收藏。发现一个 bug, 日期选择框,Range selection, 选完以后,开始结束日期都向前移动了一天。 |
![]() | 62 chaoschick 2023-04-29 07:13:52 +08:00 没有 table 呢 |
![]() | 63 iTakeo 2023-04-29 09:09:37 +08:00 via iPhone 轮播图有点 bug ,动画没结束再左右滑动,图片会跳动 |
![]() | 64 iTakeo 2023-04-29 09:15:07 +08:00 via iPhone 时间 picker ,先选择日期。再选择月份,结果日期默认归 1 了,这点不合理;而且选中 2 月,再选择年份也归 1 了。虽然是为了判断闰月这种,但是我觉得交互逻辑可以再优化一下。 |
![]() | 65 TomPig0216 2023-04-29 10:50:32 +08:00 @17681880207 泰酷辣! |
![]() | 67 MXMIS 2023-04-29 11:23:04 +08:00 不错,但是我从演示站首页往下滑第一次会有卡顿 |
![]() | 68 turan12 2023-04-29 11:42:40 +08:00 via iPhone 楼主牛逼。我准备尝试一下,到时候做好了告诉 op |
![]() | 69 yushiro 2023-04-29 12:19:19 +08:00 via iPhone 默认的颜色饱和度太高了,特别是那个蓝色,看的刺眼。 |
![]() | 70 Dream4U 2023-04-29 15:24:48 +08:00 牛逼。 整体很棒,就是默认配色确实有点刺眼睛。 借题请教一下 OP ,移动端示例里面 Safari 禁用缩放是用的什么代码? |
72 chihiro2014 2023-04-29 18:37:30 +08:00 站点感觉很卡顿? |
![]() | 73 sechi 2023-04-29 18:42:07 +08:00 via Android 第一次接触 svelte 的组件库,还不错!支持 op |
![]() | 74 Azad01 2023-04-29 20:09:25 +08:00 太赞了!对前端工作者很友好 |
![]() | 75 dufu1991 OP @intmax2147483647 是啊,业余时间太少了,周期有点长。 |
![]() | 76 FightPig 2023-04-29 20:20:59 +08:00 不错,上次发现一个 sevlte 的 ui ,BeerUi 也不错,没想到又有新的出了 |
![]() | 77 dufu1991 OP @chihiro2014 首页有 3D 模型,渲染的时候可能比较吃性能。但是多数时候应该是在组件页面。 |
79 Mindzy 2023-04-29 21:45:25 +08:00 更好奇首页的 3D 模型怎么做的,来个教程 |
![]() | 80 majunbo 2023-04-29 22:13:02 +08:00 github 上的 demo 二维码扫码出来的地址: 1 、步骤条 太慢了; 2 、实例主页无法向下滚动(原因不知道是点击哪个组件后导致的,测试了几次没有发现规律); 3 、日历示例选择的时候有时选不中,也可能是慢; 安卓手机,微信 8.0.35 扫码后的结果,其他没仔细看,希望楼主有时间再测试一下。 |
![]() | 81 zhw2590582 2023-04-29 22:13:49 +08:00 这个白底蓝色太刺眼了啊 |
![]() | 82 qbhy 2023-04-29 22:43:30 +08:00 牛逼,已点赞。 顺手发一下我写的 Golang 框架 github.com/goal-web/goal ,目前正在写文档 |
![]() | 83 dufu1991 OP @majunbo 1 、步骤条同一个页面的 Demo 数据,加载渲染可能会有点慢,对比其他页面也就大概 1S 左右的区别,正常页面不会在同一个页面同时加载如此多的 Step 。 2 、在有弹出层的页面(如 Dialog )弹出内容,不要关闭,此时利用系统返回上一页就会出现,原因是在使用到 Popup 组件的时候,为了防止滚动穿透,在有弹出内容的时候,默认阻止了 body 滚动,弹出内容关闭时又恢复。如果不关闭弹出层使用系统级返回上一级,此时 body 是禁止滚动的。 3 、我在 iOS 的微信浏览器内未发现,MIUI 的 Android 内未发现,麻烦发一下具体手机型号和系统版本。微信魔改的 X5 内核与主流的 web 标准相差越来越远,性能方面也是堪忧,只能发现问题针对性地修改。 |
![]() | 85 dufu1991 OP @ashong 你是在桌面端吗?有没有注意到一行字「 Slider 区域绑定了 Touch 事件,请直接在移动设备或通过开发者工具模拟移动设备预览。」 |
![]() | 87 dufu1991 OP @chaoschick 移动设备上可是区域这么小,table 好像没有一个好的展示方式和适用场景,其他移动端组件库好像也没怎么看到 table 组件。 |
![]() | 88 dufu1991 OP @iTakeo 确实是考虑到闰月的情况,比如先选择 0331 ,再选择 2 月,日就会恢复到 1 。出于两点考虑,技术层面,不用单独对每一个年每一个月份单独处理,逻辑处理上会简单很多;更重要的是从交互层面考虑,大多数情况,重新选择月份时日是不会改变的,这就会给用户一个心理预期,但是当先选择 0331 ,再选择 2 月,如果判断是否是闰月之后,自动显示 28 或 29 ,粗心的用户会根据心理预期而忽略了日的变动,索性让其区别更加明显,「强迫」其重新选择。这是我的考虑。 |
![]() | 90 dufu1991 OP @Socrazy 应该有很多方式,我用的是 ```Javascript document.addEventListener('gesturestart', function (event) { event.preventDefault(); }); ``` |
![]() | 91 dufu1991 OP @dufu1991 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好地建议? |
![]() | 92 dufu1991 OP @yamedie 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好的建议? |
![]() | 93 iTakeo 2023-04-30 20:44:19 +08:00 via iPhone @dufu1991 时间 picker 我也写过,我的处理方法是尽量减少用户的负担,假如用户选择了 3 月份的 30 ,后面又选择了 2 月,就默认跳到 28 ,不归 1 ,如果用户又切回了 3 月,再默认回到 30 |
![]() | 96 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 的生态中走的更远 |
![]() | 97 dufu1991 OP @yuedanwork 确实需要实际项目来验证使用是否方便。 |
![]() | 98 dufu1991 OP @dreamramon 最近新增了个脚手架,可以尝试一下。 |
100 ads1029 2023-08-30 17:15:54 +08:00 太强了! 总觉得国内对 svelte 和 tailwind 的态度不咸不淡,真心感激 op 的付出,希望能有更多人加入这个社区吧 |