V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
dufu1991
V2EX  ›  JavaScript

我的 UI 组件库发布了!

  •  2
     
  •   dufu1991 · 335 天前 · 7082 次点击
    这是一个创建于 335 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    花了一年多的业余时间做了个移动 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 辅助完成,但是我并不想感谢它。

    101 条回复    2023-09-05 09:25:44 +08:00
    1  2  
    leoQaQ
        1
    leoQaQ  
       335 天前
    首页有个 bug ,滑到底部顶部会一直闪烁
    wingkwanli888
        2
    wingkwanli888  
       335 天前 via iPhone
    不错啊,没记错的话 Svelte 社区好像还没有符合中国人使用习惯的移动端开源 UI 库,这应该是第一个
    zyj1022
        3
    zyj1022  
       335 天前
    顶一个!!
    qiayue
        4
    qiayue  
       335 天前
    看起来不错。
    起步教程那里,需要能够写一篇完全 step by step 的教程给后端看,完全不会也不懂前端工程搭建,看到你的文档也不知道该怎么操作。
    296727
        5
    296727  
       335 天前
    首页的 fps 只有 4 ,卡的不行
    linauror
        6
    linauror  
       335 天前   ❤️ 2
    这个默认蓝色有点刺眼的感觉
    296727
        7
    296727  
       335 天前
    andrew2558
        8
    andrew2558  
       335 天前
    提个建议:组件页面,可以将组件的展示突出些(在屏幕中间,占用大部分空间),而代码可以收缩起来,当用户有需要时再手动展开代码
    jerry12547
        9
    jerry12547  
       335 天前
    首页那个 3d 动画有点卡
    yangheng4922
        10
    yangheng4922  
       335 天前
    好看 ,动画也很丝滑
    aper
        11
    aper  
       335 天前
    CPU 10700 打开首页 CPU 占用 100%
    xwayway
        12
    xwayway  
       335 天前
    不错不错
    yikeshuo
        13
    yikeshuo  
       335 天前
    赞赞
    17681880207
        14
    17681880207  
       335 天前   ❤️ 2
    Open Srouce 对程序员而言,就是精神上的桃花源,美好又神圣~相信每一个 Star 和 Issue 都会给每一个开源作者内心无比的满足。

    如果我也可以像作者一样,那我觉得这件事情...
    AnroZ
        15
    AnroZ  
       335 天前
    作为外行,看着还以,点赞
    LiuJiang
        16
    LiuJiang  
       335 天前
    牛批,赞赞赞,很棒!支持下!
    Laobai
        17
    Laobai  
       335 天前
    老哥,牛批!!!
    iapplebear
        18
    iapplebear  
       335 天前
    luoxiang
        19
    luoxiang  
       335 天前
    niubi
    imchenlong
        20
    imchenlong  
       335 天前
    非常不错。
    1044523901
        21
    1044523901  
       335 天前
    人手一个 ui 库啊,不错~
    KevinDo2
        22
    KevinDo2  
       335 天前
    你组件库里的开关组件动效好爽好解压啊,我刚刚切换了几十次
    tracerking
        23
    tracerking  
       335 天前
    不错不错 最近我也在搞基于 svelte 的 ui 组件 没想到已经出来了
    llo
        24
    llo  
       335 天前
    赶紧非常不错
    BeijingBaby
        25
    BeijingBaby  
       335 天前
    看了一下很赞,下期 dev.com.cn 周报推荐一下
    (个人原因停更几期,马上恢复更新)
    IamJ
        26
    IamJ  
       335 天前
    赞。楼主这文档网站是用什么搭的?
    TaoLoading
        27
    TaoLoading  
       335 天前
    OP 牛逼。另外官网有点小 bug ,当顶部操作栏与“优势 & 目标”的第二行头部位置重叠时,会有闪烁
    chenpbh
        28
    chenpbh  
       335 天前
    dota
    dufu1991
        29
    dufu1991  
    OP
       335 天前
    @leoQaQ 桌面端还是移动端?
    dufu1991
        30
    dufu1991  
    OP
       335 天前
    @296727 首页因为有 3D 模型,开始渲染的时候会比较吃 CPU 和 GPU ,确实会掉帧,加载完成后还好。不过一般首页也就第一次打开会看一下,后续都主要是在组件页面。
    dufu1991
        31
    dufu1991  
    OP
       335 天前
    @qiayue 后续考虑一下
    dufu1991
        32
    dufu1991  
    OP
       335 天前
    @andrew2558 我开发的个人喜好是,找到 Demo 中符合自己的部分,直接复制代码使用,不用再去查看具体 API 。所以 STDF 的 Demo 写的非常多,多到有点罗嗦的地步。所以我认为代码部分很重要。
    dufu1991
        33
    dufu1991  
    OP
       335 天前
    @tracerking 可以搞桌面端的,那才是大工程。
    dufu1991
        34
    dufu1991  
    OP
       335 天前
    @IamJ 就是 Svelte 和 Tailwind ,只是搭建得很早,当时 Vite 还不成熟,打包使用的还是 Rollup 。Demo 用的就是 Vite 。
    IamJ
        35
    IamJ  
       335 天前
    @dufu1991 #34 哦哦,里面的代码示例和 api 是通过什么方案生成的?最近内部要搞个类似的
    assclb
        36
    assclb  
       335 天前
    已 star
    dufu1991
        37
    dufu1991  
    OP
       335 天前   ❤️ 1
    @IamJ 先用插件将 Markdown 转为 HTML ,再用 hljs 将 HTML 高亮。
    azui999
        38
    azui999  
       335 天前
    看的晕了,
    WGinit
        39
    WGinit  
       335 天前
    点赞👍,看到了前端老哥的情怀
    intmax2147483647
        40
    intmax2147483647  
       335 天前
    一个人做的吗
    akring
        41
    akring  
       335 天前
    网站没做宽屏适配的吗,34 寸带鱼屏看起来有点诡异
    buxudashi
        42
    buxudashi  
       335 天前
    但是一旦使用,就得又定制。 这一弄组件库就得改,改起来的成本 也不小。
    beginor
        43
    beginor  
       335 天前
    赞!

    开源传万世,因有我参与!
    dreamramon
        44
    dreamramon  
       335 天前
    最好有个教程能让后端的同学直接开工。。。
    earthmessenger
        45
    earthmessenger  
       335 天前
    组件文档标题旁的句子挺有趣的
    yamedie
        46
    yamedie  
       335 天前
    终于看到一个 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 之类的组件库
    ashong
        47
    ashong  
       335 天前
    demo slider 不工作
    Imindzzz
        48
    Imindzzz  
       335 天前
    可能还是因为移动端定制化要求比较高,导致没啥组件库
    dufu1991
        49
    dufu1991  
    OP
       335 天前 via iPhone
    @linauror
    @dufu1991
    @earthmessenger
    @TaoLoading 是不是 iOS 的 safari ?
    ohwind
        50
    ohwind  
       335 天前
    很棒!希望不会有人端起碗吃饭放下碗骂娘
    nnegier
        51
    nnegier  
       335 天前 via Android
    很丝滑哇
    dufu1991
        52
    dufu1991  
    OP
       335 天前
    @TaoLoading 已修正
    dufu1991
        53
    dufu1991  
    OP
       335 天前
    @akring 已经对首页做了宽屏限制。
    dufu1991
        54
    dufu1991  
    OP
       335 天前
    @dreamramon 正在计划中
    dufu1991
        55
    dufu1991  
    OP
       335 天前
    @ashong 我看了中英文都正常。
    wananzz
        56
    wananzz  
       335 天前
    看了下,是挺不错的,蹲个 Figma 文件…
    oyjt
        57
    oyjt  
       335 天前
    很不错的组件库,每个组件都包含了多种丰富的使用样式,很强大也很实用。支持作者,已 Start
    jigi330
        58
    jigi330  
       334 天前
    666
    likunyan
        59
    likunyan  
       334 天前
    国内开源还是比较差点。大家压力都大,又比较少赞助,贡献的人也少。

    有的是,为了 KPI 。用过他们的,半成品...,标签的 CSS 没法传参数进去,只能放弃,像 MUI 就很完善。
    有的是,工作刚好需要用到,所以开源,后面不需要用到了,就年久失修。
    有的是,官方自己都不更新,比如又拍云。
    有的是,提交 Issue ,说暂不支持。
    有的是,申请两次 QQ 群,两三天都还没审核。
    有的是,提交了 Issue ,都没合并也没拒绝。

    有翻译过一点点,比如 MediaWiki 、PHP 、Laravel 、MUI 等,也 GitHub 赞助某人,也自己写点自己用的库,不过还是力量薄弱,跟玩似的。还是得靠你们。
    Aloento
        60
    Aloento  
       334 天前
    非常不错;能看出来 OP 不是专业做设计的(
    luodan
        61
    luodan  
       334 天前
    不错!已收藏。发现一个 bug, 日期选择框,Range selection, 选完以后,开始结束日期都向前移动了一天。
    chaoschick
        62
    chaoschick  
       334 天前
    没有 table 呢
    iTakeo
        63
    iTakeo  
       334 天前 via iPhone
    轮播图有点 bug ,动画没结束再左右滑动,图片会跳动
    iTakeo
        64
    iTakeo  
       334 天前 via iPhone
    时间 picker ,先选择日期。再选择月份,结果日期默认归 1 了,这点不合理;而且选中 2 月,再选择年份也归 1 了。虽然是为了判断闰月这种,但是我觉得交互逻辑可以再优化一下。
    TomPig0216
        65
    TomPig0216  
       334 天前
    @17681880207 泰酷辣!
    akring
        66
    akring  
       334 天前
    @dufu1991 #53 主页还行,文档页面在宽屏状态下全跑到左边去了,还是需要调整一下
    MXMIS
        67
    MXMIS  
       334 天前
    不错,但是我从演示站首页往下滑第一次会有卡顿
    turan12
        68
    turan12  
       334 天前 via iPhone
    楼主牛逼。我准备尝试一下,到时候做好了告诉 op
    yushiro
        69
    yushiro  
       334 天前 via iPhone
    默认的颜色饱和度太高了,特别是那个蓝色,看的刺眼。
    Socrazy
        70
    Socrazy  
       334 天前
    牛逼。
    整体很棒,就是默认配色确实有点刺眼睛。
    借题请教一下 OP ,移动端示例里面 Safari 禁用缩放是用的什么代码?
    ashong
        71
    ashong  
       334 天前
    @dufu1991 demo 的 slider 都是不能拖动的吗? 我试了 firefox 和 edge 都无法拖动,
    chihiro2014
        72
    chihiro2014  
       334 天前
    站点感觉很卡顿?
    sechi
        73
    sechi  
       334 天前 via Android
    第一次接触 svelte 的组件库,还不错!支持 op
    Azad01
        74
    Azad01  
       334 天前
    太赞了!对前端工作者很友好
    dufu1991
        75
    dufu1991  
    OP
       334 天前 via iPhone
    @intmax2147483647 是啊,业余时间太少了,周期有点长。
    FightPig
        76
    FightPig  
       334 天前
    不错,上次发现一个 sevlte 的 ui ,BeerUi 也不错,没想到又有新的出了
    dufu1991
        77
    dufu1991  
    OP
       334 天前 via iPhone
    @chihiro2014 首页有 3D 模型,渲染的时候可能比较吃性能。但是多数时候应该是在组件页面。
    dufu1991
        78
    dufu1991  
    OP
       334 天前 via iPhone
    @yushiro 这只是默认的颜色配置,你们自己的项目肯定是要自己配一套颜色系统的。
    Mindzy
        79
    Mindzy  
       334 天前
    更好奇首页的 3D 模型怎么做的,来个教程
    majunbo
        80
    majunbo  
       334 天前
    github 上的 demo 二维码扫码出来的地址:
    1 、步骤条 太慢了;
    2 、实例主页无法向下滚动(原因不知道是点击哪个组件后导致的,测试了几次没有发现规律);
    3 、日历示例选择的时候有时选不中,也可能是慢;

    安卓手机,微信 8.0.35 扫码后的结果,其他没仔细看,希望楼主有时间再测试一下。
    zhw2590582
        81
    zhw2590582  
       334 天前
    这个白底蓝色太刺眼了啊
    qbhy
        82
    qbhy  
       334 天前
    牛逼,已点赞。
    顺手发一下我写的 Golang 框架 github.com/goal-web/goal ,目前正在写文档
    dufu1991
        83
    dufu1991  
    OP
       334 天前
    @majunbo 1 、步骤条同一个页面的 Demo 数据,加载渲染可能会有点慢,对比其他页面也就大概 1S 左右的区别,正常页面不会在同一个页面同时加载如此多的 Step 。
    2 、在有弹出层的页面(如 Dialog )弹出内容,不要关闭,此时利用系统返回上一页就会出现,原因是在使用到 Popup 组件的时候,为了防止滚动穿透,在有弹出内容的时候,默认阻止了 body 滚动,弹出内容关闭时又恢复。如果不关闭弹出层使用系统级返回上一级,此时 body 是禁止滚动的。
    3 、我在 iOS 的微信浏览器内未发现,MIUI 的 Android 内未发现,麻烦发一下具体手机型号和系统版本。微信魔改的 X5 内核与主流的 web 标准相差越来越远,性能方面也是堪忧,只能发现问题针对性地修改。
    dufu1991
        84
    dufu1991  
    OP
       334 天前
    @Mindzy 打开 F12 看标签名称应该看得出来。
    dufu1991
        85
    dufu1991  
    OP
       334 天前
    @ashong 你是在桌面端吗?有没有注意到一行字「 Slider 区域绑定了 Touch 事件,请直接在移动设备或通过开发者工具模拟移动设备预览。」
    dufu1991
        86
    dufu1991  
    OP
       334 天前
    @yamedie 感谢,这 3 点建议都很中肯,我仔细研究一下。
    dufu1991
        87
    dufu1991  
    OP
       334 天前
    @chaoschick 移动设备上可是区域这么小,table 好像没有一个好的展示方式和适用场景,其他移动端组件库好像也没怎么看到 table 组件。
    dufu1991
        88
    dufu1991  
    OP
       334 天前
    @iTakeo 确实是考虑到闰月的情况,比如先选择 0331 ,再选择 2 月,日就会恢复到 1 。出于两点考虑,技术层面,不用单独对每一个年每一个月份单独处理,逻辑处理上会简单很多;更重要的是从交互层面考虑,大多数情况,重新选择月份时日是不会改变的,这就会给用户一个心理预期,但是当先选择 0331 ,再选择 2 月,如果判断是否是闰月之后,自动显示 28 或 29 ,粗心的用户会根据心理预期而忽略了日的变动,索性让其区别更加明显,「强迫」其重新选择。这是我的考虑。
    dufu1991
        89
    dufu1991  
    OP
       334 天前
    @MXMIS 你滑动的区域是不是在 3D 模型内?那是模型区域,不属于文档内滚动。
    dufu1991
        90
    dufu1991  
    OP
       334 天前
    @Socrazy 应该有很多方式,我用的是
    ```javascript
    document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
    });
    ```
    dufu1991
        91
    dufu1991  
    OP
       333 天前
    @dufu1991 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好地建议?
    dufu1991
        92
    dufu1991  
    OP
       333 天前
    @yamedie 有很多 Loading 效果很接近,语义化出来命名可能会很长,这样使用起来反而不方便,现在这种情况只要在 Demo 里面看到需要的,直接写个编号会更方便。而且后续还会增加,可能会达到数十种甚至上百种,语义化在命名和使用上反而显得累赘。或者您有什么更好的建议?
    iTakeo
        93
    iTakeo  
       333 天前 via iPhone
    @dufu1991 时间 picker 我也写过,我的处理方法是尽量减少用户的负担,假如用户选择了 3 月份的 30 ,后面又选择了 2 月,就默认跳到 28 ,不归 1 ,如果用户又切回了 3 月,再默认回到 30
    majunbo
        94
    majunbo  
       332 天前
    @dufu1991 荣耀 50 ,版本号 7.0.0.135 ,安卓版本 12
    leoQaQ
        95
    leoQaQ  
       329 天前
    @dufu1991 桌面端,bug 已经无了
    yuedanwork
        96
    yuedanwork  
       329 天前   ❤️ 1
    感谢 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
        97
    dufu1991  
    OP
       329 天前 via iPhone
    @yuedanwork 确实需要实际项目来验证使用是否方便。
    dufu1991
        98
    dufu1991  
    OP
       244 天前
    @dreamramon 最近新增了个脚手架,可以尝试一下。
    dufu1991
        99
    dufu1991  
    OP
       244 天前
    @ashong 增加了指针事件,鼠标也可以操作
    ads1029
        100
    ads1029  
       211 天前
    太强了! 总觉得国内对 svelte 和 tailwind 的态度不咸不淡,真心感激 op 的付出,希望能有更多人加入这个社区吧
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1543 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 17:02 · PVG 01:02 · LAX 10:02 · JFK 13:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.