Storybook 是行业标准的 UI 开发工作台，用于组件和页面。BBC、Netflix、Twitter 和数千个其他团队都在使用它。

从一开始，我们的目标就是让所有人都能够使用最佳前端团队使用的工具和技术。

如今，Storybook 已确立其作为组件开发、测试和文档的最佳实践地位。它支持所有主流 Web 框架，由 1400 多名贡献者制作，并受益于数百个第三方插件。

这篇文章回顾了该平台在 2021 年的发展历程，并预览了下一代改进。

性能 & 稳定性

我们最优先考虑的是性能和稳定性。

在过去几年中，我们构建了新的工作流程，例如记录和测试组件，同时还解决了多框架兼容性问题。由于这些探索，我们了解了稳健的 UI 开发人员体验所需的内容。

但是随着项目的扩展，维护变得更加棘手。由于前端框架和构建工具正在快速发展，这一点尤其令人痛苦。

2021 年，我们与 Webpack 和 Shopify UX 工程团队合作，为性能重新设计了 Storybook 的核心架构。既然我们更好地掌握了性能，我们便将目光投向了提高稳定性。

性能

说到性能，越小越快。用户本地构建的内容越少，Storybook 启动速度就越快。我对我们取得的巨大性能提升感到非常兴奋。

• 6.4 版本的 按需架构：静态构建的体积缩小 3 倍，加载速度提高 4 倍
• 6.3 版本的 Vite 构建器，启动时间快 10-100 倍
• 6.2 版本的 Webpack 5 支持，以利用最新的优化
• 6.1 版本的 应用 UI 缓存，以加快构建时间

稳定性

稳定性对于开发中的工具至关重要。我们重写了 Storybook 的核心，使其更轻巧且可扩展。这简化了与下一代前端工具（如 Webpack 5、Vite 和 ESBuild）的集成。

我们还通过自动化迁移、功能标志、故事 linting 和版本控制文档（在 6.4 版本发布帖中概述）简化了开发人员体验。

下一步是什么？

2022 年，我们将优先改进 Storybook 的现有功能。我们现在已经完全覆盖了开发、测试和文档的主要工作流程。这意味着我们可以继续在幕后进行创新。以下是路线图

• 速度： Webpack 5 构建优化
• 重量： 现代 ESM 浏览器目标，以精简和简化分发
• 依赖冲突： 预捆绑依赖项，以减少安装大小和冲突
• 可靠性： 在 Storybook 的核心周围定义一个严格的边界，并进行更严格的测试

UI 测试

Storybook 从第一天起就是为测试而生的。编写故事类似于典型测试工作流程中的“设置”步骤。但是 Storybook 和其他测试工具之间存在很大差异。

每当您编写一个故事时，您还可以解锁一个测试集成生态系统，该生态系统验证 UI 外观、可访问性和性能。这就是 Target、Adobe 和 Shopify 的团队使用 Storybook 的原因。我们在 2022 年将更多关注此用例。

使用 Testing Library 进行交互测试

Storybook 交互测试允许您编写交互脚本并在故事本身中检查预期。这使您可以在与开发它们的相同环境中（浏览器）跨 UI 运行功能测试。

8 月，我们预览了 交互测试，它可以帮助您在故事中模拟用户行为。从那时起，我们推出了 交互式故事，这是一种创作、展示、测试和调试针对隔离组件的用户交互的新方法。未来还有更多。

组件故事格式 3.0

组件故事格式 3.0 是 CSF 的下一个主要迭代版本。我们对 CSF 的愿景是创建一个富有表现力、平台无关的格式，该格式与所有 JavaScript 库兼容 – 无需 API 锁定。

今年，CSF 在前端生态系统中得到了广泛采用，工具包括 RedwoodJS、React Styleguidist、UXPin、Bit 和 Backlight。

我们现在希望通过发布帮助程序库 Testing-react、Testing-vue 和 Testing-angular，使在您最喜欢的测试工具中重用您的故事变得更容易。

UI 测试手册 – 9 章指南

2021 年测试 UI 的秘诀是什么？我们研究了 Twilio、Peloton、O’Reilly Media 等十个团队，将他们的测试策略提炼成一份指南。

UI 测试手册 是一本 9 章教程，它将引导您了解顶级工程团队使用的测试技术。您将学习如何实施一种务实的测试策略，该策略平衡了覆盖率、设置和维护。

下一步是什么？

我们正在继续使 UI 测试成为您开发工作流程的无缝组成部分。

• 6.5 版本（即将推出）包含一个 基于 Playwright 的 测试运行器，它可以并行执行您的故事，并提供指向测试失败的链接，以便在浏览器中进行交互式调试。
• 改进了用于可访问性和性能的插件
• 改进跨所有框架和工具的故事重用

插件生态系统

在 2021 年初，我们发布了 Storybook 插件目录，以帮助用户找到最适合其需求的插件，并帮助插件作者更好地接触 Storybook 社区。它对插件进行分类，分为 代码、数据和状态、测试、样式、设计、Storybook 外观 和 故事组织。

我们还推出了 Storybook 的 插件工具包，这是一个 GitHub 模板，其中包含开始开发新插件所需的一切。

插件工作取得了巨大的成功。在不到一年的时间里，我们看到公共插件的数量从 250 个增长到近 400 个。我们还看到所有插件的每周 NPM 下载量从 1000 万增长到近 3500 万！

新的必备插件

必备插件是一个流行的插件包，它包含在每个新的 Storybook 安装中，以提供出色的开箱即用体验，无需任何配置。2021 年，我们使用 Measure and Outline 进行布局调试 扩展了 Essentials。

下一步是什么？

自两年多前的 5.2 版本中的 hookification 以来，Storybook 的 API 一直保持稳定。这为今年的插件 目录 和 工具包 提供了坚实的基础。我们将继续改进我们的文档，扩展插件工具包，并简化集成。

故事嵌入

越来越多的工具正在将 Storybook 故事嵌入到他们的工作流程中。这对用户来说是个好消息，因为您可以重用现有故事，而不是重建它们。

文档工具 Zeroheight、InVision DSM 和 Frontify 是首批将故事嵌入到其产品中的工具。这些集成使用 Storybook 在设计系统文档中展示生产组件。

2021 年，流行的设计和开发工具带来了创新的嵌入。

• UXPin 嵌入故事，用于使用生产组件进行交互式设计/原型设计
• Zeplin 嵌入故事，以提供下一代设计-开发交接
• Prismic 的 Slicemachine 嵌入 Storybook，用于在无头 CMS 上构建页面
• Chromatic 推出了嵌入 支持，用于 Notion、Medium、Wordpress 和其他支持 oEmbed 标准的服务。

下一步是什么？

到目前为止，现有的嵌入是在没有正式嵌入 API 的情况下完成的；我们计划在 2022 年添加一个。我们的目标是提高现有故事的实用性和功能。

社区增长

Storybook 最强大的优势是我们的用户社区。你们突破了 组件驱动开发 的界限，互相帮助，并通过更多用例加强了该工具。

由于我们的开发者体验团队的巨大努力，Storybook 的关注者在 2021 年大幅增长。Twitter 帐户 和 Discord 社区 分别从几千人增长到超过 1.3 万名关注者和 1.1 万名成员。这意味着在您已经使用的平台上，有更多方式与 Storybook 人员互动。

使用量也增长了，在所有主要的 Web 框架中， “市场份额”（占每周 NPM 下载量的百分比）为 5-20%。

React 是我们最成熟和广泛使用的框架。它增长了约 60%，今年被数万个团队采用。我们看到 NextJS 的使用量增加，并计划在 2022 年在那里投入更多。我们还对 RedwoodJS 中的一流集成感到兴奋，它正在迅速 接近 其 1.0 版本发布。

Vue 和 Angular 今年都 roughly 翻了一番。我们在年初推出了 Vue3 支持，并在 6 月推出了 带有 Ivy 支持的 Angular 12。这两个框架都受益于与 Nx 和 Nuxt 等工具的集成。

React Native (RN) 仍处于 5.3 版本。尽管如此，它仍拥有约 16% 的市场份额。RN 获得了两次重大推动，包括期待已久的 6.0-alpha 版本发布 和 React Native Web 支持，因此我们预计 2022 年将看到复苏。

Web components (WC) 的增长速度超过了任何 SB 框架。@storybook/web-components 相对较新，因此它有很大的增长空间，更不用说 WC 通常越来越受欢迎。

Svelte 支持尚处于早期阶段，但我们今年 投入了大量资金，推出了原生故事格式并改进了文档支持。随着 SvelteKit 标准化为 Vite，我们希望 Storybook 的 Vite 构建器 能够带来一流的支持。

下一步是什么？

您的支持使我们的团队能够继续前进。我们计划添加更多学习资源，与您最喜欢的库集成，并创建社区计划，以帮助您充分利用 Storybook 提供的所有功能。

即将推出的 组件百科全书 将网络上最好的组件汇集在一个地方，供您在构建自己的 UI 时用作资源。我们的社区在互联网上搜寻了来自 Adobe、Mozilla、GitHub、Wordpress 等经过实战检验的 UI 组件。我们需要您的帮助来发现新项目。请在此处提交您最喜欢的已发布 Storybook 的 URL。

2022 年见

Storybook 在快速发展的 JavaScript 生态系统中的流行度证明了我们社区的蓬勃发展。越来越多的团队正在使用 组件驱动的 UI 构建 Storybook。超过 1400 位贡献者 和数万名用户正在帮助塑造 Storybook 的未来。

以下维护者在特定产品领域做出了杰出贡献（按字母顺序排列）

并且非常感谢所有在 2021 年做出贡献的人！

@102 @7rulnik @88ta @acdzh @adagar @adrianpdm @agriffis @allanchain @andarist @andrefarzat @andrewlevada @andrewvasilchuk @apalumbo @apapadopoulou @appsparkler @artmsilva @avaly @avendiart @avergos29 @awesome31 @banonotit @barbaralaw @bart-krakowski @bartjanvanassen @bebraw @benbender @bennypowers @bodograumann @brianblakely @chee @chrisbutler @cjmcintyre @commenthol @coreyjv @crixx @daleseo @dallasgale @damianosipiuk @darleendenno @develra @dexster @diedu89 @dominictwlee @domyen @doublejosh @drakang4 @dschungelabenteuer @eins78 @eirslett @emclaug2 @eric-burel @eungyeole @evancharlton @evhaus @extempl @facugaich @fede-moreno @fedodd @fenixk @forivall @frassinier @fredx87 @frozenpandaz @gabiseabra @gaetanmaisse @geisterfurz007 @gentoo90 @ghengeveld @glocore @graup @gregogun @gregorynative @guilhermewaess @happycollision @hatlen @huyenltnguyen @hydrosquall @hypnosphi @iamandrewluca @ianvs @igorszyporyn @ilya2306 @imgbotapp @inokawa @ittaibaratz @j3rem1e @jabbypanda @jadojodo @jakob-em @jakubriedl @jamesgeorge007 @janjakes @jason-lough-cap-rx @jayita10 @jeshwan @jgbright @jh3y @johannesfischer @jonniebigodes @jonspalmer @josh-biddick @joshuakgoldberg @juan-cortes @juristr @jwlms @ka2jun8 @kaelig @kherock @kmathytech @koba04 @kroeder @krofdrakula @kwhsiung @kylegach @lauracarballo @lifeiscontent @lihbr @literalpie @livthomas @lkuechler @lordvelisch @maael @maerten @mandarini @mann-david @marklb @marksy @maruta-bis5 @mashabow @maslade @matheo @mattdarveniza @maxime-aknin @maxmezzomo @maya @mayank99 @mdamian322 @medvedovic @meetpatel5396 @mehrdad-e @melindali255 @merceyz @mercs600 @methuselah96 @mfranzke @mgcrea @micahgodbolt @michaelarestad @michalmo @mikaoelitiana @morphatic @murtukov @nazeeh21 @ndelangen @neilbryson @nevnet99 @ngoov @niklasmh @nishargshah @nummi @oanaom @oscard0m @osdiab @patricklafrance @paulrosania @penguinofwar @penx @peschee @peterpeterparker @phaistonian @phated @phnessu4 @phunkren @pidelport @pocka @pokuwagata @profanis @przmv @pvinis @pzuraq @qoalu @quickgiant @radosvetpetrov @randak @raon0211 @renovate-bot @rev3rsor @revik @richorrichard @rickcardoso @rmschindler @robhil @samkirkland @saranrapjs @sasanfarrokh @saschwarz @scooooooooby @sebastiengllmt @seuros @sharebear @shilman @shisama @silversonicaxel @snakesvx @solimant @srmagura @stefan-schweiger @stefanoslig @stevensacks @stof @tanya-mahajan @tanyabrassie @tdorsey @tewson @thanarie @thawkin3 @thebestmoshe @theinterned @thepassle @thibaudav @thomasvaeth @titouanmathis @tmeasday @tomastomaslol @tooppaaa @tskarhed @tyankatsu0105 @valerybugakov @vdh @virtuoushub @vishmimoney @visualfanatic @vixalien @vmalay @westbrook @winkervsbecks @wivsw @wkich @xavierchevalier @xonev @yaim @yaireo @yannbf @yceballost @yngvebn @yozhezhi @yutasugimura @zacnomore @zarahzachz @zol