日程安排

我们将首先简要回顾 Storybook 的历史和发展，以及它对前端生态系统的影响。我们将探讨 Storybook 如何从一个用于隔离组件开发的工具发展成为一个能够促进开发人员、设计师和产品经理之间协作的工具。甚至扩展到包括 UI 测试工作流程。

Storybook 7.0 是迄今为止我们最大的更新！它经过重新设计，以获得更好的性能和可靠性，并包含数百项增强功能。在本环节中，Michael 将讨论一些核心变化：设计更新、组件故事格式 3 (CSF3) 以及改进的故事类型安全性。

从 7.0 版本开始，Storybook 将以编译代码库的形式发布，从而减少安装大小并缩短启动时间。Storybook 7.0 还提供对 Vite 的一流支持，提供自动配置。加入 Ian，了解预捆绑和 Vite 构建器改进的所有信息。

Storybook 7 旨在让您项目的 UI 文档比以往任何时候都更容易。凭借 MDX 2 支持、新的架构、简化的用户体验和现成的文档块，您可以快速创建和维护项目的文档。

Storybook 允许您通过将播放功能附加到故事来模拟用户行为，例如点击和输入。Yann 将演示如何编写此类故事以及如何使用 Storybook 测试运行程序将其转换为可执行测试。此外，您还将学习如何使用覆盖率报告发现未经测试的边缘情况。

Kyle 将介绍新的框架 API，它简化了集成。此 API 为更多工具解锁了零配置支持，允许软件包自动配置 Storybook 以与流行的应用程序设置（如 NextJS 和 SvelteKit）配合使用。

Storybook 7 是我们两年来的第一次重大更新，带来了许多更改和新功能。为了使升级更容易，我们建立了一个“预警系统”来针对广泛的配置矩阵测试 Storybook。Michael 将解释 Storybook 团队如何使用此生态系统 CI 来保护用户免受软件包升级问题的困扰，并确保平稳迁移。

Storybook 拥有一个活跃的生态系统，提供用于样式、状态管理、测试、可访问性、设计工具、项目管理等的附加组件。Shaun 将概述我们如何使用食谱扩展此生态系统。您还将了解 Storybook 如何与其他工具（如 Nx、Figma、Vite 和 Zeplin）合作以增强集成。

单体仓库允许您将多个软件包（例如您的应用程序和设计系统）存储在一个存储库中。这使得同时处理它们变得更容易。Katerina 将演示如何在由 Nx 管理的单体仓库中使用 Storybook。您将了解 Nx-Storybook 插件，该插件可以在软件包中快速配置 Storybook。

数千家公司都喜欢使用 Storybook。它用于构建设计系统、测试 UI、发布开源库的文档、进行设计审查以及收集利益相关者的反馈，以及许多其他可能性。Lisa 启动了本部分，该部分介绍了团队如何利用 Storybook。

在复杂的设计系统中，确定谁拥有某个组件或组件在何处使用可能非常具有挑战性。在英国广播公司，其设计系统社区中的许多不同团队维护组件，并且由于组件数量众多，此任务似乎几乎不可能完成。在本环节中，Natalia 解释了他们如何通过创建 ItDepends 来解决此问题：一个自动生成有关组件依赖项数据的附加组件。

Monday.com 的团队使用 Storybook 来管理单体架构、微前端和设计系统。每个微前端都有自己的 Storybook，它通过使用 Chromatic 进行 CI/CD 检查来运行，以帮助防止错误进入生产环境。在本环节中，Orr 解释了 Storybook 如何使 Monday.com 能够加速和增强其 UI 开发流程。

Intuit 构建了全球超过 1 亿客户使用的产品，例如 QuickBooks、TurboTax、Mint 和 Mailchimp。该平台构建在强大的微前端架构之上，允许团队快速构建和发布单个产品功能。Christopher 将向您展示他们如何利用 Storybook 来隔离构建完整功能，帮助开发人员快速修复错误、模拟难以重现的场景（如服务器错误）以及减少花费在设置测试数据上的过长时间。

您是否曾经构建过本身看起来很棒但在集成到消费者应用程序时面临样式挑战的组件？这种与样式污染相关的常见问题会导致耗时的错误查找和增加的开发成本。加入 Alex，了解 CSS Chaos 附加组件，这是一种可以改善组件的防御性样式并增强在应用程序中使用它们的开发人员体验的工具。

加入 Oliver，他将分享卫报如何在产品和工程中使用 Storybook 和 Chromatic。您将学习如何使用 Storybook 来保护自己免受视觉回归的影响，以及如何将其用作与 UX 和设计团队协作测试和审查更改的平台。

在我们创建一个郁郁葱葱的 SVG 植物景观时，探索组件驱动开发和 Storybook 的强大功能。您将学习如何使用 Storybook 的基础知识来表达创意编码的想法。我们的“数字花园”将由最小的故事（种子和芽）组成，并组合在一起以创建一个动画设计系统。