日程

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

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

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

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

Storybook 允许您通过将 play 函数附加到故事来模拟用户行为，例如点击和输入。Yann 将演示如何编写此类故事并使用 Storybook 测试运行器将它们转换为可执行的测试。此外，您还将学习如何使用覆盖率报告来发现未经测试的边缘情况。

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

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

Storybook 拥有活跃的生态系统，其中包含用于样式、状态管理、测试、可访问性、设计工具、项目管理等的插件。Shaun 将概述我们如何通过 recipes 扩展这个生态系统。您还将了解 Storybook 如何与 Nx、Figma、Vite 和 Zeplin 等其他工具合作以增强集成。

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

成千上万的公司喜爱 Storybook。它用于构建设计系统、测试 UI、发布开源库的文档、进行设计评审以及收集来自利益相关者的反馈等等。Lisa 将开始介绍团队如何使用 Storybook 的部分。

在复杂的设计系统中，确定谁拥有组件或组件在哪里使用可能非常具有挑战性。在 BBC，其设计系统社区内的许多不同团队维护组件，并且由于组件太多，这项任务似乎几乎不可能完成。在本次会议中，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 Addon，这是一种可以改进组件的防御性样式并增强在其应用程序中使用这些组件的开发人员体验的工具。

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

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