关于组件库:GrowingIO-Design-组件库搭建之组件开发

38次阅读

共计 3362 个字符,预计需要花费 9 分钟才能阅读完成。

前言

在《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 年,以数据智能剖析能力为外围,通过构建客户数据平台,打造增长营销闭环,帮忙企业晋升数据驱动能力,赋能商业决策、实现业务增长。

正文完
 0