构建React设计系统的教程

93 阅读5分钟

通过独立的组件和可组合的架构实现DS的规模和采用--有例子

组件库或设计系统,能够实现跨项目的代码重用和技术、设计模式、以及 "外观和感觉 "的标准化。

一个好的组件库是一个高度可组合的库。它提供的组件可以很容易地被用来组成各种新的组合。

当然,这说起来容易,做起来难。一个组件库应该如何结构化,才能为组织的所有已知和未知的用例提供正确的组装部件?

"一个好的妥协是当双方都不满意的时候"

- 拉里-戴维

传统的自上而下的组件库方法,为所有组织的前端应用规定了构件,最常见的是以单一软件包的形式,通常以某种妥协而告终,损害了组织中的所有团队,并经常导致该组件库的采用率低。

一个好的组件库根本就不是一个库

建立一个可扩展和可组合的组件库的方法根本不是建立一个库,而是在独立的组件上进行协作,并在不同的远程范围内共享它们,根据它们的目的进行分组。

什么是独立组件?

一个独立的组件是一个独立开发、版本管理和协作的组件。它可以是一个CSS模块,一个React UI组件,一个React挂钩,或任何其他类型的JavaScript模块。每一个都可以有不同程度的复杂性和具体性。

一个独立组件包含其源代码、配置和工件的整个版本历史。

独立组件是在Bit工作区中一起开发和组成的。组件的发布版本被导出(推送)到远程范围,在那里它们可以被使用和协作,在其他Bit工作空间中。此外,由于独立组件也提供了一个标准的Node包,它们可以使用常规的NPM客户端在非Bit项目中安装。

Bit是一个为独立组件的开发提供类似单片机体验的工具。它提供了智能的组件依赖性管理和一套工具,大大简化了多个独立组件的开发和配置,所有这些都在同一个工作区。

对于组件开发,Bit提供了'compositions'功能,其使用_方法_与Storybook类似,但也有很大的不同。'组合'主要用于在该组件的消费者进行此类集成之前运行手动和自动集成测试。

什么是作用域?

远程作用域不是单一的库。它们是一种将单个组件组织成独立类别的方式,每个类别有不同的成员和权限级别。远程作用域托管在运行Bit的服务器上(如bit.dev)。

从多个作用域导入的独立组件,并以新的版本导出回来

以正确的方式使用独立组件

这种构建、共享和协作独立组件的过程会产生一个不断扩展的组件网络,为所有前端应用程序提供恰到好处的_具体性_、复杂性_和_标准化

独立组件使一个组织能够使用自上而下和自下而上的混合方法建立它的组件集合,其中一些组件是由组织的infra团队建立的,一些是由其他团队开发和合作的,致力于特定的功能或子品牌。这是用基础UI、特定品牌和特定功能的三重范围类型完成的。

独立的组件在3个范围类型上托管。基础-UI、功能、和品牌

基础-用户界面作用域

一个组织的Base-UI作用域,由infra/设计团队维护,托管该组织常用的UI组件、React钩子、"造型组件"(CSS模块、字体、图标等)和一个主题提供者。

不同组织的Base-UI范围在其允许的可定制程度上有所不同,它提供了一套从稍有意见到高度意见的组件。

一个严格的BASE-UI范围

一个严格的BASE-UI范围是作为一个高度有主见的组件集建立的,它执行一套严格的造型规则。这是通过提供一个有限的 "造型API "来实现的,它限制了可能的设计范围。在这种情况下,该范围将包括:

  • 一套 "较完整 "的造型组件
  • 高度风格化的UI组件
  • 一个具有高度意见的主题方案的主题提供者(即,一个组织中的主题应该如何结构化)。

一个软性的BASE-UI范围

一个软性的BASE-UI范围对造型几乎没有设置任何限制。在这种情况下,该范围将包括:

  • 一组有限的造型组件
  • 未定型的或略有定型的UI组件
  • 一个通用的主题提供者

例子:一个软的Base-UI作用域

正如你所期望的那样,下面显示的范围几乎没有提供任何样式,而且是一个非常通用的主题提供者,对于主题在该组织中应该如何结构化,它只有一点意见。

特定品牌的作用域

品牌特定的作用域是具有高度意见的UI组件和主题提供者的作用域。这类作用域由一个组织中的团队维护,在该组织的某个品牌或一系列产品下工作。一个品牌特定的作用域将覆盖由Base-UI作用域提供的主题的一部分。它也可能包括由特定功能作用域提供的其他组件组成的组件,甚至包括它自己的独特组件。

一个品牌特定的作用域将包括所有或任何下列内容:

  • 风格化组件
  • 一个定制的(品牌特定的)主题提供者,它扩展和/或覆盖了BASE-UI作用域提供的主题提供者。
  • 额外的UI组件,是这个品牌特有的。

品牌特定的范围将由[某种程度上]有限数量的造型组件组成,定义了它的外观和感觉,并有无尽的和不断增长的UI组件的数量。