返回博客

Storybook 的故事

从 UI 开发初创公司到开放社区

loading
Michael Shilman
@mshilman
最后更新

Storybook 拥有超过 10,000 个 Github 星星每月 29 万次的 npm 下载量,是 React 和 React Native UI 组件开发最流行的开源工具。《Storybook 3.0》是我们首个社区驱动的版本,代表了 Storybook 源代码及其维护者的重大重组。

这篇文章解释了 Storybook 如何从一家初创公司演变成一个社区驱动的项目。其目的是帮助 Storybook 用户了解 3.0 版本的背景和维护方面的变化。对于任何希望了解项目如何从商业实体平稳过渡到社区驱动的开放社区的人来说,这篇文章也可能很有用。

Storybook 的历史可以用一张图表概括

关键的 Storybook 里程碑叠加在其 Github 提交历史之上。
  1. Storybook 1.0 由一家名为 Kadira 的初创公司开发,并于 2016 年 4 月发布。
  2. Storybook 2.0 于 2016 年 9 月由 Kadira 发布,具有出色的文档、可扩展性和付费托管服务。
  3. Kadira 于 2016 年 12 月关闭,Storybook 的开发从 2017 年 1 月中旬开始停滞。
  4. 在 2017 年 4 月 Github 上发生小规模骚动后,该项目被移交给社区。
  5. 《Storybook 3.0》于 2017 年 5 月发布,由社区驱动。

Storybook 的起源

Kadira 是 Storybook 的原始开发者。Kadira 是一家由 Arunoda Susirapala 领导的斯里兰卡自筹资金的初创公司,由才华横溢且关系密切的开发者团队组成。

Kadira 团队:Nadie Anuththara、Arunoda Susiripala、Aruna Herath、Pahan Sarathchandra、Kasun Indi、Muhammed Thanish、Madushan Nishantha。

在 Storybook 之前,Kadira 在开源世界中已经广为人知并深受喜爱,为 Meteor 社区做出了巨大贡献,开发了 在线课程开源软件包Kadira APM,这是一款适用于 Meteor 的免费增值应用程序性能管理器。

随着焦点从 Meteor 转移,Kadira 于 2016 年 4 月向世界 发布了 React Storyboook 1.0。该版本包括一个开源项目以及对商业托管解决方案的承诺。

在 Storybook 中进行实时组件编辑。

Storybook 是一个用于定义、开发和测试 UI 组件的环境。它基于“故事”或可以在隔离状态下查看的单个组件状态的想法。然后可以逐个开发应用程序,并从工作部件中高效组装。从组件构建应用程序还可以提高 可测试性、文档编写和协作。

凭借引人注目的价值主张,它抓住了开发人员的想象力,以及针对 React 组件开发的可靠实现,Storybook 从一开始就大受欢迎,登上 Hacker News 的榜首,并在早期就吸引了一批早期采用者。

Storybook 的快速增长

在 2016 年期间,Storybook 从 React 组件开发工具成熟为一个平台

  • 插件。Storybook 具有灵活的插件 API,Kadira 和广大社区已经扩展了数十个插件,以改进组件设计、测试和文档。
  • 框架。Storybook 的开放式架构支持多种组件框架,在 2016 年期间,它扩展到支持 React Native。

随着 Storybook 的成熟,它的使用量呈爆炸式增长。有很多优秀的用于组件开发和文档编写的开源项目,但我们认为 Storybook 的成功归因于以下几个因素

  1. 与流行框架的零配置集成。
  2. 开放的架构和持续不断的新功能。
  3. Kadira 强大的社区营销。
简单性获胜:只需一个零配置步骤即可安装 Storybook。

Storybook 的消亡与重生

尽管 Storybook 的受欢迎程度迅速上升,但 Kadira 还是在 2016 年 12 月关闭了大门。关闭归因于一系列个人和职业环境因素。这对 Javascript 开源生态系统来说是一个损失。

尽管 Storybook 从一开始就是开源的,但它完全由 Kadira 管理。因此,从 1 月中旬开始,pull request 处于闲置状态,并且该项目在接下来的几个月中停滞在一种不确定的状态,尽管 Storybook 在那段时间仍然被社区广泛使用。

最终,issue storybook#731 引发了人们的不满,该 issue 质疑该项目是否已死。这篇挑衅性的帖子促使 React 巨头和 Storybook 支持者 Dan Abramov 提议社区维护。他后来在随后的推文中向他近 7 万名粉丝鼓励了新的维护者团队

在新管理层领导下

为了响应 Dan 的呼吁,Storybook 爱好者 Norbert de Langen 挺身而出,领导向社区驱动的 Storybook 的过渡。Arunoda 和 Muhammed Thanish 慷慨地协助了过渡,并继续为该项目提供建议。

Norbert 在四月初在社区志愿者之间组织了一次 Google Hangout,我是第一次通话中感兴趣的成员之一。从那时起,Norbert 和我一直在 Github 和 Slack 上推动 3.0 版本的发布,以及一组核心维护人员和大量贡献者,这归功于该项目的受欢迎程度。

我们与社区志愿者举行的启动会议,包括我本人。

新的管理层主要是首次担任开源维护人员的人员,他们因为对 Storybook 的热爱以及对开发用户界面的更好方式的兴奋而走到了一起。我们从未见过面,但我们是一个随和的团队,在一起工作很开心。

我们的核心维护人员遍布全球,分布在阿姆斯特丹、科伦坡、莱斯特、墨尔本、莫斯科、巴黎、旧金山和首尔,贡献者来自除南极洲以外的每个大陆(总得为 v4 留下点什么!)

遍布全球的 Storybook 贡献者

在过去的一个月中,我们完成了对 Storybook 的全面改进,清理了其代码/软件包结构/文档/发布流程,并在此过程中关闭了许多未解决的问题

宣布 Storybook 3.0
webpack2、create-react-native-app、快照测试 ++ 等等!

未来的道路

在过去的两个月中,Storybook 从一家初创公司的灰烬中重生,并成长为一个社区驱动的集体。借助 Storybook 3.0,我们为未来的版本奠定了坚实的基础。

很快我们将分享我们的路线图,以改进平台的功能、可用性和可扩展性。要保持关注,请点击下面我们在 Medium 上的出版物上的“关注”,或在 Twitter 上关注我们。

如果您想加入这项事业并讨论 Storybook,请加入我们的 Slack 频道。我们是一群友善的人,欢迎所有经验水平的合作者!

如果您有兴趣了解有关 Storybook 的更多信息,请阅读我们的文档并在您的下一个 React 或 React Native 项目中试用 Storybook。就这么简单

npm i -g @storybook/cli
cd my-storybook2-project
getstorybook

最后,要及时了解与 Storybook 相关的新闻,请点击下面的“关注”,或在 Twitter 上关注我们。如果您喜欢 Storybook,请点击下面的 👏 按钮,以帮助更多人发现它。

用 ❤️,storybook 团队。

加入 Storybook 邮件列表

获取最新新闻、更新和版本

6,730位开发者及更多

我们正在招聘!

加入 Storybook 和 Chromatic 背后的团队。构建被数十万开发者在生产环境中使用的工具。远程优先。

查看职位

热门文章

开放 开源软件

开放 Storybook 的开源
loading
Norbert de Langen

介绍:适用于 Vue 的 Storybook 🎉

众多“适用于 <在此处插入框架> 的 Storybook”中的第一个
loading
Norbert de Langen

宣布 Storybook 3.0

webpack2、create-react-native-app、快照测试 ++ 等等!
loading
Michael Shilman
加入社区
6,730位开发者及更多
为什么为什么选择 Storybook组件驱动的 UI
文档指南教程更新日志遥测
社区插件参与其中博客
案例展示探索项目组件词汇表
开源软件
Storybook - Storybook 中文

特别感谢 Netlify CircleCI