我的 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 条回复
luodan
2023-04-29 05:41:27 +08:00
不错!已收藏。发现一个 bug, 日期选择框,Range selection, 选完以后,开始结束日期都向前移动了一天。
chaoschick
2023-04-29 07:13:52 +08:00
没有 table 呢
iTakeo
2023-04-29 09:09:37 +08:00
轮播图有点 bug ,动画没结束再左右滑动,图片会跳动
iTakeo
2023-04-29 09:15:07 +08:00
时间 picker ,先选择日期。再选择月份,结果日期默认归 1 了,这点不合理;而且选中 2 月,再选择年份也归 1 了。虽然是为了判断闰月这种,但是我觉得交互逻辑可以再优化一下。
TomPig0216
2023-04-29 10:50:32 +08:00
@17681880207 泰酷辣!
akring
2023-04-29 11:04:44 +08:00
@dufu1991 #53 主页还行,文档页面在宽屏状态下全跑到左边去了,还是需要调整一下
MXMIS
2023-04-29 11:23:04 +08:00
不错,但是我从演示站首页往下滑第一次会有卡顿
turan12
2023-04-29 11:42:40 +08:00
楼主牛逼。我准备尝试一下,到时候做好了告诉 op
yushiro
2023-04-29 12:19:19 +08:00
默认的颜色饱和度太高了,特别是那个蓝色,看的刺眼。
Socrazy
2023-04-29 15:24:48 +08:00
牛逼。
整体很棒,就是默认配色确实有点刺眼睛。
借题请教一下 OP ,移动端示例里面 Safari 禁用缩放是用的什么代码?
ashong
2023-04-29 16:38:09 +08:00
@dufu1991 demo 的 slider 都是不能拖动的吗? 我试了 firefox 和 edge 都无法拖动,
chihiro2014
2023-04-29 18:37:30 +08:00
站点感觉很卡顿?
sechi
2023-04-29 18:42:07 +08:00
第一次接触 svelte 的组件库,还不错!支持 op
Azad01
2023-04-29 20:09:25 +08:00
太赞了!对前端工作者很友好
dufu1991
2023-04-29 20:12:25 +08:00
@intmax2147483647 是啊,业余时间太少了,周期有点长。
FightPig
2023-04-29 20:20:59 +08:00
不错,上次发现一个 sevlte 的 ui ,BeerUi 也不错,没想到又有新的出了
dufu1991
2023-04-29 20:57:42 +08:00
@chihiro2014 首页有 3D 模型,渲染的时候可能比较吃性能。但是多数时候应该是在组件页面。
dufu1991
2023-04-29 21:00:04 +08:00
@yushiro 这只是默认的颜色配置,你们自己的项目肯定是要自己配一套颜色系统的。
Mindzy
2023-04-29 21:45:25 +08:00
更好奇首页的 3D 模型怎么做的,来个教程
majunbo
2023-04-29 22:13:02 +08:00
github 上的 demo 二维码扫码出来的地址:
1 、步骤条 太慢了;
2 、实例主页无法向下滚动(原因不知道是点击哪个组件后导致的,测试了几次没有发现规律);
3 、日历示例选择的时候有时选不中,也可能是慢;

安卓手机,微信 8.0.35 扫码后的结果,其他没仔细看,希望楼主有时间再测试一下。

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

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

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

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

© 2021 V2EX