Storybook 2019 年度回顾
社区、产品和生态系统迎来爆发性增长的一年
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 各框架子社区的显著增长
看到这些社区获得显著发展令人振奋。其中表现突出的是 Storybook for Vue (年初至今增长 309%)、React Native (168%)、Angular (420%) 和 HTML (893%)。这种增长使得平台更加实用和健壮。每次有人添加新功能或修复 Bug，无论他们选择哪个框架，每个人都能从中受益。
增长最快的开源社区之一
Storybook 这样一个规模的项目离不开成千上万使用 Storybook、提交 Bug、帮助其他用户、改进代码/文档、提供支持和反馈，以及向世界宣传它的人们。
值得庆幸的是，我们的用户增长也带来了大量新贡献者。根据 Github 的 2019 年度 Octoverse 报告，Storybook 是全球增长第 9 快的开源社区。
Storybook 现在拥有 860 多名贡献者，他们来自除南极洲以外的每个大陆。团队不仅才华横溢，而且由开源社区中最友好、最具协作精神的人士组成。
新维护者。社区增长帮助我们增加了新的项目维护者。Storybook 面临着一个“M x N 问题”，即维护数百个插件和集成 (M) 以及数十种不同的框架 (N)。我们庞大的社区有助于保持项目的稳定，并在产品快速发展的同时为所有框架提供用户支持。
更好的文档。社区增长也帮助我们改进了文档，这对于项目的成功至关重要。Storybook 的网站 得到了彻底翻新，新网站非常漂亮！我们还升级了 Learn Storybook，这是 Storybook 为专业开发者提供的免费指南集，增加了新的教程和翻译。
- 新的 9 章教程：面向开发者的设计系统
- 支持的框架：React、Vue、Angular、React Native、Svelte
- 本地化版本：English, Español, Português, Nederlands, 简体中文
赞助商让 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：从您的故事中自动生成的最佳实践文档
- Storybook Design System：支持三个高流量网站的参考实现
- 面向开发者的设计系统：一个九章教程，涵盖 Storybook 设计系统背后的原理
- MDX 中的富文本文档：为团队量身定制的完整文档。
- 新框架：对 React、Vue、Angular、Web-components 和 Ember 提供一流的文档支持。
持续的架构演进
Storybook 在其架构方面也取得了重大进展。基础设施的改进使得产品更容易使用，帮助我们更好地与更广泛的生态系统互操作，并提高了性能。
2019 年的主要成就包括
- 组件故事格式 (CSF) 是一种使用标准 ES 模块编写组件示例 故事 的清晰且完全可移植的方式。它允许故事导入 Jest 和其他测试工具中，并且正在被设计和开发领域的其他工具采用。
- 声明式配置 是另一项类似的努力，旨在大幅简化 Storybook 的配置、提高性能，并帮助 Storybook 与其他工具互操作。
- Typescript. 我们将 Storybook 的代码库移植到 TypeScript，并改进了对最终用户的 TS 支持，以跟上该语言今年 popularity 的增长。
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 推荐，这是用于搭建 React 应用的最流行工具。在 2019 年，我们看到更多框架将 Storybook 作为其推荐的 UI 组件查看器。
- Nrwl，广泛使用的 Angular 开发工具包，最近开始默认集成 Storybook 支持。
- Vuetify，Vue 的 Material 组件框架，宣布支持 Storybook。
- Open-WC，一个针对 web components 的规范化设置工具，也在其推荐中加入了 Storybook。
开发者所需的一切插件
Storybook 拥有适用于各种需求的插件。插件让开发者能够自定义 Storybook 的开发体验，以适应其独特的工作流程。
我们一直以丰富的插件支持而闻名，但 2019 年是一个转折点。今年，Storybook 成为了设计工具的标准集成点。首先，InVision 将 Storybook 支持构建到其 Design System Manager 中。现在，每个主流设计工具 都有相应的插件，包括 Sketch、Figma、Zeplin、Abstract 和 Adobe XD。
🚀 2020，我们来了！
2020 年的总主题是将 Storybook 打造成一个平台。优秀的平台让团队、工具和服务能够轻松接入。平台一个方面的改进会惠及所有用户和集成方。这创造了一个良性循环，使得 Storybook 的发展速度超过任何个人独立完成的速度。
社区
我们的目标是使维护更可持续。对大多数人来说，为 Storybook 做贡献是一种热爱。我们需要让支持、Bug 和改进的负担更容易分担，这样维护者就不会倦怠，项目才能继续发展。因此，我们正在建立一个维护者支持网络，帮助针对特定框架的贡献者建立和管理子社区。
产品
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
感谢 Storybook 2019 年的每一位贡献者 🙏@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