为什么在共享组件时外观很重要

通过重用组件构建一致ui的最佳实践

加载
多米尼克阮
@domyen

设计人员和开发人员浪费时间重新设计组件,因为很难找到现有的组件. 不满意的发现体验导致人们不愿意花费精力甚至尝试重用组件. 为了鼓励组件重用,团队必须首先确保组件是 容易发现的. 让十博体育备用网址来看看这需要什么.

形象就是一切

UI组件基本上是可视对象. 用户界面工程的本质复杂性在于如何将0和1呈现给人眼. 与易于验证的函数不同,UI组件需要肉眼检查“正确性”。. 发现组件的第一步是将它们呈现给人眼.

不幸的是,大多数UI组件都绑定到应用程序逻辑的上下文. 应用程序逻辑必须运行到实际 渲染 组件. 为了可重用性的目的, 这给开发人员带来了负担,因为他们必须执行业务逻辑,仅仅是为了查看组件. 这对于大型团队来说是不可行的,因为他们要在不同的分支上为同一个应用工作. 除了呈现组件, 它们还必须与上下文或开发环境隔离,才能被发现.

必须看到组件才能被重用

表面状态

仅依靠道具或参数等输入进行渲染,使得组件可以在许多环境中重用. 但是,这就出现了可发现性问题,因为每个输入都可能接受大量的值. 这反过来产生了大量可以可视化组件的方法. 如何确定组件的值 实际上 支持,忽略它们是安全的?

组件状态描述一组与预期外观相关联的输入. 这是一个合理的抽象概念,代表了最常见的情况. 记录预期的组件状态是一种实用的方法,可以帮助同事快速判断UI组件是否符合他们的需求.

定义最后一个小时的状态, 一天, week让十博体育备用网址很容易看到组件的常用用法

目录组件

在构建用户界面时,模式自然出现: header, 下拉, 覆盖, , 《十博体育备用网址》. 您可能在几乎所有的代码库中都遇到过这些问题.

为了一致性,鼓励组织共享公共接口模式. 问题是它们很难找到. 一个应用程序可能有数百个独立的组件, 有些依赖于其环境获取数据,因此不可重用, 有些是表示的,可能是可重用的. 现在的挑战是索引这些文件中哪些可以被其他人使用. 类似于图书馆的书籍,对组件进行分类可以帮助人们找到他们想要的东西.

如何提高曝光度

解决可发现性可以促进组织内的重用. 一旦UI组件被可视化、文档化和编目,它就更容易共享了. 幸运的是,有一个工具可以帮助你.

组件管理器——您最喜欢的新工具

A 组件的探险家 是构建UI组件的工具吗. 简陋的组件资源管理器是一种低成本的十博体育备用网址,可以将组件堆集给其他人使用. 它与你开发中的应用共存,并做以下几件事:

  • 可视化 组件将在应用程序逻辑的隔离中构建
  • 模拟 测试状态
  • 索引 应用程序中的UI组件
这是一个包含三个组件的简单示例. 您可以想象您的组件资源管理器充满了丰富的组件库

尝试组件资源管理器

组件的探险家 存在于许多视图层. 如果你想看到一个实际的,按照下面的说明来获得 TodoMVC 演示应用预配置 反应的故事书 组件的探险家.

  1. git克隆 http://github.com/kadira-samples/react-storybook-demo.git
  2. npm安装
  3. npm运行故事书
  4. 导航到 http://localhost:9001

最后的话

当团队可以重用现有组件时,他们不应该在定制组件上浪费时间. 重用的主要障碍是发现——基础 发现组件. 使用组件资源管理器进行可视化, 文档, 编目可重用UI是一种实用的十博体育备用网址,它可以完成发现的跑腿工作,所以你不必这样做.


Chroma是组件重用的有力支持者. 没有人需要重建相同的ui. 十博体育备用网址正在探索一个前端由可重用组件组装而成的世界,并对十博体育备用网址的发现感到兴奋. 如果你感兴趣的话, 注册邮件列表以发现更多关于该主题的文章.

这篇文章对你有帮助吗?

通过电子邮件向您发送免费的UI开发指南和教程.

4,410名开发人员,而且还在增加

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

加入Storybook和colorless背后的团队. 构建被成千上万的开发人员在生产中使用的工具. Remote-first.

视图的工作

受欢迎的文章

可视化测试驱动开发

组件管理器如何支持测试驱动的UI开发
加载
汤姆·科尔曼
通过彩色
为专业UI开发人员提供的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,以获得免费的教程,指南,和资源的电子邮件给你.
友情链接: 1 2 3 4 5 6 7 8 9 10