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

从一开始，我们的目标就是让顶尖前端团队使用的工具和技术普惠所有人。

如今，Storybook 已成为组件**开发**、**测试**和**文档**的最佳实践。它支持所有主要的 Web 框架，由 1400 多位贡献者创建，并受益于数百个第三方插件。

本文回顾了 Storybook 平台在 2021 年的演变，并展望了下一代的改进。

性能与稳定性

我们的最高优先级是**性能**和**稳定性**。

在前几年，我们构建了诸如组件文档和测试等新工作流程，同时解决了多框架兼容性问题。通过这些探索，我们理解了构建可靠 UI 开发体验所需的一切。

但随着项目规模的扩大，维护变得更加棘手。鉴于前端框架和构建工具的快速发展，这尤其令人头痛。

2021 年，我们与 Webpack 和 Shopify 用户体验工程团队合作，对 Storybook 的核心进行了重构以提升性能。既然我们对性能有了更好的掌控，下一步我们将着力于提升稳定性。

性能

谈到性能，体积越小越快。用户在本地构建的东西越少，Storybook 启动就越快。我们所取得的巨大性能提升令我激动不已。

• 6.4 的按需架构（On-Demand Architecture）：静态构建体积缩小 3 倍，加载速度快 4 倍
• 6.3 的Vite 构建器：启动速度快 10-100 倍
• 6.2 的Webpack 5 支持：利用最新优化
• 6.1 的应用 UI 缓存：构建速度更快

稳定性

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

我们还通过自动化迁移、特性标志、故事（Story）Linting 和版本化文档（在6.4 发布公告中概述）简化了开发者体验。

下一步是什么？

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

• 速度：Webpack 5 构建优化
• 体积：现代 ESM 浏览器目标以精简和简化分发
• 依赖冲突：预打包依赖以减少安装体积和冲突
• 可靠性：为 Storybook 核心定义严格边界并进行更严格的测试

UI 测试

Storybook 从第一天起就是为测试而生。编写一个 Story 类似于典型测试工作流程中的“setup”（准备）步骤。但 Storybook 和其他测试工具有一个很大的不同。

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

使用 Testing Library 进行交互测试

Storybook 交互测试允许你在 Story 中编写交互脚本并检查预期结果。这使你可以在开发 UI 的同一环境（浏览器）中运行功能测试。

8 月，我们预览了交互测试（Interaction testing），它可以帮助你在 Stories 中模拟用户行为。此后，我们发布了交互式 Stories（Interactive stories），这是一种针对独立组件创作、展示、测试和调试用户交互的新方法。未来还有更多内容。

组件 Story 格式 3.0

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

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

现在，我们希望通过提供辅助库 Testing-react、Testing-vue 和 Testing-angular，让你可以更轻松地在你喜欢的测试工具中重用你的 Stories。

UI 测试手册 – 9 章指南

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

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

下一步是什么？

我们将继续把 UI 测试打造成你开发工作流程中无缝集成的一部分。

• 6.5 版本（即将发布）将包含一个基于Playwright 的测试运行器，可以并行执行你的 Stories，并提供测试失败的链接，以便在浏览器中进行交互式调试。
• 改造了可访问性和性能方面的插件
• 改进跨框架和工具的 Story 复用

插件生态系统

2021年初，我们发布了 Storybook 插件目录，帮助用户找到最适合他们需求的插件，也帮助插件作者更好地触达 Storybook 社区。它将插件分为代码、数据与状态、测试、样式、设计、Storybook 外观和Story 组织等类别。

我们还发布了 Storybook 的插件工具包（Addon Kit），这是一个 GitHub 模板，包含了开始开发新插件所需的一切。

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

新增核心插件

核心插件（Essential addons）是包含流行插件的捆绑包，随 Storybook 的每次新安装一同提供，无需配置即可获得出色的开箱即用体验。2021 年，我们通过用于布局调试的Measure 和 Outline 扩展了核心插件。

下一步是什么？

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

Story 嵌入

越来越多的工具正在将 Storybook Stories 嵌入到他们的工作流程中。这对用户来说是个好消息，因为你可以复用现有的 Stories，而无需重新构建。

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

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

• UXPin 嵌入 Stories，实现基于生产环境组件的交互式设计/原型制作
• Zeplin 嵌入 Stories，提供下一代设计开发交付
• Prismic 的 Slicemachine 嵌入 Storybook，用于在无头 CMS 上构建页面
• Chromatic 推出了嵌入支持，适用于 Notion、Medium、Wordpress 和其他支持 oEmbed 标准的服务。

下一步是什么？

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

社区增长

Storybook 最强大的优势在于我们的用户社区。你们推动着组件驱动开发的边界，互相帮助，并通过更多用例使工具更加健壮。

感谢我们的开发者体验团队所做的出色工作，Storybook 的关注度在 2021 年显著增长。Twitter 账号和Discord 社区的关注者和成员分别从几千增长到超过 1.3 万和 1.1 万。这意味着你可以在你已经使用的平台上有更多方式与 Storybook 的用户互动。

使用量也显著增长，在所有主要 Web 框架中都占据了 5-20% 的“市场份额”（按每周 NPM 下载量计算）。

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

Vue 和 Angular 今年都大致翻了一番。年初，我们发布了对 Vue3 的支持，6 月份发布了对 Angular 12 with Ivy 的支持。这两个框架都受益于与 Nx 和 Nuxt 等工具的集成。

React Native (RN) 仍停留在 5.3 版本。尽管如此，它仍然拥有约 16% 的市场份额。RN 在今年获得了两大助力，包括期待已久的 6.0-alpha 版本发布和对 React Native Web 的支持，因此我们预计 2022 年它会再次兴起。

Web components (WC) 是所有 Storybook 框架中增长最快的。@storybook/web-components 相对较新，因此它有很大的增长空间，更不用说 WC 本身也越来越受欢迎了。

对 Svelte 的支持尚处于早期阶段，但我们今年投入了大量精力，提供了原生 Story 格式和改进的文档支持。随着 SvelteKit 标准化使用 Vite，我们希望 Storybook 的 Vite Builder 能带来一流的支持。

下一步是什么？

你们的支持是我们团队前进的动力。我们计划增加更多学习资源，与你们喜爱的库集成，并创建社区项目，帮助你们充分利用 Storybook 提供的一切。

即将推出的 组件百科（Component Encyclopedia）将网络上最优秀的组件汇集一处，供你在构建自己的 UI 时参考。我们的社区搜遍全网，寻找来自 Adobe、Mozilla、GitHub、Wordpress 等经过实战检验的 UI 组件。我们需要你的帮助来发现新项目。请在此处提交你最喜欢的已发布 Storybook 的 URL。

2022 再见

Storybook 在快速发展的 JavaScript 生态系统中的流行是我们蓬勃发展的社区的证明。比以往任何时候都有更多的团队使用 Storybook 构建组件驱动的 UI。超过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