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 的同一环境中运行跨 UI 的功能测试：浏览器。

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

组件故事格式 3.0

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

今年，RedwoodJS、React Styleguidist、UXPin、Bit和Backlight等工具广泛采用了 CSF。

现在，我们希望通过发布辅助库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 和 Outline扩展了核心插件。

下一步是什么？

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

Story 嵌入

越来越多的工具将 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 社区的粉丝和成员数量分别从几千增长到 13k 多和 11k 多。这意味着您可以在已经使用的平台上与 Storybook 人员互动的方式更多。

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

React 是我们最成熟、应用最广泛的框架。它增长了约 60%，今年被数万个团队采用。我们看到NextJS的使用率有所提高，并计划在 2022 年投入更多资源。我们还对RedwoodJS的一流集成感到非常兴奋，该框架正迅速接近其 1.0 版本发布。

Vue 和 Angular 今年都翻了一番。我们在年初发布了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 生态系统中的受欢迎程度，证明了我们蓬勃发展的社区。比以往任何时候都更多的团队正在使用 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