案例研究：构建组件库

在过去的一年半里，我一直领导着一个项目，致力于创建和实现一个强大的组件库。组件库的建设取得了巨大的成效，它使我们的 Web 应用套件更加统一、更易于访问，而且（坦白说）更加美观。其他（不太擅长前端的）开发人员也享受着能够在构建应用时无需操心 UI 设计决策或接触任何 CSS 的乐趣——而这两点正是我个人非常乐意做的。最近，我们甚至开始着手将组件库扩展为一个完整的设计系统（不过这又是另一篇文章的主题了）。

如果您有兴趣在自己的工作场所实施组件库，这篇文章将详细介绍我采取的步骤、我学到的经验教训以及启发和指导我的资源。

因为这篇文章很长（嘿，要让组件库真正落地需要做很多事情），这里有一个链接的目录：

步骤：新图书馆的实际实施

1. 选择工具
2. 重新创建现有的基本组件
3. 在我们的应用程序中安装库并替换现有组件
4. 构建组件“愿望清单”
5. 创建新组件并删除旧组件
6. 机会性维护

经验教训：我希望在开始时就知道这些

• 保持一般性
• 库中有一些未完成的组件是可以的（实际上也是有益的）
• 在组件中内置可访问性，以便在应用程序中“免费获取”
• 记得偶尔“缩小”

如果您已经读到这里...

步骤：新图书馆的实际实施

1. 选择工具

我的团队创建并维护了一套主要使用React构建的 Web 应用程序（当然，React 本身就非常适合组件库的使用）。我们只花了一点时间就找到了Storybook.js，这是一个“用于为 React、Vue 和 Angular 独立开发 UI 组件的开源工具”。得益于其非常详尽的文档，它的启动和运行过程非常顺利，学习曲线也很小。在 Storybook 中，我们使用了Info Addon、Viewport Addon和Story-Router。我们还使用Rollup.js将所有内容编译成一个库，然后可以通过包管理器将其导入到我们的其他应用程序中，并像处理其他依赖项一样进行处理。在实际的组件中，我们使用Font Awesome图标来满足我们更通用的图标需求，作为我们精美（但功能有限）的品牌专属自定义图标库的补充。我们的 CSS 是使用Sass编写的，这对于组件库来说尤其有用，因为它允许使用变量（尽管原生 CSS 正在快速赶上！）和嵌套。在未来，我们希望更多地利用部分和混合，但我承认我们目前还没有充分利用它们的潜力。

2. 重新创建现有的基础组件

现在，您已经准备就绪，可以开始构建一些组件了——太棒了！但是，如何决定先构建哪些组件呢？您可能很想从头开始，或者直接照搬其他公司更成熟的组件库，但实际上，最好先看看您已经构建的内容。如果您有一个现有的应用程序或网站，那么现在是时候逐页浏览并开始分类了——每个页面上的按钮是什么样子的？标题栏怎么样？模态框怎么样？Brad Frost 将此称为“界面清单”，这对于您刚开始起步时来说非常有益。列出清单后，查看您最常用的 UI 部分，然后，砰——您的入门组件清单就出来了。

如果您已经有了一个相当一致的设计，那么只需将按钮的代码（例如）复制到组件库中，并进行必要的细微调整即可。但是，更有可能的是，您会发现自己有 3 个或 5 个（...或更多）略有相似（...或不同）的按钮设计，现在您需要选择哪一个作为“按钮设计^™”。在做出此决定时，请务必牢记按钮在应用程序中使用的所有不同环境。您可能会发现需要多个按钮组件来满足您的各种需求，这也没关系——也许您会设计一个主按钮、一个小按钮、一个幽灵按钮等等。

作为此过程的一部分，请确保您不仅要编写代码，还要定义使用指南并编写文档，以便其他开发人员了解如何使用不同的组件。这一点的重要性毋庸置疑；我知道编写文档并非最有趣的部分，但在这种情况下，它绝对至关重要——组件库的目标之一是视觉一致性，这包括组件使用方式的一致性……除非您为组件编写文档，否则人们不会知道他们应该或不应该如何使用它。

3.在我们的应用程序中安装库并替换现有组件

此时，您应该有一个包含 5-10 个基本组件的基本库 - 这些东西在您的应用程序中很多地方都在使用。现在，是时候进入并将旧的东西替换为新的、导入的组件库组件，这样我们就可以开始获得好处了。根据您的设置，您可能需要在集成方面解决一些小问题 - 我记得一个特别令人沮丧的问题，我们的一个应用程序使用旧版本的 React，它不完全支持 JSX 片段（这些家伙 <> </>:) 所以我们不得不返回并用<span>组件库中的 s 替换它们，直到我们准备好更新。此时，您可能还注意到，您在组件库的气泡中创建的一些组件并不完全满足您在实际应用程序中使用它们的实际需求 - 您可能需要做一些调整（请参阅下面的经验教训部分，了解有关如何尽可能避免这种情况的更多信息）。

希望这些障碍相对较小，并且被删除所有代码所带来的巨大快乐所抵消——因为说真的，还有什么比用 KonMari 把你的代码弄得乱七八糟更让人感觉良好的吗？？？

4. 构建组件“愿望清单”

满足了基本需求后，就该开始考虑那些锦上添花的功能了。我们会保留一个组件“愿望清单”，它基本上就是一份清单，上面列出了我们想要将来实现、但目前并非迫切需要的组件想法。这些想法可能是你想重新设计或改进的，也可能是你预计未来某个功能需要的，或者是你收到的请求。把所有想法都写下来有几个好处：

• 它确保你不会忘记你对某个组件的好想法
• 这使得其他人在有空闲时间的时候可以很容易地接手任务，他们可以把这些任务投入到组件库工作中
• 它可以帮助用户了解图书馆仍然活跃且不断发展
• 它让人们放心，他们提出的任何组件请求都不会被白白浪费

5. 创建新组件并删除旧组件

在构建组件库的推荐阅读方面，我强烈推荐《原子设计》。这是我们实际制作组件时采用的方法——将较小的组件组​​合成更大的“有机体”。例如，我们的按钮组件成为了搜索表单组件的一部分，而子标题组件成为了仪表板磁贴组件的一部分。这不仅让你的工作更轻松，还能确保你创建的组件是正确的——如果你发现自己反复使用它们，那么它们显然是必需的。

另一方面，你也可能会发现一些你认为需要的组件实际上并没有被使用。不时地检查一下并评估一下是很好的，这样你就可以从组件库中剔除未使用的组件，减少混乱。与其他开发人员或设计师沟通，了解组件没用的原因也可能会有所帮助——也许是组件功能太有限或过于固执己见，又或者是组件的构建方式存在一些不便之处。好消息是，这些方面都很容易调整——而且提出问题可以避免你把问题和洗澡水一起倒掉。

6.机会性维护

正如我们实践机会主义重构一样，我们也采取机会主义的方法来维护组件库。坦白说，在每个冲刺阶段都安排专门的时间用于组件库开发并不总是现实的——更坦白地说，一旦一切顺利，这并不总是必要的。我们会审视即将到来的任务，看看哪些地方可以将新组件的创建（或旧组件的重构）与工作联系起来，并将其作为故事的一部分进行估算。在冲刺计划期间，请随时查看您的“愿望清单”——在讨论即将到来的工作时，看看是否有任何新组件有用，或者将新的想法添加到清单中以供日后使用。自组件库创建以来（大约一年前），我们每个月都会对其进行贡献或修改，我主要将这种做法归功于它。您可能听说过这样的恐怖故事：公司花费大量时间和精力创建组件库，但由于没有维护而导致组件库不再有用，因此无法使用 -在您的工作流程中适时构建少量、定期的组件库工作可以有效防止这种情况的发生。

经验教训：我希望在开始时就知道这些

保持一般性

这是迄今为止我开始填充库时最希望得到的一条建议。创建组件时，最好保持它们的广泛性，并接受各种用途和解释。我刚开始制作组件时，希望它们受到相当大的限制——我知道我的同事们对设计决策不感兴趣，所以我尽量对它们有自己的看法。

例如：我担心人们会在弹出的模态框中放入太多信息——我强烈认为这个组件应该谨慎使用，并且文字量要少。我设想过，模态框里会塞满整段文字和巨大的图片，在手机上导航会很不方便——所以我把它做成了一个模态框组件，你只能传入一个标题和一些描述性文字。但后来我们需要一个带按钮的模态框……所以我修改了组件，让它有一个按钮。然后，这个模态框还需要第二个按钮，最终还需要一个文本输入框。当我回过头去，把模态框组件里所有预先写好的废话都删掉时，我突然意识到，我应该从一开始就让人们随意传递他们想要的信息。最终，我发现自己对自己过于严格的限制感到沮丧。

你无法预知未来，如果你总是试图猜测人们可能会以各种方式使用（或误用）一个组件，那你肯定会抓狂。不妨先从一个更通用、更开放的组件入手，然后参考文档来明确它的使用方式——之后你随时可以回头添加必要的限制。灵活性让你的组件更易用，而这才是最终的目标。

库中有一些未完成的组件是可以的（实际上也是有益的）

在我们的组件库中，组件名称中包含一个 [WIP] 标签，这样您就知道它（暂时）还不能在我们的应用程序中使用。起初，组件库是我的心血结晶，我不希望任何人以任何形式看到它，除非它绝对完美。这是一个错误；它阻碍了人们了解正在进行的工作、提出建议，或思考如何将即将推出的组件融入其中。这也让人们对独自创建或编辑组件感到不自在。组件库不是艺术博物馆，而是艺术工作室——稍微有点杂乱也没关系，只要它井然有序就行。

在组件中内置可访问性，以便在应用程序中“免费获取”

“让我们的应用/网站变得无障碍”这项任务常常让人感到畏惧和不知所措——这无疑是我公司目前正在努力解决的问题。我希望早点有人指出组件库能给我们带来多大的帮助。当你能把无障碍构建过程分解成小块，一次处理一个组件时，它就会变得更加……嗯，更加易于理解。

记得偶尔“缩小”

Storybook 虽然很棒，但它的一个内在方面却是一把双刃剑：你总是孤立地设计和开发每个组件。虽然这有助于你真正专注于细节，但也可能会无意中导致你创建与其他部分格格不入的组件。我记得我花了很多时间在一个按钮上，把它导入到应用程序中……然后才意识到它与页面上的其他所有东西相比显得多么巨大。偶尔，放眼全局，看看你的组件如何在实际应用中协同工作是很重要的。

如果您已经读到这里...

在经历了整整一年的每次冲刺中都使用组件库之后，我确信它值得我投入时间和资源。我可以毫不犹豫地说，它让我的工作更加轻松，而且我自豪地看到它已经成为同事们的参考——不仅在我自己的团队，而且令人惊讶的是，公司其他团队也都如此。如果您对构建组件库感兴趣，我绝对鼓励您研究一下——如果您有任何疑问（关于我们做了什么，或者您如何在公司做同样的事情），我会尽力解答！