预制组件

孤立地构建UI组件的情况

加载
汤姆·科尔曼
@tmeasday

我最喜欢的电视节目之一是“伟大设计”. 这是一档英国的房屋建筑节目,主持人Kevin McCloud观察人们建造各种各样的房屋. 如果你和我一样一直在关注这个节目,有一个趋势是不容忽视的.

住房项目, 特别是那些便宜又快捷的, 越来越多地使用预制材料吗. 预制件的概念就是建造 组件 工厂里的房子,然后把它们运到工地,在那里组装起来. 它取代了传统的在建筑工地用原材料建造房屋的方法(将木材锤打在一起), 设置混凝土, 等.).

如果你使用,成本可以进一步降低 现成的 预制材料,如特定“商品”尺寸的墙板. 在宜家建过厨房的人可能对这个想法很熟悉.


为什么预制构件是一个如此具有变革意义的概念? 在工厂这样的受控条件下,一次只建造一件并不难理解, 使 施工快捷方便.

所有这些与构建软件用户界面(ui)有什么关系?? 预制与从组件开发ui的过程相似. 十博体育备用网址只需要一个“工厂”来构建十博体育备用网址的“场外”组件。. 那家工厂是 组件的探险家.

建筑 公寓住房 在隔离(Capsys)

组件的探险家

A 组件的探险家 是一个工具,它允许你工作与单一组件从你的应用 隔离. 而不是在第一次使用的应用屏幕上建立一个“现场”的组件, 您可以使用隔离单个组件的工具.

组件管理器帮助您独立地构建组件

为此,您必须记录感兴趣的组件的状态. 这意味着不需要操作你的开发应用到正确的配置中去查看你的组件, 明确地写下你关心的状态.

组件资源管理器是组件的工厂.

现场施工与预制施工:案例研究

预制的想法是框架, 隔离, 线, 在工厂粉刷墙壁,而不是在不可预知的环境中现场. 您不需要大量的构建经验就可以了解这种方法的意义. 事实上, 如果你像我(和大多数软件工程师)一样, 我猜),你现在可能会认为用其他方式来做这件事是疯狂的.

如果你对预制UI组件的想法没有同样的反应, 也许十博体育备用网址需要更仔细地研究一下这两种方法.

让十博体育备用网址考虑一个案例研究: 为分析产品构建复杂的直方图, 用于各种上下文中显示各种延迟分布.

十博体育备用网址的例子直方图组件

现场

如果我正在“现场”构建直方图,那么我将从使用它的一个屏幕开始.

1. 我将从考虑组件最明显的用例开始,然后用一些典型的数据填充我的数据库. 我将直接在屏幕上构建组件.

for (i = 20; i <= 120; i+= 10) {
  db.latencyCounts.插入({
    queryId:“abc - 123”,
    延迟:我,
    计数:5000 *数学.随机()* 15000,
  });
}
A query to generate some test data; what that data looks like in-situ

2. 现在, 我可以考虑另一种类型的数据, 也许是一个新用户的一套有限的度量. 我将从我的数据库中删除一些数据,并调整组件,以确保它看起来仍然OK.

for (i = 20; i <= 120; i+= 10) {
  如果(我 !== 110) {
    db.latencyCounts.更新({
      queryId:“abc - 123”,
      延迟:我,
    },
    {
      美元:{
        数:数学.随机()* 1000,
      }
    });
  }
}
低分辨率数据

我最好检查在步骤1中创建的数据,以确保我的更改不会对最初的实现产生不利影响, 虽然.

3. 如果根本没有数据怎么办? 让十博体育备用网址尝试一下(确保十博体育备用网址检查了步骤1和步骤2的数据的任何实现更改).

db.latencyCounts.删除({queryId: 'abc-123'});
没有数据

4. 把这东西交给QA,十博体育备用网址会把它部署到一台登台服务器上. Oh! 十博体育备用网址注意到它在加载状态下渲染不好. 十博体育备用网址如何在当地看到这些? 也许十博体育备用网址需要黑客十博体育备用网址的服务器“挂起”,这样十博体育备用网址可以工作在加载状态. 最好也检查十博体育备用网址在步骤1-3中的更改.

加载

5. 根据测试结果,设计人员对视觉效果进行了一些微调(十博体育备用网址确定他们测试了十博体育备用网址所做的所有状态吗? 这是希望!). 让十博体育备用网址进行这些更改,然后确保它们不会破坏步骤1-4中的状态

最后一分钟的设计调整

6. 部署到生产环境后,用户会报告说,对于他们独特的、不寻常的数据集来说,图看起来很糟糕! 最好(匿名)导入数据到十博体育备用网址的本地数据库并修复它. 哦,十博体育备用网址应该再从第1-5步讲一遍各州.

这个过程会在很长一段时间内发生,所以当十博体育备用网址进入第6步时,记住重现第1步的命令可能并不容易(或有趣). 说实话,十博体育备用网址很有可能不会去检查它!

十博体育备用网址编写测试来编码已知的用例,并避免回归——但是 为ui编写测试是困难的.

当用例被遗忘或忽略时,回归就发生了.

预制

在预制组件时, 而不是间接地操纵十博体育备用网址的组件进入十博体育备用网址想要处理的状态, 十博体育备用网址仔细地描述十博体育备用网址感兴趣的确切状态. 组件资源管理器是一种工具,它允许十博体育备用网址在这些状态中体验组件 在隔离.

通常, this means that each step is simpler; rather than messing with the database or carefully tailoring our development account to contain the right information, 十博体育备用网址只是记录十博体育备用网址想要实验的状态.

预先列出状态可以帮助十博体育备用网址清楚地考虑直方图支持的状态. 每次处理一个新状态时,都要为它编码一个永久版本. 每次十博体育备用网址需要返回之前处理过的状态时, 只需在组件资源管理器中单击返回即可.

就像一组测试, 这是十博体育备用网址项目中逐渐积累的一组工件,它将使十博体育备用网址能够在一段时间内保持质量并避免回归. 十博体育备用网址还可以将每个状态显示给十博体育备用网址的设计师进行改进——而且十博体育备用网址可以免费得到它! 在大多数情况下是这样的 更容易 构建一个状态,而不是将应用程序调整到正确的配置.

预先制造障碍

就像建筑行业的人可能会反对预制(“那不是十博体育备用网址做事的方式”), 开发人员有时会抵制孤立地构建组件. There are a variety of common worries; here’s a short list (let me know if you have others!),以及为什么它们的问题比你想象的要小的一些原因.

太多的工作

构建状态就像编写测试. 这是许多开发者认为他们“应该做”的事情,但在时间压力下,他们会推迟.

正如我所提到的,与测试一样,组件状态的好处是不断累积的. 然而,根据十博体育备用网址和其他许多人的经验,孤立地发展通常不太常见 工作比开发更少. 这样就不那么大惊小怪了.

不要假设在十博体育备用网址的案例研究的第1步之后工作就已经完成了! 尽管您可能觉得可以快速构建组件, 很少情况下,你不需要不断地回顾它, 正确地去做, 您需要检查过去考虑过的所有状态.

很难隔离组件

一些编码模式, 或者只是时间限制, 导致组件难以独立呈现. 它们需要某种应用程序上下文(“环境”),这使得它们很难在组件资源管理器中分离出来.

独立开发将很自然地使您远离编写这样的组件. 除了 更容易重用, 而且更容易测试, 这种环境独立的组件通常是很好的开发实践.

结论

我相信,一旦您开始独立地处理组件, 你很快就可以预制你的应用程序的要点——也许甚至是整个屏幕!

如果你只是想尝试一下,最好的地方就是你的下一个地方 复杂的 组件构建. 上面的直方图是一个很好的例子,因为它有许多不同的输入,所有的输入都需要检查正确性. 所以下次你再做这个玩意儿的时候, 尝试一下组件资源管理器!

使用组件探索器隔离组件还有许多其他好处,比如团队内部的通信和可视化测试. 在Chroma,十博体育备用网址是这种开发方式的巨大支持者(十博体育备用网址称之为“Component-Driven发展),如果你想了解更多的好处,请登录十博体育备用网址的邮件列表.

这篇文章对你有帮助吗?

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

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

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

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

视图的工作

受欢迎的文章

关于故事书3你需要知道的.0

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