How to build a component library

[mominger]

This article written together by me and Cherry

The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, pls feel free to let me know.many thx.

This article will analyse the implementation of the component library from the perspectives of planning (component metadata) and R&D flow Mainly to explore theories

• 1 Component metadata
  • 1.1 Classification and component naming
  • 1.1.1 Refer to AntDesign Classification
  • 1.1.2 Refer to Materail UI Classification
  • 1.1.3 Refer to Microsoft Fluent UI Classification
  • 1.2 Other Dimensions
• 2 R&D flow
• 3 Other

1 Component metadata

Describe the component from multiple dimensions there are usually category/component name/level/size/style/status

1.1 Classification and component naming

1.1.1 Refer to AntDesign Classification

1.1.2 Refer to Materail UI Classification

1.1.3 Refer to Microsoft Fluent UI Classification

Microsoft's classification is more simple. It is recommended to refer to the classification of AntDesign and MUI, and how their components are named Note: Component names may have multiple levels, such as Menu/Menu.SubMenu/Menu.Item

1.2 Other Dimensions

Grade/Size/Style/Status

For example, check out the Button metadata of AntDesign

For example, Ant-Design's Theme color variable

2 R&D flow

An example of the development flow of a public component library

Actually there should have a stage of designer review yet, that means after released to the test environment and then reviewed by the designers. Only if passing it, it can be published to the product environment. Enterprise component libraries usually do not use Travis CI, but use gitlab-CI/CD, or jekins, to publish component to jFrog. Note: If you want to support older projects, you may also need es5 moudle,even bundler in umd format. For example, AntDesgin supports these three types. But Element React only supports ES6 modules. For component testing, you can refer to AntDesign, unit test + snapshot test combo. Unit test should try to be coded according to the user's usage habits.

3 Other

In general, it is recommended to perform secondary encapsulation based on a component library. For example, AntDesign is encapsulated based on the react-component library. Because it is difficult to consider enough usage scenarios, but the public component library has been perfected by using of many users. So do not easily develop a component library directly from scratch

The following is the Chinese version, the same content as above

本文将从规划(组件元数据)和研发流程两角度来探讨组件库的实现 主要是理论

• 1 组件元数据
  • 1.1 分类和组件命名
  • 1.1.1 参考AntDesign 分类方式
  • 1.1.2 参考Materail UI 分类方式
  • 1.1.3 参考 Microsoft Fluent UI 分类方式
  • 1.2 其他维度
• 2 研发流程
• 3 其他

1 组件元数据

从多个维度去描述这个组件 一般都会有 分类/组件名称/等级/大小尺寸/样式/状态

1.1 分类和组件命名

1.1.1 参考AntDesign 分类方式

1.1.2 参考Materail UI 分类方式

1.1.3 参考 Microsoft Fluent UI 分类方式

微软的比较简略。建议参考 AntDesign和 MUI的分类方式。以及他们组件的命名方式 注意: 组件命名可能有多级，比如Menu/Menu.SubMenu/Menu.Item

1.2 其他维度

等级/大小尺寸/样式/状态

比如观察 AntDesign 的Button 元数据

比如Ant-Design 的Theme 颜色变量

2 研发流程

举例一个公共组件库的研发流程

实际还有设计师评审环节，可以发布到 测试环境后由设计评审。通过后再发布到 product环境。 企业组件库一般不用Travis CI,用 gitlab-CI/CD，或 jekins, 发布到jFrog。 注意: 如果要支持旧项目，可能还需要 es5 moudle. 甚至 umd 格式的 bundler。比如AntDesgin 就支持这三种。但是Element React 则只支持 ES6 modules. 关于组件测试,可以参考AntDesign, 单元测试+快照测试结合。单元测试应尽量按照用户的使用习惯来编码。

3 其他

一般情况下，建议基于组件库进行二次封装。 比如AntDesign 基于 react-component library 封装。 因为无法在一开始考虑足够多的场景，但是公共组件库经过大量用户的使用已非常完善。 因此，不要轻易直接从零去研发一个组件库