我的 UI 组件库发布了！

前言

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

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 之类的组件库