故事书vs Styleguidist

顶级UI组件管理器的比较

加载
多米尼克阮
@domyen

2019年10月更新: 故事书文档 现在允许你写Markdown/MDX来直接从故事书生成样式指南. 如果您对选择哪种工具持观望态度,请查看一下.

如果您正在寻找UI组件工具,那么您很有可能遇到过 故事书Styleguidist. 从表面上看,这两款游戏都具有相似的功能,并被世界各地的团队所使用. 为你的项目选择一个合适的项目是很困难的.

在之前的博客中,我向读者介绍了 UI组件探险家,一类用于开发UI组件的工具,其中包括故事书和Styleguidist. 从那时起,太空迅速发展. 组件探索器现在被世界各地数以千计的公司使用,而且还在不断增长.

我决定重新研究两个出色的UI组件工具. 本文着眼于故事书和Styleguidist的独特优势和设计意图.

为什么需要UI组件工具?

首先,让十博体育备用网址提出一个问题. 你 已经 拥有浏览器开发工具、代码编辑器和大量的咖啡,那么为什么还需要更多的工具呢?

像React、Vue和Angular这样的现代视图层都是以组件结构为中心的. 一种构建复杂ui的方法,首先将它们分解为简单的模块(组件).

的过渡 边缘化 to 部分首先 需要新的工具来专注于组件制造. 现有的工具用于创建页面和屏幕 组件. 故事书和Styleguidist是为开发组件而设计的.

车间和店面

布拉德·弗罗斯特 写了一个 开创性的文章 关于UI开发中车间和店面的区别. 开发人员在研讨会中创建UI模式,并在店面中记录它们. 由于用例非常不同,他建议工具也应该不同.

事实上,这也是比较故事书和Styleguidist的一个有用的类比. 故事书与workshop一致,而Styleguidist与店面一致.

故事书车间

故事书是一个用于UI组件的开发环境. 它帮助您独立地构建UI组件,并提供方便的特性来模拟状态, data, 和调整道具. 当您成功呈现一个组件变体时,您可以将它保存为一个“故事”,以便在测试期间重新访问.

故事书帮助你创造

开发环境的主要目的是帮助您使用新技术进行构建. 其理念是,新技术需要定制工具来充分利用它所提供的功能. 故事书是UI组件的首批工具之一, 因此,它也有特点成熟和势头相对于风格指南.

为什么使用故事书

故事书是目前最广泛采用的UI组件工具. 开发人员证实,它为创建UI组件的基础知识提供了巨大的价值. 无论你是独立开发者还是开发团队, 你的工作效率会立刻提高. 更重要的是,蓬勃发展的插件生态系统帮助您扩展故事书的功能.

在实践中,团队使用故事书开始构建UI 在隔离组件 以及日益复杂的前端架构.

Styleguidist的店面

样式指南 are artifacts that serve as documentation for UI; which includes colors, 排版, 以及组件. 在过去, 它们需要大量的纪律(也就是加班)来维护,所以它们经常年久失修.

Styleguidist简化了创建和维护一个包含UI组件的UI文档站点. 我把它比作注射了类固醇的静电发生器. 它允许您在Markdown中创建页面并导入UI组件. 为了充分理解为什么您可能会使用Styleguidist, 让十博体育备用网址看看styleguide工件的组织价值.

样式指南帮助你重用UI模式

样式指南的主要目的是增加组织中UI模式的采用. 换句话说,它们有助于扩展UI. 其思想是,设计人员和开发人员将重用已建立的模式(这节省了资金并增加了一致性),如果它们被良好地记录在中心位置.

为什么使用Styleguidist

团队重视集中式文档,因为它是整个组织UI真实性的来源. 当遵循样式指南时,你可以促进一致性并鼓励重用. 样式指南可以组成团队 更有成效.

然而, 尽管Styleguidist简化了文档的创建,但仍然存在不可忽视的维护成本. 许多团队缺乏这样的资源 不断维护 详细的文档常常导致风格指南的死亡. 当文档滞后, 人们不愿意采用UI模式, 这样就违背了风格指南的目的.

故事书和Styleguidist:哪一个适合你?

故事书和Styleguidist是用于UI组件和库的工具. 在故事书中,您构建组件并编写故事来跟踪组件的排列. 在Styleguidist中,你通过Markdown记录组件.

故事书和Styleguidist正汇聚在工作室和店面之间的空间. 尽管它们重叠在 许多 每个特性都有不同的UI组件开发视角. 开发者喜欢这两种游戏都是有原因的. 这里有一些指导方针来帮助你选择:

故事书帮助您构建和测试组件. 如果您发现自己需要一种方便的方法来跟踪UI组件道具, 状态, 故事书非常适合你. 此外,你还可以获得一个庞大的开发者社区和插件生态系统. 了解更多:

Styleguidist帮助您记录组件. 如果你发现自己在用styleguide格式编写详细的API和使用文档,Styleguidist会让你的工作更轻松. 读:

如何做到两全其美

如果您可以在故事书这样的工作室中构建组件,并在Styleguidist这样的样式指南生成器中对它们进行文档记录,那会怎么样呢? 如果您的开发团队公开了故事书中的组件变体,那么产品/设计团队就可以在样式指南中进行管理,您就不必在工具之间进行选择!

在我的理想世界里,车间和店面是分开的,但却是共生的工具. 每一个都是为解决特定的用例而量身定制的. 不幸的是,这个世界还不存在.


了解更多

想了解更多关于UI组件开发的知识? 这些文章将给你一个良好的开端:

  • UI组件探险家:获得每个视图层的UI组件工具(包括故事书和Styleguidist)的概述.
  • 预制组件:为什么单独构建UI组件可以提高工作效率,并使UI更持久.
  • UI组件的剧本:设计和工程前端与组件的5步指南

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

无缝的GitLab和Bitbucket集成

省时的集成只是工作
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自故事书团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10