6 个加速 UI 开发和文档的工具

组件驱动开发是加速前端和用户界面开发的绝佳策略。 组件的使用可以重用并简化应用程序的构建、测试和模块化。

在小型应用程序中，可以轻松管理使用中的组件列表——除了您自己的内存之外，您不需要特定工具来维护这些列表。 但是当应用程序和开发团队的数量和复杂性增加时，组件的数量和复杂性也会增加，以至于您需要某种帮助来跟踪组件并保持 UI 的一致性。

要为大中型项目采用组件驱动的开发，您需要一个能够管理组件库、记录它们、展示它们并支持独立于使用它们的应用程序进行开发的工具。

幸运的是，这种对组件管理和编目的需求被一类新的工具解决了，这些工具直接旨在加速用户界面和前端的开发和文档编制。 这些工具支持不同的库、不同的 JavaScript 方言和用于 UI 开发的各种 JavaScript 框架，例如 Angular、React 和 Vue。

此外，一些组件管理工具还具有生成前端样式指南的功能。

前端开发领域的风格指南是什么？

它们是正在开发的应用程序用户界面中所有元素的实时集合。 这些指南不仅提供组件列表，还包括功能性、可测试的示例。 他们还提供每个组件的代码片段，开发人员可以将其复制并粘贴到自己的代码中。 通常，样式指南包括常见的 UI 组件，例如按钮、图标、导航菜单、表单输入元素和模式覆盖。

您可以在下方找到对在 UI 组件开发和文档工具领域中处于领先地位的工具的评论。

故事书

Storybook 是一种流行的用于开发前端和 UI 组件的工具，它使您可以工作而无需担心特定于应用程序的依赖项。 它提供了一个沙箱，可以在正在开发的应用程序之外单独构建 UI。 这允许开发难以到达的状态和边缘情况，从而显着提高组件的可重用性、可测试性和开发速度。

它还促进了与 UX 设计师的交互，简化了查看现有组件和识别需要创建的组件的任务。

Storybook 支持各种 JavaScript 框架，包括 React、Angular、Vue、Svelte、Web Components 以及十多种其他框架。 在 Storybook 中创建的用例可以用纯 JavaScript 保存为故事，以便在开发、测试和 QA 期间进行审查。

该工具具有广泛的插件生态系统，可以与开发工具集成，促进工作流定制和自动化测试和文档。 例如，Docs Addon 允许编写 Markdown/MDX 来为组件库和设计系统生成可定制的站点。

风格指导

Styleguidist 可以归类为生活风格指南生成器，但它的功能接近于 UI 组件的开发环境服务器。 使用 Styleguidist 创建的样式指南显示组件属性并显示基于 Markdown (.md) 文件的可编辑使用示例。 该工具与 JavaScript 方言兼容，例如 ES6、Flow 和 TypeScript。

自动生成的文档允许 Styleguidist 作为所有组件的文档门户，整个开发团队都可以使用它。 它还简化了 UI 文档站点的创建和维护，其中包括 UI 组件目录。 它还允许创建降价页面和导入 UI 组件。

Styleguidist 中的集中式文档可在大型项目中节省大量时间和精力，但必须分配资源以保持文档最新。 否则，您可能会陷入称为样式指南死亡的问题，当文档变得过时，开发人员停止使用它时，就会发生这种情况，并且样式指南的用处将完全丧失。

Styleguidist 与 Storybook 一起使用是很常见的，因为它们的优势是互补的：Storybook 可用于构建组件和编写故事以跟踪对它们的更改，而 Styleguidist 可用于使用 Markdown 记录组件。

少量

Bit 是 UI 组件的分布式和可扩展框架/存储库（又名 monorepo 或多包存储库），可用作在组件驱动开发 (CDD) 方法下构建应用程序的基础架构。 通过这种方法，Bit 旨在加快构建、测试和维护过程，显着缩短应用程序开发周期并提高应用程序质量。

Bit 不是将组件构建为应用程序的一部分，而是允许它们在应用程序之外开发，然后用于自下而上地组合应用程序。 反过来，这些组件可以在许多不同的应用程序中重复使用，从而创建一种可供整个开发团队使用的组件市场。 因此，您可以获得可扩展的应用程序，只需添加或删除组件即可更改其功能。

Bit 与 React、Vue 和 Angular 库兼容。 它基于工作空间哲学，其中工作空间用于开发和组合组件。 这种工作方式允许您以分布式方式构建应用程序，但具有类似整体的体验。 Bit 工作区的 UI 允许轻松直观地开发和管理组件。

反应宇宙

React Cosmos 是一个开发环境，旨在创建可扩展的、高质量的用户界面。 它允许您单独开发 React 组件并创建 UI 组件库。 它可用于通过即时、可视化回归测试或通过可根据您的需求进行定制的集成来大幅缩短开发时间。

React Cosmos 使用基于组件装置的理念，允许您通过定义示例输入来标记您的状态。 对组件装置进行分组允许您创建它们的库，React Cosmos 将其公开在一个优雅的用户界面下，该界面专为提高您的时间效率而设计。

为了完成它的工作，React Cosmos 将自己插入到您的构建管道中，以便它可以理解您的源代码。 这意味着无论您使用哪种 JS 方言编写代码，您都可以使用该工具——无论是 Flow、TypeScript 还是其他。 这也意味着有时您必须在某些配置中添加一些选项才能使集成工作。

顾名思义，React Cosmos 只与 React 一起运行，专注于 UI 开发的几个方面，但以最高级别的细节进行。

反应开发者工具

该工具由 Facebook 提供，用作 Chrome 插件，允许您检查 Chrome 开发工具中的 React 组件层次结构。 它也可作为 Firefox 浏览器的附加组件使用。

React Developer Tools 允许您在导航应用程序的组件层次结构树时检查和编辑组件的状态和属性。 这种交互式开发形式使您能够查看一个组件的更改如何影响其他组件，因此您可以正确组装 UI 组件结构并实现它们之间的适当分离。

当您在浏览器中安装 React Developer Tools 时，您会获得两个新选项卡，一个称为组件，另一个称为 Profiler。 第一个显示页面上呈现的根 React 组件，以及它们呈现的子组件。 通过选择树中的组件之一，您可以在右窗格中检查和编辑其属性和状态。 使用面包屑，您可以检查所选组件的祖先。 Profiler 选项卡用于记录性能信息。

文档

编写代码文档的过程可能是编码人员最讨厌的过程。 也许比阅读他们从测试人员那里得到的错误报告还要多。 但是，不断更新的文档站点对于缩短开发时间至关重要，因为它可以防止重复重写相同的组件，并且每次都具有不同的功能。

Docz 旨在尽可能简化记录和更新文档站点的过程，以便开发人员不会浪费时间来更快地完成应用程序。 使用 Docz，您可以轻松编写和发布代码的交互式文档，创建展示其优点的 MDX 文件。 因此，您将获得一个具有实时重新加载功能的生产就绪站点，每当文件更改时，该站点都会整体刷新。

如果您喜欢 API，您可以探索这些工具来创建精美的 API 文档。

这才刚刚开始

除了此处审查的工具之外，还有许多其他项目用于对组件进行编目、管理和文档编制，例如 Carte Blanche、Atellier、Bluekit 等。 其中许多仍处于测试阶段，而另一些则是未维护的项目，但值得了解它们并保持关注它们，因为它们可以提供可以大大缩短软件开发时间的品质。

许多大型现代公司——包括 Shopify、Atlassian、IBM、Spotify 和 AirBNB——正在采用工具支持的设计系统，以加快 UI 组件的开发和文档编制。 但是，您不必等到成为大公司时才采用这些工具。 当您需要维护的组件目录最少时，最好开始使用它们。 您可以熟悉它们，这样当您的组件列表增长并且开始组织它变得过于昂贵时，您不会措手不及。