返回博客

Storybook 的故事

从 UI 开发初创公司到开放集体

loading
Michael Shilman
@mshilman
最后更新

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

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

Storybook 的历史可以用一张图总结

关键的 Storybook 里程碑叠加在其Github 提交历史之上。
  1. Storybook 1.0 由一家名为 Kadira 的初创公司开发,并于2016年4月发布。
  2. Kadira 于2016年9月发布了 Storybook 2.0,具有出色的文档、可扩展性和付费托管服务。
  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 社区做出了巨大贡献,开发了在线课程开源软件包以及用于 Meteor 的免费增值应用性能管理器 Kadira APM

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

在 Storybook 中实时编辑组件。

Storybook 是一个用于定义、开发和测试 UI 组件的环境。它基于“故事”(stories)的概念,即可以独立查看的单个组件状态。然后可以逐个开发应用程序,并从可工作的部件中高效地组装。通过组件构建应用程序还可以提高可测试性、文档和协作。

凭借吸引开发者想象力的引人注目的价值主张,以及对 React 组件开发的扎实实现,Storybook 从第一天起就大受欢迎,迅速登上 Hacker News 的榜首,并在一开始就吸引了大量早期采用者。

Storybook 的快速增长

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

  • 插件(Addons)。Storybook 拥有灵活的插件 API,Kadira 和整个社区通过数十个插件扩展了它,以改进组件设计、测试和文档。
  • 框架(Frameworks)。Storybook 的开放架构支持多种组件框架,并且在2016年扩展以支持 React Native。

随着 Storybook 的成熟,其使用量急剧增长。有许多优秀的开源项目用于组件开发和文档,但我们认为 Storybook 的成功归因于几个因素

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

Storybook 的消亡与重生

尽管 Storybook 迅速普及,Kadira 于2016年12月关闭。关闭原因归结于一系列个人和职业原因。这对 Javascript 开源生态系统来说是一个损失。

尽管 Storybook 从一开始就是开源的,但完全由 Kadira 管理。因此,从1月中旬开始,拉取请求(pull requests)停滞不前,项目在接下来的几个月里陷入停滞状态,尽管在此期间社区仍然广泛使用 Storybook。

最终,不满情绪因 issue storybook#731 而爆发,该 issue 质疑该项目是否已经死亡。这篇引发争议的帖子促使 React 大佬、Storybook 的支持者 Dan Abramov 提议社区维护。他后来在随后的推特中鼓励新的维护者团队,他的粉丝接近7万人。

新的管理层

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

Norbert 在4月初组织了一次社区志愿者的 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 邮件列表

获取最新新闻、更新和发布

7,180开发者及仍在增加

我们正在招聘!

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

查看职位

热门帖子

开放开源软件

Storybook 中的开放开源
loading
Norbert de Langen

介绍:Storybook for Vue 🎉

许多“Storybook for <在此插入框架>”中的第一个
loading
Norbert de Langen

宣布 Storybook 3.0

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

特别感谢 Netlify CircleCI