© Bohua Xu

RomanticUI项目总结

Mar 11, 2023 · 15min

一、项目介绍

一个基于 React 的组件库

Github 地址:https://github.com/RomanticUI/RomanticUI

二、项目实现

3.1 技术选型与相关开发文档

核心技术栈:

  • Js:Ts、ES6

Ts居有更好的类型检查、更好的可读性和可维护性、更好的代码组织和模块化等优点,这些特点使得Ts在开发大型复杂应用程序时更适合,并可以提高开发效率和代码质量

  • 样式:Less

完全支持样式覆盖,可读性较强,上手程度较低,适合不同技术栈的同学迅速实现简单的使用

  • 测试工具:Jest、@testing-library/react

Jest既简单又强大,可以设置测试的事前步骤和事后步骤,模拟函数等功能;Jest的快照功能用于组件的测试十分强大。

  • 规范
    • 代码风格:eslint+prettier、stylelint、commitlint

      • 通过规范工具对代码进行规范和格式化,提供更好的代码质量保障,代码的可读性增强
    • 代码提交:husky、commitlint、lint-staged

    • 规范代码的提交规范,并在暂存区中根据不同的文件进行不同校验并修改

    • 组件模板:plop.js

    • 为组件文件创建一个固定的目录,使得项目目录的一致性;在模板文件中可添加固定代码,减少重复作业,增加效率

    • 依赖管理:lint-deps

3.2 架构设计

  • 企业或者个人设计项目产品,为快速便捷实现UI界面,通过使用组件库,可以快速构建出符合需求的UI界面,并且可以在不影响代码质量和稳定性的情况下选择符合自己UI界面的组件可自己定制样式和功能,从而提高开发效率和代码可维护性。
  • 第一步,在组件库中找到目标组件,如Divider、Tabs和Avatar组件等,以便快速搭建所需的UI界面。
  • 第二步,使用组件库提供的UI组件来构建页面,如使Tab构建界面的tabbar,使用Avatar组件显示图片样式,使用progress组件显示进度等
  • 在需要定制样式时,可以使用组件库提供的可定制化属性或CSS类名,或者覆盖组件库的默认样式来实现样式定制。

3.3 项目代码介绍

RomanticUI

├── commitlint.config.js – 代码提交规范

├── docs

│ └── index.md – 项目文档网站首页

├── flower.png – 项目文档logo

├── generators – 模板生成文件

│ ├── component – 组件生成文件

│ │ ├── component.hbs

│ │ ├── component.less.hbs

│ │ ├── component.md.hbs

│ │ ├── component.test.hbs

│ │ └── index.js

│ ├── index.js

│ └── utils

├── package-lock.json

├── package.json

├── plopfile.js – 模板生成入口

├── README.md

├── src

│ ├── Avatar

│ │ ├── index.md – 组件文档

│ │ ├── index.tsx – 组件入口文件

│ │ ├── style

│ │ │ └── index.less – 样式文件

│ │ └── test

│ │ └── index.test.ts – 测试文件

│ ├── config-provider – 全局context对象

│ │ ├── index.ts

│ │ └── SizeContext.tsx – 尺寸Context

│ ├── Divider

│ │ ├── index.md

│ │ ├── index.tsx

│ │ ├── style

│ │ │ └── index.less

│ │ └── test

│ │ └── index.test.js

│ ├── index.ts

│ ├── Menu

│ │ ├── index.md – 组件文档

│ │ ├── index.tsx – 组件入口文件

│ │ ├── style

│ │ │ └── index.less – 样式文件

│ │ └── test

│ │ └── index.test.ts – 测试文件

│ ├── Tabs

│ │ ├── index.md

│ │ ├── index.tsx

│ │ ├── style

│ │ │ ├── card.less

│ │ │ ├── content.less

│ │ │ ├── index.less

│ │ │ ├── label.less

│ │ │ ├── position.less

│ │ │ └── size.less

│ │ ├── TabItem.tsx

│ │ └── test

│ │ ├── index.test.ts

│ └── utils – 常用工具类

│ └── index.ts

├── tsconfig.json – ts配置

├── typings.d.ts

└── yarn.lock

└── .eslintrc.json – eslint校验配置

└── .stylelintrc.json – 样式校验配置

└── .prettierrc.js – 代码美化配置

三、测试结果

建议从功能测试和性能测试两部分分析,其中功能测试补充测试用例,性能测试补充性能分析报告、可优化点等内容。

在开发过程中,可以使用组件库提供的测试工具来进行单元测试、集成测试和端到端测试,以保证组件库的质量和稳定性

img

4.1 功能性测试

4.1.1 Avatar

Avatar组件可以实现图片样式更改,可动态设置avatar的图片地址,用户自定义样式,头像的大小,头像的形状,数据类型分别为string、string、number、circle、

经测试,Avatar功能较全,暂未发现bug。

4.1.2 Tabs

Tabs实现了基本功能的选中和禁用,Tabs实现了基本功能的选中和禁用,tabs居中,拓展功能的滑动可设置上下/左右滑动,附加内容传值,定义tabs的位置和大小等,提供了activeKey、centered、defaultActiveKey、items、size、tabBarExtraContent等14种API,尽大可能的为用户提供组件的多用性,提高组件的复用性。

经测试,Tabs功能完善,暂未发现bug。

4.1.3 Divider

Divider 组件实现分割线,可实现虚线、实线、插入文字等功能,提供了dashed、content,传值类型分别为boolean,string型。

经测试,Divider功能较完善,暂未发现bug。

4.1.4 ProgressBar

ProgressBar 组件实现了进度条的大小、颜色、文字展示、圆形进度条和动态改变进度条。提供了percent、showinfo、color、isSmall、is Circle等五种API。

经测试,ProgressBar功能较全,暂未发现bug。

4.1.5 Spin

Spin 组件实现了不同类型的加载组件,用户可自定义更改组件显示类型和style,提供了className五种loading样式、style、ref等API。

经测试,Spin功能较全,暂未发现bug。

4.1.6 Menu

Menu 组件可根据用户的传入的内容接收后展示为菜单栏,可通过children参数传入多层嵌套对象。提供设置主题、禁用、导航项类型、菜单模式等API。

经测试,Menu组件暂未发现Bug。

四、Demo 演示视频

视频演示 地址:https://www.bilibili.com/video/BV11s4y1G7jE/?pop_share=1&vd_source=838e1af33bcd36eddf8795a8c7ad8b5a

五、项目总结与反思

  1. 目前仍存在的问题

  • 组件数量偏少,无法满足企业大量需求
  • 在组件功能上,在个别组件上,功能不够全面。
  1. 已识别出的优化项

  • 增加组件数量,以满足更多需求
  • 完善组件功能,提高组件复用率
  1. 架构演进的可能性

  • Web Components是一种新的Web技术,开发者通过自定义的 HTML 标签和 CSS 元素,来还原 UI 设计,并完善相关功能使组件能够在多个地方进行复用,组件库架构向这个方向演进以支持更广泛的Web开发需求。
  • 需求组件增多,跨端语言也实现了移动端和WEB端的多端运行,组件库架构会向适配多端运行的方向演进,支持多端匹配。
  1. 项目过程中的反思与总结

  • 项目总结: 完成了6个组件但功能不够完备,组件数量少。
  • 能兼容Edge、Chrome等主流浏览器。
  • 开发过程中不仅会遇到开发技术难度的挑战,时间也非常紧迫,还有队友之间的团队协作比较弱。
CC BY-NC-SA 4.0 2021-PRESENT © Bohua Xu