React DevUI 18.0 正式发布????

时间:2022-12-08 15:22:15

Jay 是一位经验丰富并且对质量要求很高的开发者,对 Angular、React 等多种框架都很熟悉,我们在开源社区认识,在我做开源社区运营的过程中,Jay 给了我很多帮助,他也是 React DevUI 开源组件库的创建者。

2021年11月,由 Jay 主导发起了 React DevUI 开源组件库项目,经过一年多的孵化????,终于在2022年11月23日发布 18.0.0 正式版本????

特性:

  • 基于最新的React 18+TypeScript+Nx技术栈
  • 包含51个灵活、高质量的组件
  • 包含配套的 Admin 系统(持续完善中)
  • 支持主题定制
  • 支持国际化
  • 支持 TypeScript
  • 支持 Monorepo
  • 支持单元测试(持续完善中)
  • 包含完善的设计指南 / 开发规范 / 贡献流程
  • 完善的构建 / 发布 / 测试 / 依赖管理等基础设施

除了使用了最新的技术进行组件开发之外,React DevUI 还对组件的细节体验进行极致的打磨,比如:

  • ???? 所有组件和网站均遵循WCAG 2.0规范做了无障碍设计(Accessibility),比较明显的就是焦点管理和对键盘方向键的支持,欢迎到我们的官网体验。
  • ⚡ 针对大数据量的列表做了极致的虚拟滚动,渲染和筛选数十万数据无任何卡顿,感兴趣可以体验下我们的Select组件。
  • ✨ 在API设计上,我们也经过了仔细的推敲和思考,所有组件的 API 都以易用和是否符合预期为设计原则,简洁、灵活、开发者友好,从Compose组件就可以窥见一斑。

为什么要开发这个组件库

接触前端从 Vue2 开始,深入学习的是 Angular(公司项目),这里插一句,Angular 作为前端开发者真的可以好好学一下,主要是学习其编程思想和比较与其它框架的差异。我个人对于 React 还是非常感兴趣的,所以当时就看了 React17 官网文档和相关教程,state => ui 这种纯粹的驱动模式简直是完美,我喜欢这种可靠的渲染,但奇葩的是异步函数里调用 setState 会立即重新渲染,虽然到目前为止我都没有过多时间了解 React18 之前的东西,不过当时我就想这绝对是个 bug 收集器。

可能缘分是个奇妙的东西,我不知道怎么就看到的 React18 的新特性,这个 concurrency(并发)那可真是看的我人麻了,这绝对会是目前最好的框架,那一刻 jay 知道必须写个组件库。

组件库的技术选型

开发组件库的技术栈为 react18 + ts + sass,react18 + ts 没啥好说的,这里说说为什么用 sass。

当初也有人建议用 css in js,其实在这之前我是不知道这个概念的,毕竟没用过 React,了解之后发现其灵活性的确是 sass 无法比拟的,但是我真的要为了这种灵活性舍弃:

  • 开发成本,sass 作为最受欢迎的 css 扩展,但凡前端几乎了解,不了解的也无所谓,sass 完全兼容 css 语法。
  • 样式独立,样式独立于组件,我希望开发其它框架组件时不用再写一套样式,本质是一种模块化,即样式的模块化,我相信好处不止于此。
  • 性能。

最终我选择 sass,而且 sass + css 变量 的灵活性不见得不如 css in js,特别是有样式规范的情况下。

组件遵循的规范

组件库从诞生之初就遵循下面最基本的规范:

  • 如果有 无障碍 支持,那么一定要实现。
  • 国际化(i18n)支持。
  • SSR 支持。
  • 移动设备支持。

后面开发中添加了组件类支持:

其它的一些规范:

  • Prop 命名,如支持 form 的输入为 dModel,弹窗状态统一为 dVisible
  • 列表类组件的大数据支持,实现时间复杂度为 O(n),如 Select 选择框。
  • 一些边边角角我实在记不起来了。

样式规范

组件样式规范:

  • 命名遵循 BEM 规范。
  • 明显的聚焦或激活样式反馈。
  • 内敛的动画,即动画变化属性数量尽可能少(一般小于等于 2 个),如 Button 聚焦时仅变化背景色或边框。

优势在于是由经验丰富的技术大佬主导的开源项目

说吧,为啥用你这组件库。

所有组件由 jay 开发,这意味着:

  • 所有组件均遵循规范。
  • 统一的 API 设计。
  • 统一的样式设计。
  • 性能的把控。
  • 极简的大小,npm 包 未压缩 不超过 1MB!

网址

--- END ---

我是 Kagol,如果你喜欢我的文章,可以给我点个赞,关注我的掘金账号和公众号 Kagol,一起交流前端技术、一起做开源!