对pull请求进行视觉检查

如何合并PRs更快的自动化UI审查

加载
多米尼克阮
@domyen
“十博体育备用网址想法的不完整性和不一致性只有在实施过程中才会变得明显.”
——弗雷德布鲁克斯, 《十博体育备用网址》 1975

40多年前,工程师们就明白,开发自然会揭示边缘情况. 如今,前端开发人员发现缺少UI状态和被忽视的技术复杂性,这些问题只能在开发过程中解决.

视觉回顾,即将到来 彩色2.0 (可在 早期访问),帮助团队验证UI实现,并在一个共享的工作区中整合反馈. 对于注重实效的开发人员,您最终可以构建一个更持久的UI,而且通信开销更少.

为什么?

代码审查对于从其他开发人员那里收集反馈以提高代码质量是至关重要的. 但是当代码输出图形时会发生什么呢?

用户界面是功能的组合 form. 代码评审验证函数,但不验证人们实际看到的内容. 视觉评审是确认用户界面外观的过程. 它对于细化用户界面和维护UI库非常有用.

可视化评审工作流

此功能现在可用于 彩色2.0早期访问 用户. 它很快就会面向所有现有用户发布 彩色 客户.

十博体育备用网址的任务是使UI组件开发更快,更令人满意. 与视觉审查,十博体育备用网址简化和自动化的反馈过程,以节省您的时间.

1. 每当您推送代码时,您的Storybook就会自动在chromium的云中发布和版本化. 您的团队将收到通知,该组件库已准备好使用PR标记进行可视化检查.

2. 按照链接到新的拉请求屏幕. 如果你使用GitHub、Bitbucket或GitLab进行代码审查,你可能对这个屏幕很熟悉. 但与审查代码不同,该公司的PR页面旨在帮助团队快速审查UI.

比较各个分支之间的UI更改

用户界面是代码的可视化表达. 为了查看用户界面,您需要看到它们. chrokical对每个提交的每个故事进行图像快照,以保持用户界面的视觉历史. 这允许十博体育备用网址在分支和表面之间比较UI的改变.

这意味着团队可以确切地看到在一个pull请求中发生了什么变化. 没有更多的向下搜索到UI变体的链接或粘贴截图. 分享一个链接到彩色与pm, 技术领导者, 让设计师和QA全面了解UI的变化.

3. chromic保存组件库的特定分支历史. 当您导航到组件选项卡时,您将获得拉请求中每个UI组件的可搜索目录. 这有助于人们快速参考组件进行复制和QA.

浏览此PR中的最新组件

4. activity选项卡是你的仪表板,用来显示来自pull请求的更改、注释和构建历史. 滚动时,您将看到一个与ui相关的事件提要. 这可以帮助您跟踪一个地方的UI实现进度.

获取最新UI更改和反馈的提要

🎉你已经准备好合并了! 可视化评审工作流帮助团队细化UI实现,以更快地发布特性.


半音的开源CLI

十博体育备用网址开放了 彩色CLI 并将故事书的颜色升级为3.0.3. 新包的特点是bug修复和更平滑的安装过程. 它向后兼容2.x.

彩色上传和版本你的故事书每次提交,所以你可以跟踪你的组件库的发展. 十博体育备用网址现在链接到完整的Storybook开发环境,包括每个提交的插件.

接下来是什么?

UI开发是一项团队活动,但要平衡每个人与实际开发工作的同步可能会让人筋疲力尽. 大多数团队陷入耗时的聊天、问题、电子邮件和会议中. 十博体育备用网址的下一个目标是通过提高UI协作的速度和频率来阻止误解.

加入十博体育备用网址

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

用评论表达自己

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