令人愉快的故事书工作流

高效的团队如何从Storybook中得到最多

加载
多米尼克阮
@domyen

Storybook的一大优点是能够通过附加组件定制它以适应您的团队的需求, 配置, 和API. 有了这些触手可及的选项,你很容易就会忽略全局——Storybook工作流.

我调查了4个专业团队和Storybook自己的维护者,总结了一个平衡生产力的核心工作流, 设置, 和快乐. 本文介绍了一个使用Storybook交付UI组件的高效可重复流程.

特色的工程师 ◾️ Squarespace, 🌍 发现网络, ⚽ ️美国职业足球大联盟, ⚛️ 阿波罗GraphQL 📕 故事书, 🔬 浓度

TLDR: 令人愉快的故事书工作流

故事书最擅长什么?

在十博体育备用网址开始之前,让十博体育备用网址承认Storybook擅长很多事情:a 组件的探险家,样式指南生成器,文档站点,游乐场,沙盒和UI库. 有很多有效的用例, 但我采访的每个团队都有一个关键特点.

故事书,原来 反应的故事书,是由一个单一的用例产生的:在独立的环境中开发和设计应用程序外部的UI组件”. 孤立地开发UI组件可以大大简化开发难以达到的状态和边缘情况. 这反过来会产生耐用组件. 因此,即使使用Storybook还有其他方法,这里概述的工作流也只关注其中一种.

我喜欢Storybook允许您独立地构建组件. 它可以帮助拥有不同经验的开发者扩展所面临的挑战

-Kurtis Kemple,技术主管 美国职业足球大联盟

来自专业团队的最佳实践

每个公司都是不同的,他们的工作流程也是不同的. 因为好的流程始于团队需求, 我认为有很多不同的实践. 这就是为什么当对话中出现一些模式时,我很惊讶. 这是他们所说的细目.

避免歧义

在UI开发中,不明确的输入或状态很容易混淆. 团队通过创建“明确的”故事来解决这个问题,这些故事准确地记录了组件在给定的情况下应该如何响应. 故事应该封装实现给定状态所需的特定UI数据和值.

显示每个州

指定每个组件状态
充分阐明每个组件状态,并将其包含在Storybook中. 这让您覆盖了组件应该支持的所有边缘情况. “最好的故事类型允许你想象你的组件在野外可能经历的所有状态。 蒂姆 at 阿波罗GraphQL.

封锁输入
确保道具值在每次呈现时保持一致. 使用静态输入代替随机输入(数学).随机)或相对(当前日期). 这减少了意外,并更好地与检查故事输出的工具(如快照和可视化回归测试)集成.

在编写故事时,您可以免费获得组件支持文档和使用示例!

- 贾斯汀•班尼特, Frontend建筑师 发现

不断的视觉检查

一旦您的组件状态被映射到故事,那么将这些故事用于QA是合乎逻辑的. 可视化检查是检查UI回归的故事的过程. 这发生在开发过程中 在QA.

在开发过程中进行可视化检查,以验证UI

在开发过程中首先进行审查
在构建组件时,更改常常会引发意外的错误. 例如,为一种状态设置样式可能会破坏其他状态. 在开发过程中定期切换您的故事可以防止意外的UI错误.

QA期间再次评审(自动或手动)
在完成组件开发之后,QA就开始了. 团队与同事分享他们的Storybook,以确认视觉需求减轻了bug.

许多团队 自动化Storybook的可视化评论 通过视觉回归测试. 这种测试方法在每次提交时都截取每个组件的屏幕截图,并比较它们以检测更改.

Squarespace有多个故事书. 视觉回归测试每个Storybook帮助十博体育备用网址自动捕获UI bug.

-丹尼尔段,软件工程师 Squarespace

在默认情况下合作

尽管有许多层次的视觉检查,缺陷仍然是构建软件不可避免的一部分. 因为大多数缺陷都是由于沟通错误而不是技术,所以十博体育备用网址的Storybook工作流包括用于反馈和问题解决的释放阀是非常重要的.

与同事协作修改UI

部署Storybook作为真相的来源
为了进行协作,您的团队应该查看相同的UI. 在网上部署Storybook,作为讨论的通用参考点.

任务管理器中的讨论和聊天
一旦每个人都在讨论同一件事,你就需要为对话腾出空间. 通过在任务跟踪器中创建与Storybook链接的任务,积极主动地寻求反馈.

部署Storybook使每个PR更容易进行可视化审查,并帮助产品所有者按组件进行思考.

-诺贝特·德·兰根,故事书的维护者
在整个工作流中遵循一个UI组件.

1. 在Storybook中构建UI组件和故事. 展示您的组件应该支持的每个离散排列(没有必要展示) 每一个 可能的道具组合). 在编写代码时可视地检查UI回归. 如果组件具有微妙的功能,则编写单元测试.

2. 与其他开发人员一起进行代码评审. 就像你审查公关一样, 确保每个组件的描述都符合规范,并且没有错误. 在Github或Jira创建一张票,并分配你的队友. Use labels to indicate the status of the request; whether changes are requested or it’s passed review.

3. 与更广泛的团队进行视觉评审. 部署故事书 并在您的任务管理工具中创建一个问题,并提供到您的在线故事书的链接. 如果你的应用团队使用相同的任务管理工具(e.g., Jira)在第二步的票上背. 利用这个机会获得来自其他领域的涉众的认可.

专业提示:视觉回归测试
通过使用可视化的回归测试工具自动化可视化评审来节省时间. 结帐 彩色是Storybook的维护者开发的一个云测试工具.

4. 合并到你的代码库. 一旦你签署了并且所有CI检查通过了,你就可以将组件合并到你的代码库中了(或者将组件部署到NPM中). 你的工作完成了! 🎉

结论

每个人都同意显性故事, 持续的视觉检查, 内置的协作简化了UI组件的构建. 令人愉快的Storybook工作流综合了这些最佳实践. 它为您提供了一个端到端过程,从最初的构建开始,到将UI组件合并到代码库结束.

有了这个工作流,您就有了一个可以进一步构建的现场测试流程. 我很高兴看到你如何发展它!

还没试过Storybook?

和我交谈过的每个人 热情 Storybook使开发人员的工作效率更高. 如果你使用了React、Vue或Angular,但还没有尝试过,看看这些宣传是怎么回事:

特别感谢

愉快的故事书工作流是在对话中创建的 汤姆·科尔曼, 迈克尔Shilman, 诺伯特•德Langen, 丹尼尔段, kurtiskemple, 蒂姆Hingston, 贾斯汀•班尼特. 🙏

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

新的帐户系统为彩色

在一个地方管理不同的项目、账单和帐户访问.
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10