2019 年 Storybook 状态报告

Storybook 是地球上最受欢迎的 UI 组件工作台。

它为 Airbnb、Lyft、Slack、Twitter 和数千家公司的前端开发提供支持。它被用于构建顶级的设计系统，如 Shopify Polaris、IBM Carbon 和 Salesforce Lightning。

感谢我们充满活力的社区，该项目在各个方面都呈爆炸式增长。我们的产品正在快速改进，并按常规发布周期进行迭代。设计和开发生态系统中的工具现在都集成了 Storybook。

如果您是一位前端开发人员，这是一个好消息。这意味着即使 UI 工程的质量、性能和复杂性预期不断提高，您也可以长期依赖这个标准工具。

随着年底临近，现在是盘点的好时机。本文回顾了我们在 2019 年的开源之旅，并庆祝了重要的项目里程碑。您还将抢先预览明年的计划。

👩‍💻 Storybook 的社区蓬勃发展

Storybook 的社区是其生命线和最大的优势。该项目围绕其用户展开，由其维护者推动前进，并因其赞助商而得以持续。我们已经看到了各个方面的巨大增长。

框架使用蓬勃发展

长期以来，Storybook 一直是 React 开发人员的热门选择，@storybook/react 每月 NPM 下载量超过 400 万次。仅此一项就为该项目在 Github 上赢得了超过 44,000 个星标，并使其成为前端开发领域的领导者。

2019 年的新变化是 Storybook 框架子社区的重大增长

看到这些社区获得临界质量令人兴奋。领先的是 Vue 版 Storybook（同比增长 309%）、React Native 版（168%）、Angular 版（420%）和 HTML 版（893%）。这种增长转化为一个更有用和更强大的平台。每次有人添加功能或修复错误，每个人都会受益，无论他们选择哪个框架。

增长最快的开源社区之一

如果没有成千上万使用 Storybook 的人、提交错误、帮助其他用户、改进代码/文档、提供支持和反馈，以及以其他方式向世界宣传它，Storybook 如此规模的项目将无法运作。

值得庆幸的是，我们的用户增长也转化为大量新的贡献者。根据 Github 的 2019 年 Octoverse 状态报告，Storybook 是世界上第九个增长最快的开源社区

Storybook 现在拥有 860 多名贡献者，他们来自除南极洲以外的每个大陆。该团队不仅人才济济，而且由开源领域一些最友好、最乐于合作的人组成。

新的维护者。 社区的增长帮助我们增加了新的项目维护者。Storybook 面临着维护数百个插件和集成 (M) 跨越数十个不同框架 (N) 的“M x N 问题”。我们庞大的社区有助于保持项目的稳定，并在我们所有框架中提供用户支持，即使产品快速发展。

更好的文档。 社区的增长也帮助我们改进了文档，这对于项目的成功至关重要。Storybook 的网站得到了彻底的改版，新网站令人赏心悦目！我们还升级了 Learn Storybook，这是 Storybook 为专业开发人员提供的免费指南集合，其中包含新的教程和翻译。

• 新的 9 章教程：面向开发人员的设计系统
• 支持的框架：React、Vue、Angular、React Native、Svelte
• 本地化：英语、西班牙语、葡萄牙语、荷兰语、简体中文

赞助商使 Storybook 可持续发展

最后，Storybook 从赞助中获益匪浅。我们感谢来自 Airbnb、Applitools、Facebook、Chromatic、Xebia 等公司的 open collective 捐款，估计每年有 25,000 美元。

Chromatic 提供企业管理，自 2017 年以来，其团队为该项目提供了技术领导，并在 2019 年贡献了一半以上的提交。

🖼 Storybook：让开发人员更高效

Storybook 在 2019 年取得了突飞猛进的进步。社区努力提升平台的各个方面，使前端开发人员比以往任何时候都更高效。

只需查看一年中不同时间点的几张屏幕截图，即可了解 Storybook 的快速演变

全新的 UI

我们在今年年初发布了 Storybook 5.0，对 Storybook 的 UI 进行了全面改版。外观和感觉由我们的新设计师 Dominic Nguyen 精心打造。从高级 UI 到核心插件的细节，都通过他熟练的技巧得到了改进。

5.0 也为 Storybook 作为开源平台奠定了基础。Norbert de Langen 创建了插件与 Storybook 集成的新方法，例如工具栏按钮和选项卡窗格，并使 Storybook 可主题化。

组件文档的未来

我们在 2019 年的第二个主要推动力是为 Storybook 的文档功能提供强大的支持

今年早些时候，我们 阐述了一个愿景，即让 UI 文档的创建和维护变得非常简单。我们通过官方的 Storybook Docs 插件、参考实现和指南兑现了这一承诺

• DocsPage: 最佳实践文档，从您的 stories 自动生成
• Storybook Design System：支持三个高流量网站的参考实现
• 面向开发人员的设计系统: 一个九章教程，涵盖了 Storybook Design System 背后的原则
• MDX 中的丰富文档：为团队提供完全自定义的文档。
• 新框架： 为 React、Vue、Angular、Web-components 和 Ember 提供一流的文档支持。

持续的架构演进

Storybook 在其架构方面也取得了重大进展。基础设施的改进使产品更易于使用，帮助我们更好地与更广泛的生态系统互操作，并提高性能。

2019 年的重大胜利包括

• 组件故事格式 (CSF) 是一种干净且完全可移植的方式，可以使用标准 ES 模块编写组件示例 stories。它允许在 Jest 和其他测试工具中导入 stories，并正在被设计和开发领域的其他工具采用。
• 声明式配置 是一项类似的努力，旨在显着简化 Storybook 的配置，提高性能，并帮助 Storybook 与其他工具互操作。
• Typescript。 我们将 Storybook 的代码库移植到 TypeScript，并改进了对最终用户的 TS 支持，以跟上今年该语言的普及速度。

Storybook 的满意度翻倍

归根结底，这些改进的存在是为了让 Storybook 用户更快乐、更高效。我们做到了！

我很高兴地报告，快乐用户的百分比——使用 Storybook 并且会再次使用的开发人员——在 2019 年翻了一番多，从 15.4% 增加到 32.2%。这些结果来自 State of JS 2019，这是对 20,000 多名 Javascript 开发人员进行的年度调查。

🌎 Storybook 蓬勃发展的生态系统

Storybook 广泛的框架和插件生态系统为您提供了更多自定义和调整 Storybook 以适应团队工作流程的方式。

超过 30,000 个项目使用 Storybook

GitHub 包统计数据显示，Storybook 现在被超过 30,000 个公共存储库使用——更不用说无数依赖我们的私有存储库了。

Storybook 早期成功的关键之一是 create-react-app 的推荐，create-react-app 是用于搭建 React 应用程序的最流行的工具。在 2019 年，我们看到更多的框架采用 Storybook 作为他们推荐的 UI 组件浏览器

• 广泛使用的 Angular 开发工具包 Nrwl 最近开始开箱即用地提供 Storybook 支持。
• Vue 的 Material 组件框架 Vuetify 宣布支持 Storybook。
• Web 组件的有主见的设置 Open-WC 也在其推荐中添加了 Storybook。

插件满足开发人员可能想要的一切

Storybook 拥有满足一切需求的插件。插件使开发人员能够自定义 Storybook 的开发人员体验，以适应他们独特的工作流程。

我们一直以丰富的插件支持而闻名，但 2019 年是一个转折点。今年，Storybook 成为设计工具的标准集成点。首先，InVision 将 Storybook 支持内置到 Design System Manager 中。现在，每个主要设计工具都有插件，包括 Sketch、Figma、Zeplin、Abstract 和 Adobe XD。

🚀 2020 年，我们来了！

2020 年的总体主题是 Storybook 作为一个平台。优秀的平台使团队、工具和服务能够轻松接入。平台一个领域的改进使每个用户和集成商受益。这创造了一个良性循环，Storybook 的发展速度比任何人都独自完成的速度更快。

社区

我们的目标是使维护更可持续。对于大多数人来说，为 Storybook 做贡献是一种爱的奉献。我们需要更轻松地分担支持、错误和改进的负担，以便维护者不会精疲力竭，并且项目可以继续增长。因此，我们正在构建一个维护者支持网络，以帮助特定于框架的贡献者构建和管理子社区。

产品

Storybook 在改进平台架构的同时，增加了节省工作的功能，在这方面有着良好的记录。明年，我们将继续保持这一传统，更新 Storybook 的发布方式、改进对多个框架的支持、性能升级以及众多核心功能改进。

生态系统

我很高兴彻底改进 Storybook 对插件用户和作者的体验。作为用户，您将能够发现更多插件来提高您的工作效率。作为插件作者，您将获得更多支持来构建插件并将其分发给整个社区。

🙏 谢谢！

Storybook 已成为数万名 UI 工程师必不可少的工具。我们在 2019 年取得的令人难以置信的进步证明了社区的强大。我们期待明年带来更多好消息！

特别感谢

特别感谢我敬业的指导委员会队友 Filip Riabchun、Igor Davydkin、Norbert De Langen 和 Tom Coleman，感谢他们帮助 Storybook 保持正轨。并向这些出色的维护者致敬，感谢他们今年做出的巨大贡献

• Angular: Kai Röder
• Vue: Aaron Pool, Shota Fuji
• React Native: Gytis Vinclovas, Benoit Dion
• CRA: Brody McKee
• Web-components: Thomas Allmer
• 产品设计: Dominic Nguyen
• 设计系统: Kyle Suss
• 文档: João Cardoso
• TypeScript: Gaëtan Maisse, Kai Röder
• Jest & A11y 插件: Alex Wilson
• Storybook Docs 插件: Atanas Stoyanov, Patrick Lafrance

2019 年每位 Storybook 贡献者 🙏@8beeeaaat @9renpoto @aaron-pool @adamdoyle @adamyonk @adrian-potepa @aej11a @afebbraro @afholderman @alanhchoi @alazurenko @andersos @aokiken @apanizo @apust @aromanarguello @arthurdenner @atanasster @b0c4j @baraalex @beizhedenglong @benoitdion @billfeller @bpeab @bqrichards @brandonchinn178 @canercandan @carolstran @chaseadamsio @christiancooksponge @christianliebel @christoph-fricke @christophe-g @chrsep @codebyalex @collingreen @crimx @crubier @ctavan @dakmor @danielduan @danrha @darmawanalbert @darondel-yoobic @dbendaou @dhuang612 @discostarslayer @domjacks @domoritz @domyen @donaldpipowitch @donysukardi @dsusskind @dylanpiercey @edelgado @edumoreira1506 @emilio-martinez @enagy27 @enuvid @ericcarboni @ewgenius @expe-lbenychou @ezhikov @fabianmarinog-turner @fabiradi @fforres @frederickfogerty @gaetanmaisse @gaspardip @ghengeveld @gherciu @ghondar @gongreg @good-idea @halitogunc @hansottowirtz @hasparus @hcz @himynameisdave @hipstersmoothie @hobroker @hypnosphi  @igor-dv @indigolain @jack-barry @jamesdbruner @jamesgeorge007 @jasdeepgill @jb9229 @jballin @jeffgukang @jerriclynsjohn @jessica-koch @jimmydalecleveland @joeycozza @jounqin @juliamitchelmore @jung-han @just-boris @kamahl19 @karlsander @kerbe @kerumen @kevinsuttle @kroeder @kush @kylemh @lazaroonline @lebenleben @leoyli @libetl @lonyele @lucas-burdell-karmak @lucasterra @luchanso @macrozone @mariocadenas @mathiasrando @matt-tingen @mattfelten @matthewliuswims @meirish @michaeldeboey @mrmckeb @natalia504 @naturalclar @nchudleigh @ndelangen @ndom91 @necolas @nminhnguyen @nutboltu @nzacca @pascaliske @patricklafrance @patrickteivas @pau1fitz @peeja @pierroberto @pittan @pksunkara @pmmmwh @pocka @qazzian @quentind @quramy @ramkrish2079 @rbardini @rembrandtreyes @resource11 @rmccue @robaxelsen @roydipti23 @rwieruch @rwoverdijk @sairus2k @sakito21 @schalkventer @shiatsumat @shilman @siadcock @simenbrekken @slaviczavik @smasontst @spencerbyw @squidfunk @steel @stephanemw @stereodenis @stnamring @stof @stowball @superpencil @svewag @taimoormk @testerez @thebuilder @thollander @tmeasday @tylerlee @victorgb6 @wa4-fearless-otter @xmile1 @xyshaokang @yankovsky @yosefalnajjarofficial @zaccc123