Skip to content

开始

同步下组件库最新进展、业务使用情况、未来规划。

最新进展
  1. Press UI 新增 RollingText, Signature, TextEllipsis, Barrage 等组件,一些组件已应用到和平赛事等业务中
  2. Press UI 中 Dialog, Toast, Notify, ImagePreview 等可函数调用的组件,增加更语义化、易理解的方法,如 showDialog/closeDialog/showNotify 等
  3. Press Plus, Press Next 支持 tailwind,后续新增组件都需使用 tailwind,目前已沉淀 20+ 使用 tailwind 的组件

业务价值

Press UI 组件库自2022年11月5日发布第一个版本,现在已经2年多,目前已经在多个业务、多个团队使用。相比于 vant、uview、tdesign 等组件库,Press UI 有以下优势:

  1. 兼容 uni-app 和 非 uni-app,兼容 Vue2 和 Vue3
  1. 使用条件编译,兼容多平台时,包体积不会增加

  2. 得益于丰富的兼容性,项目迁移和升级简单

按照是否跨端和 Vue 版本,项目可分为四象限。Press UI 组件库可支持四象限任意变动,但实际上,一般只会升级,不会降级,即:

  1. Vue2 非跨端 => Vue2 跨端,比如赛宝、和平赛事的第1次升级
  2. Vue2 跨端 => Vue3 跨端,比如赛宝、和平赛事的第2次升级
  3. Vue2 非跨端 => Vue3 非跨端,比如和平横版赛事的升级,这种一般是无需考虑小程序、APP平台的场景
  4. Vue3 非跨端 => Vue3 跨端
  5. Vue2 非跨端 => Vue3 跨端,比如无畏赛事的升级,跨度较大
目标项目举例
Vue2 非跨端VUe2 跨端赛宝、和平赛事的第1次升级
Vue2 跨端Vue3 跨端赛宝、和平赛事的第2次升级
Vue2 非跨端Vue3 非跨端和平横版赛事的升级
Vue3 非跨端Vue3 跨端-
Vue2 非跨端Vue3 跨端无畏赛事的升级

业务组件库

除了 Press UI 基础组件库外,还沉淀了 Press Plus 和 Press Next 业务组件库。目前也在游戏人生项目中深度应用。

Press Plus 和 Press Next 的区别是,前者会同时兼容 Vue2 和 Vue3,后者只兼容 Vue3,可以使用组合式API。

Press Plus 中物品列表、物品详情、物品兑换等相关组件,在多个业务项目中使用,部分业务项目升级困难,所以 Press Plus 组件库无法去除。

业务组件库是必需的:

  1. 项目开发人员水平参差不齐,总有些人对代码的理解仅停留在能跑就行,拼命拉低代码质量,你写好的代码,他分分钟入侵,给你搞得四不像,所以必须物理隔离、权限隔离,把关键代码抽离出去
  2. 业务核心组件需要保持稳定,在组件库中每行代码都会单独 review,不会揉杂在业务的某次MR中,蒙混过关
  3. 复杂的、复用性强的组件需要示例、文档,典型的包括赛程树、物品相关组件

所以这里鼓励沉淀高质量的核心业务组件,但宁缺毋滥,沉淀的组件必须符合 Press Plus、Press Next 规范:

  1. CSS 使用tailwind
  2. 详尽的文档、丰富的示例
  3. 完备的类型声明
核心价值观
  1. 多平台、多技术栈统一体验
  2. 渐进式增强
  3. 对用户简单、易用
    • API 规范标准
    • 示例丰富、文档详细
  4. 对开发者高效、自动化
    • 示例、文档自动派发
    • 多端示例自动构建
  5. 始终向下兼容,避免breaking changes。 要做到这一点并不容易,一开始就应该不能太差,对齐社区主流组件库的标准,能用多种方式实现同一效果
核心技术
  1. 多平台、多技术栈如何统一体验
  2. 多平台、多技术栈如何兼容而不增加组件体积(非 uni-app 的条件编译实现)
  3. 一些复杂组件的实现,以及小程序下的巧妙适配

Tailwind

Tailwind 是一种原子化CSS的技术,其思想十分朴素,就是重复的样式应该复用。使用 Tailwind 有以下好处:

  1. 大幅减少样式体积
  2. 无需费心想类名
  3. 变更更安全

其中第3点,完全遵循 scoped 开发模式的项目感受不到。

我们项目更适合用 Tailwind,性能是一方面,更重要的是,类名起的过于随意了,不要说BEM规范,统一的前缀都没做到。要求严格一点的项目负责人还会多强调一下,其他的基本就是“百花齐放”。举个例子,一个按钮在同一个项目中的多种命名方式:

  1. btn
  2. button
  3. tip-btn
  4. tip-match-btn
  5. xx-match-btn

使用 Tailwind 后,同一个CSS表达式,基本只有一个正确答案,再也不会看到乱七八糟的类名了。