除了引导

从UI工具包转移到组件库

加载
多米尼克阮
@domyen

第一个工厂比工业革命早了几百年. 威尼斯的阿森纳 开创了用标准化部件组装军舰的先河. 当时的工程师们发现这样做更快更容易 组装 复杂的事物从它们的组成部分而不是 构建 他们从头开始. 今天,十博体育备用网址看到了这个想法 预制 装配在另一个工程领域也占有一席之地:构建用户界面.

用户界面越来越多地由标准化部件组装而成. UI工具包 就像 引导 是第一批为web ui提供通用部件集合的吗. 这些工具包使开发人员能够很容易地在他们的应用程序中找到和应用模式.

公司也认识到拥有自己的UI工具包的价值. 他们创造了 生活样式指南 以匹配他们的品牌的外观和感觉. 然而, 构建一个风格指南需要大量的资源,所以只有大型团队才会倾向于投资.

这个行业的一个关键变化是 UI 组件 -类似乐高的用户界面构建模块. 组件简化了自定义UI工具包的构建,因为它们将设计模式封装在模块化的标准化单元中.

这种范式转变允许任何规模的团队进行创造。”组件库根据他们的具体需求和品牌量身定做. 今天,我将介绍一下十博体育备用网址是如何走到这一步的,以及创建自己的组件库的过程.

用户界面组件

前端开发人员一遍又一遍地构建相同的用户界面. 没有多少 功能 他们之间的差异. 你通常会发现的标准组合 header, 侧边栏, 列表, 形式.

纵观历史,人们发现用现有的零件组装新产品会更有效率. 用户界面工程也不例外. 从现有的UI部件组合出新的视图比从头构建要快得多.

起初,这些模式采用特殊代码段的形式. 它们存在于文本文件中,隐藏在开发者机器的某个地方(github出现之前). 尽管这些UI代码不是很容易共享,但对前端开发人员来说却非常有用.

引导程序和UI工具包

引导出现了,并将这些UI代码整合到一个文档良好的集合中. UI工具包的关键思想是提供一个通用/通用的清单 设计模式 (伴随代码).

引导的设计模式

在当时,工作流的简单性是革命性的. 您可以复制粘贴标记并获得可操作的用户界面. UI工具包使得构建简单站点和业务线应用变得非常简单.

UI工具包的概念对设计和开发产生了巨大的影响. 这证明了设计人员可以在整个开发过程中确保用户界面的一致性. 它还强调了使用工具箱为开发人员创建ui是多么容易.

生活样式指南

生活风格指南是特定于组织的UI工具包. 团队看到了UI工具包的内在价值,但通常有特定的外观和感觉需求. 他们不能仅仅采用引导、Foundation或Semantic.

引导之类的典型缺点是,您必须遵守它规定的习惯用法和风格. 依赖于流行工具包的站点看起来往往是一样的. 你可能会发现,对于想要在市场中脱颖而出的公司来说,这并不理想.

这样的引导, 生活风格指南提供了类似的设计模式清单以及代码, 但这些模式反映了公司品牌和设计的细节.

Yelp, 沃尔玛 或者是 美国政府,重用现有的设计模式带来了巨大的效率收益. 生活风格指南让大公司很容易创建一致的外观和感觉 他们的网站.

然而, 创建一个活的风格指南是一项重要的任务——通常需要从上到下的协调. 有无数的UI排列需要设计, 构建, 维护的同时,还需要完成一项艰巨的任务,那就是获得团队中每个人的支持. 实际上,奢华的生活方式指南只是为大型团队保留的.

组件库

组件库对于大型团队来说是一种实用的方式 小-获得轻松的引导, 生活风格指南的可定制性, 以及现代视图层技术的灵活性.

像反应这样的视图层被广泛采用, 角, Vue迫使团队将ui分解成简单的组件. These 组件 serve as the 构建ing blocks of apps; the collection of 组件 is the basis of a 组件 library.

一个独立的 DatePicker 组件

组件:独立的功能

作为一个结构,组件更加强大 使用抽象比使用原始代码更容易. 它们是自包含的功能块,具有定义良好的输入和输出.

自我包含鼓励开发人员限定功能、标记和样式(这个区域是 快速发展的),在组件级. 不需要依赖于工具包级别的JavaScript或样式表, 在UI组件中,所有这些都可以封装在组件中.

小型团队可以构建组件库

对组件(相当于乐高积木的用户界面)的关注使得小型团队和个人很容易开始构建他们自己的定制设计模式库存 零碎的. 因为您逐渐积累了UI组件, 一个组件库的启动成本比构建一个活的样式指南要低(后者通常需要深思熟虑和计划).

此外,灵活性是组件库固有的. 可以添加、更新或替换每个组件,而不会影响库的完整性. 这意味着您不必每次局限于一个UI工具包, 你可以混合, 匹配, 并根据需要定制来自网络的组件.


我该如何开始?

无论你已经有了一个有组件的应用,还是正在构建一个新的应用, 开始积累组件库的好处是很容易的. 因为您可以单独添加组件,构建库的工具往往是 发展 默认情况下,尝试组件库的成本接近于nil. 让十博体育备用网址看看如何从四个步骤开始.

1. 找个地方“存储”你的组件. 组件通常隐藏在应用内部. 这并不理想,因为人们必须遍历目录和屏幕才能看到运行中的组件. 您需要的是一个对组件进行编目和可视化的中心位置. 您可以在 组件的探险家.

组件的探险家

2. 指数现有组件. 一旦你得到一个组件资源管理器, 现在是时候为应用的现有组件建立索引了,这样它们就可以被找到了.

首先在组件文件的顶部导入组件资源管理器工具(组件资源管理器的确切语法各不相同——为了便于阅读,我在简化).

从“@组件-explorer/explorer”中导入{规格Of};

接下来,为该组件编写第一个“测试”状态为 规格. 例如一个 切换 组件可能会 默认的活跃的 状态.

规格Of(切换) 
  .add(‘默认的’, () => <切换 活跃的={false} />) 
  .add(‘活跃的’, () => <切换 活跃的={true} />)

然后通过组件资源管理器签出运行中的组件. 重复这个过程来索引其他组件并扩展您的库.

故事书中的切换组件

3. 浏览数千个开源组件. 像这样的组织有很多现成的UI组件 Salesforce, AirbnbEng, 谷歌. 十博体育备用网址熟悉的UI工具包,如引导和Foundation,也被转换成UI组件. 对于复杂的组件,如 ,我建议在从头开始创建某个东西之前,浏览一下现有的东西.

4. 将开源组件添加到库中. 一旦你找到了你喜欢的东西, 是时候将它放到组件资源管理器中了(就像十博体育备用网址在第2步中做的那样). 这为你提供了一个独立的平台,在将现成的组件集成到应用程序之前,可以对其进行调整.

让十博体育备用网址模拟添加示例的过程 LineGraph 组件到库.

通过NPM安装: npm安装linegraph

创建一个新文件 进口 组件、组件资源管理器,并将测试状态记录为 规格.

从“@组件-explorer/explorer”中导入{规格Of};
从' LineGraph '中导入LineGraph;

添加一些测试状态以调整与组件资源管理器隔离的外观. 下面是组件的外观 默认的活跃的 状态:

规格Of(“LineGraph”)  
  .add('Default', () => 
     ({    
      延迟,
      计数:5000 +数学.随机()* 15000,  
  }))} />)

  .add('Active', () => 
     ({    
      延迟,
      计数:5000 +数学.随机()* 15000,  
  }))} />)  

一旦你调整好 规格 满足你的需求, 将组件添加到应用程序中需要它的任何地方,并使用类似的规范来实现预期的外观是很简单的.


除了引导

引导率先使用现成的用户界面. 人们可以使用现成的界面元素来快速构建ui. 然而,它需要遵守规定的习语和风格.

生活风格指南允许组织提供与引导一样的快速开发体验,具有自定义的外观和感觉. 挑战在于,这些风格指南需要付出巨大的努力.

组件库是一种实用的中间地带,它支持快速开发和定制,而不需要太多的组织动力形式. 在浓度, 十博体育备用网址是组件库的大支持者,因为它们倾向于引导团队实现重用和UI一致性,而不是专制.

了解更多关于UI组件的信息:
为什么你应该独立地构建UI组件
5步指南创建模块化前端»

这篇文章对你有帮助吗?

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

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

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

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

视图的工作

受欢迎的文章

介绍了反应的彩色UI测试

👋向UI回归说再见
加载
多米尼克阮
通过彩色
为专业UI开发人员提供的深入指南和教程,来自故事书团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,以获得免费的教程,指南,和资源的电子邮件给你.
友情链接: 1 2 3 4 5 6 7 8 9 10