头图

GrowingIO Design 组件库搭建之组件开发

GrowingIO

前言

《GrowingIO Design 组件库搭建之开发工具》一文中介绍了搭建组件库的原因和使用的开发工具,这篇文章就来介绍组件库的主角:组件。先从组件的定义说起。

组件的定义

组件是标准化的、可互换的 UI 模块。它们封装了 UI 部分的外观和功能。想想乐高积木。乐高积木可用于建造从城堡到宇宙飞船的所有东西,组件可以拆开并用于创建新功能。
组件通过将状态与应用程序业务逻辑隔离来实现互换性。这样,你可以将复杂的屏幕分解成简单的组件。每个组件都有定义明确的 API 和可被 Mock 的系列状态。这允许组件被拆开和重组,以构建不同的 UI。

组建驱动 UI

前面明确了组件定义之后,如何从一个个组件构建出完整的 UI。过程如下:

  1. 一次构建一个组件:隔离构建每个组件并定义其相关状态。从小处着手。
  2. 组合组件:将小组件组合在一起以解锁新功能,同时逐渐增加复杂性。
  3. 组装页面:通过组合复合组件来构建页面。使用 Mock 数据模拟页面的难以到达状态和边缘情况。
  4. 集成到项目中:通过连接数据和连接业务逻辑,将页面添加到您的应用程序。

组件驱动 UI 的好处:

  • 质量: 通过隔离构建组件并定义其相关状态,验证用户界面在不同场景中工作。
  • 耐用性: 通过在组件级别进行测试,将缺陷精确到细节。它比测试屏幕工作更少,也更精确。
  • 速度: 通过重用组件库或设计系统中的现有组件,更快地组装 UI。
  • 效率: 通过将用户界面分解成离散的组件,然后在不同的团队成员之间分担负载,并行化开发和设计。

接下来就得介绍如何用代码实现组件了。但在此之前,先说说代码仓库的事。

代码仓库

从代码仓库的风格说起:Monolithic Repo(简称 Monolith)、Monorepo 和 Multirepo。

  • Monolith:所有代码都存放在一个仓库中。Ant Design 组件库使用的就是此种方式,所有组件都在 components 目录下,每个组件单独目录。
  • Monorepo:也是将所有的代码都存放在一个仓库中,但是它可以包含 Monolith(比如一个目录对应一个 Monolith)。组件库中使用此种方式的是 Material Components for the web,所有组件都存放在 packages 目录下,每个组件都是一个 package,并且统一发版。
  • Multirepo:将代码分成多个部分,存放在不同的仓库中。此种方式的代表是 react-component,每个组件都是单独仓库,每个组件都可单独发版。

对于 GrowingIO Design 来说,一方面是做不到 Material Design 那样统一发版,有些简单组件开发完后会长时间不更新;另一方面是组件太多,使用 Multirepo 方式,导致仓库很多,维护成本太大。所以,GrowingIO Design 采用了常见的 Monolith 风格,用一个仓库,不同组件放在不同目录下,并且最终只有一个 package。

组件目录

上一节中代码仓库风格选择了 Monolith,也明确了不同组件放在不同目录下,考虑到组件会随着迭代越来越多,有必要提前规范一下组件的目录结构,明确一下一个组件至少应该包含哪些文件。


component
├── Component.mdx
├── Component.stories.tsx
├── Component.tsx
├── __tests__
├── index.ts
├── interfaces.ts
└── style
  • Component.mdx 是组件的文档,包括组件定义的规范等内容;
  • Component.stories.tsx 存放组件的各种使用场景的 Demo;
  • Component.tsx 就是组件的具体实现文件了;
  • index.ts 主要是 export 组件和各种 props;
  • interfaces.ts 定义组件的各种 props。

其中,__tests__和 style 两个目录,这里先不介绍,埋个伏笔,它们的详细介绍会放在组件测试和组件打包两篇文章中。

组件实现

对于单个组件的实现,这里就不详细介绍。这是因为组件的编写需要各位“八仙过海,各显神通”了。
GrowingIO Design 大部分组件是基于 react-component 封装的,剩下的就是完全自己实现了。但是,组件必须包含的 props 还是要规范的,这里给一个简单的示例:

import React from 'react';

interface BaseProps {
  /**
   * 自定义 CSS 样式名称
   */
  className?: string;
  /**
   * 自定义 CSS
   */
  style?: React.CSSProperties;
}

function Component(props: BaseProps) {
  return <div>Base Component</div>;
}

export default Component;

具体组件的代码可以去我们 GitHub 上的仓库查看。

组件文档

工具选型

常用的几种工具:

  • Storybook:可帮助你编写组件文档以供重用,并自动可视化测试组件以防止 Bug。
  • docz:使您能够使用 MDX 快速创建实时重载、搜索引擎优化友好、可用于生产的文档网站,并在需要时利用 GatsbyJS 和 Gatsby 主题定制外观、感觉和行为。
  • React Styleguidist:带有生活风格指南的聚合反应组件开发环境。
  • dumi:中文发音嘟米,是一款为组件开发场景而生的文档工具,与 father 一起为开发者提供一站式的组件开发体验,father 负责构建,而 dumi 负责组件开发及组件文档生成。

GrowingIO Design 最终选用了 Stroybook,原因只有一点:Controls 插件支持改变组件的 props,实时看到效果,可以减少很多 Demo 代码。具体示例如下:

文档规范

文档主要包含以下几部分:

  1. 标题和子标题:标题直接是组件的英文名称和中文名称,用 Markdown 的一级标题语法,子标题使用 Storybook 的 Subtitle 组件。
  2. 使用规范:使用 Markdown 的二级标题语法,主要描述组件的各种使用场景。
  3. 参数说明:使用 Markdown 的二级标题语法,使用 Storybook 的 ArgsTable 展示组件的 Props 类型。
  4. 代码演示:用 Story 来展示组件的各种使用场景,每种场景对应一个 Story。主要提供场景的描述和 Story 链接,场景名称使用 Markdown 的三级标题,Story 链接使用相对链接。

总结

本文主要从以下几个方面介绍如何开发组件:

  • 代码仓库采用最常见的 Monolith 风格,统一管理所有组件的代码;
  • 组件目录规范了不同类型的文件命名方式;
  • 组件文档使用 Storybook 来 Demo 组件的样式,并提供组件的设计规范。

参考

Component Driven User Interfaces https://www.componentdriven.org/

Monorepo https://en.wikipedia.org/wiki...

Ant Design https://github.com/ant-design...

Material Components for the web https://github.com/material-c...

react-component https://github.com/react-comp...

Storybook https://storybook.js.org/

docz https://www.docz.site/

React Styleguidist https://react-styleguidist.js...

dumi https://d.umijs.org/

作者:潘杰

GrowingIO 工程经理,目前主要负责 GrowingIO Design 组件库搭建和微前端建设。

招聘信息

GrowingIO技术团队是一个活力四射、对技术充满激情的团队,多个岗位持续招聘中!诚招前端工程师/大数据工程师/Java工程师等
,欢迎有兴趣的同学投递简历至:jianli@growingio.com(邮件标题请注明具体岗位名称)
,更多职位及信息可进入招聘官网查看


关于 GrowingIO

GrowingIO 是国内领先的一站式数据增长引擎整体方案服务商,创立于2015年,以数据智能分析能力为核心,通过构建客户数据平台,打造增长营销闭环,帮助企业提升数据驱动能力,赋能商业决策、实现业务增长。

阅读 834

GrowingIO技术专栏
GrowingIO(官网网站www.growingio.com)的官方技术专栏,内容涵盖微服务架构,前端技术,数据可视化,D...

GrowingIO(官网网站www.growingio.com)的官方技术专栏,内容涵盖微服务架构,前端技术,数据可视化,D...

40 声望
8 粉丝
0 条评论

GrowingIO(官网网站www.growingio.com)的官方技术专栏,内容涵盖微服务架构,前端技术,数据可视化,D...

40 声望
8 粉丝
文章目录
宣传栏