日程

我们将从回顾 Storybook 的历史、演变及其对前端生态系统的影响开始。我们将探讨 Storybook 如何从一个用于独立组件开发的工具发展成为一个促进开发人员、设计师和产品经理之间协作的工具。甚至扩展到包括 UI 测试工作流程。

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

从 7.0 开始，Storybook 将作为编译后的代码库分发，从而降低安装体积并加快启动速度。Storybook 7.0 还为 Vite 提供了头等支持，提供自动配置。加入 Ian，了解有关预构建和 Vite 构建器改进的所有信息。

Storybook 7 的发布让您项目的 UI 文档比以往任何时候都更轻松。通过 MDX 2 支持、新的架构、简化的用户体验和现成的文档块，您可以快速创建和维护项目的文档。

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

Kyle 将介绍新的 Framework API，该 API 可简化集成。此 API 为更多工具解锁了零配置支持，使包能够自动配置 Storybook 以便与 NextJS 和 SvelteKit 等流行应用程序设置配合使用。

Storybook 7 是我们两年来的首次重大更新，带来了许多变更和新功能。为了简化升级过程，我们设置了一个“早期预警系统”来针对广泛的配置矩阵测试 Storybook。Michael 将解释 Storybook 团队如何利用此生态系统 CI 来保护用户免受软件包升级的麻烦，并确保顺畅的迁移。

Storybook 拥有活跃的生态系统，提供用于样式、状态管理、测试、可访问性、设计工具、项目管理等的插件。Shaun 将概述我们如何通过配方扩展此生态系统。您还将发现 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，他将分享 The Guardian 如何在产品和工程中使用 Storybook 和 Chromatic。您将学习如何使用 Storybook 来保护自己免受视觉回归的影响，以及如何将其作为平台，与 UX 和设计合作进行测试和审查更改。

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