参加直播:周四,美国东部时间上午 11 点,Storybook 9 发布及问答
文档
Storybook Docs

Storybook 是什么?

问题

网络的普适性正将更多复杂性推向前端。这始于响应式网页设计,它将每个用户界面从一个变成了 10 个、100 个、1000 个不同的用户界面。随着时间的推移,设备、浏览器、可访问性、性能和异步状态等额外的要求也接踵而至。

像 React、Vue 3 和 Angular 这样的组件驱动工具帮助将复杂的 UI 分解成简单的组件,但它们并非万能药。随着前端的发展,组件的数量不断膨胀。成熟的项目可能包含数百个组件,产生数千种不同的变体。

更复杂的是,这些 UI 难以调试,因为它们与业务逻辑、交互状态和应用上下文交织在一起。

现代前端的广度压垮了现有的工作流程。开发者必须考虑无数的 UI 变体,但却没有能力开发或组织所有这些变体。最终导致 UI 更难构建、工作体验更差,而且容易出问题。

UI multiverse

解决方案

在隔离环境中构建 UI

现在,UI 的每个部分都是一个组件。组件的超能力在于你不需要启动整个应用就能看到它们如何渲染。你可以通过传入 props、模拟数据或模拟事件,在隔离环境中渲染特定变体。

Storybook 被打包成一个小型、仅用于开发的工作坊,与你的应用并行存在。它提供了一个隔离的 iframe 来渲染组件,不受应用业务逻辑和上下文的干扰。这有助于你专注于开发组件的每个变体,甚至是那些难以触及的边界情况。

将 UI 变体捕获为“Stories”

在隔离环境中开发组件变体时,将其保存为一个 story。Stories 是一种声明式语法,用于提供 props 和模拟数据来模拟组件变体。每个组件可以有多个 stories。每个 story 都允许你展示该组件的一个特定变体,以验证外观和行为。

你为精细的 UI 组件变体编写 stories,然后在开发、测试和文档中利用这些 stories。

Histogram.stories.ts|tsx
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Histogram } from './Histogram';
 
const meta = {
  component: Histogram,
} satisfies Meta<typeof Histogram>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

Storybook 记录每个 Story

Storybook 是一个包含你的 UI 组件及其 stories 的交互式目录。过去,你必须启动应用,导航到某个页面,然后将 UI 调整到正确状态。这极大地浪费时间并阻碍了前端开发。有了 Storybook,你可以跳过所有这些步骤,直接在特定状态下处理 UI 组件。

Storybook 如何融入我的项目?

Storybook 被打包成一个小型、仅用于开发的工作坊,与你的应用并行存在。通过运行命令来安装它。

在开发过程中,在独立的 Node 进程中运行它。如果你在隔离环境中处理 UI,你只需要运行 Storybook。

Storybook 支持我喜欢的库吗?

Storybook 旨在与行业标准工具和平台集成,以简化设置。感谢我们雄心勃勃的开发者社区,我们已经取得了重大进展。有数百个插件和教程介绍了如何在各种项目中设置 Storybook。

如果你正在使用一个小众框架或新发布的工具,我们可能还没有针对它的集成。你可以考虑先自己创建一个概念验证,为社区的其他人铺平道路。

Storybook 的推荐工作流程是什么?

每个团队及其工作流程都各不相同。Storybook 旨在可增量采用。团队可以逐步尝试各种功能,看看哪种最适合他们。

大多数社区成员选择组件驱动的工作流程。UI 在隔离环境中从“底部向上”开发,从基本组件开始,然后逐步组合以组装页面。

  1. 在隔离环境中构建每个组件,并为其变体编写 stories。
  2. 将小型组件组合在一起,以实现更复杂的功能。
  3. 通过组合复合组件来组装页面。
  4. 将页面集成到你的项目中,连接数据和业务逻辑。

优点

为组件编写 stories 时,你会免费获得许多额外的优点。

📝 开发更健壮的 UI

隔离组件和页面,并将其用例作为stories进行跟踪。验证 UI 中难以触及的边界情况。使用插件模拟组件所需的一切——上下文、API 请求、设备特性等。

✅ 以更少的精力测试 UI,且无不稳定性

Stories 是一种实用、可重现的方式来跟踪 UI 状态。在开发期间使用它们进行抽样测试 UI。Storybook 提供了内置的工作流程,用于自动化的交互可访问性视觉测试。或者通过将 stories 导入到其他 JavaScript 测试工具中,将它们用作测试用例。

📚 为你的团队记录 UI 以便重用

Storybook 是你 UI 的唯一真实来源。Stories 索引了你所有的组件及其各种状态,让你的团队能够轻松找到和重用现有 UI 模式。Storybook 还会从这些 stories 自动生成文档

📤 分享 UI 的实际工作方式

Stories 展示了 UI 的实际工作方式,而不仅仅是预期工作方式的图片。这使得每个人都能就当前生产环境中的内容保持一致。发布 Storybook 以获得团队成员的批准。或者将其嵌入到 Wiki、Markdown 和 Figma 中,以简化协作。

🚦 自动化 UI 工作流程

Storybook 与你的持续集成工作流程兼容。将其添加为 CI 步骤,以自动化用户界面测试,与团队成员一起审查实现,并获得利益相关者的批准。

一次编写 Stories,随处重用

Storybook 由基于 JavaScript ES6 模块的开放标准组件 Story 格式 (CSF) 提供支持。这使得 stories 能够在开发、测试和设计工具之间互操作。每个 story 都被导出为一个 JavaScript 函数,让你可以在其他工具中重用它。没有供应商锁定。

使用 JestVitest 以及 Testing Library 重用 stories 来验证交互。将它们放入 Chromatic 进行视觉测试。使用 Axe 审计 stories 的可访问性。或者使用 PlaywrightCypress 测试用户流程。重用以零额外成本解锁更多工作流程。


Storybook 专为帮助你更快地开发复杂 UI 而构建,具有更高的健壮性和更低的维护成本。它被数百家领先公司和数千名开发者使用。