介绍基础网站,优步的建筑工程新设计系统

介绍基础网站,优步的建筑工程新设计系统

在优步,我们拥有开发人员,产品经理和运营团队使用的数百个内部Web应用程序 - 基本上是公司的每个人。由于所有Web应用程序的工作方式不同,因此它对我们的员工提供了额外的开销,以便学习如何最有效地与他们互动。这可能导致工程师花费大量的时间和精力,重塑车轮,而不是利用整个公司的通用设计系统。

要解决这些问题,优步组装了专用的设计和工程团队来提出一个普遍的系统,这导致了基础网站设计系统。2018年开放源,基础Web是一个反应组件库,实现基本设计语言,充当设备不可知基础,以便快速轻松地创建Web应用程序。

什么是设计系统?

设计系统是一组可重用组件,它与一组规则和设计令牌(称为实体)结合使用,存储视觉设计信息,如颜色或间距,并使您能够快速构建一致和可访问的应用程序。

设计系统是工程师,设计师和产品经理团队之间的共同语言,使其更容易或它们一起工作。通过对构建块的这种共同理解,它促进了生产率。设计系统还帮助船上新工程师和设计师 - 他们可以快速完成给定工程组织使用的所有可能的组件和设计令牌。

介绍基础网站

基础Web是启动,不断发展和统一Web应用程序的基础。它是一个与基本上与基本设计系统对齐的反应组件和实用程序的开源工具包,设计转换为代码。该项目设计可靠,可访问,广泛的可定制。

可靠性

通过在GitHub上公开促进我们的代码,我们将自己持续到高标准,并致力于为我们的用户提供开放的通信渠道,他们可以建议改进和返回基础网络的贡献。每个反应组件都是通过每个提交的视觉回归服务筛选,以确保像素完美的布局。我们还测试最终结束的更新傀儡,一个在Chrome Web浏览器上提供高级API控件的工具。通过利用这两种测试策略,我们可以放心,代码更改正在满足产品要求,而不会引起错误。

无障碍

用户可访问性对优步非常重要,并且基本网络确实很多,以确保开发人员赋予工具来构建适用于所有网站访问者的产品。例如,拖放列表众所周知难以实施,因为开发人员必须建立拖放交互时提供很少的帮助。使用基础网络的开发人员让键盘导航可靠,并且适用于屏幕阅读器。为确保额外的辅助功能,基础网杠杆styletron.,生成原子样式,以便Web应用程序可以尽可能少的内容下载。STYLETRON是有助于优化移动设备上的用户的基础网站,网络连接差。

定制

要考虑Web应用程序的多样性,我们构建了基本Web,可以尽可能自定义。在许多方面,您可以将该项目视为“基础”,您可以轻松创建新的设计系统。该项目提供了顶级入口点主题所有设计代币,包括颜色,尺寸和排版。开发人员不仅可以轻松编辑其Web应用程序的可视元素,但基本Web还包含覆盖功能的接口。

覆盖模式

基于我们的团队以前与组件库一起使用的经验,我们与基础网站的主要目标之一是创建Web开发软件,这将简单地重用组件。为实现这一目标,我们与Uber的网络工程师合作,以检测他们在日常工程工作中处理的主要痛点。很明显,对组件进行更多的控制是最需要的要求。

基于我们的研究,我们确定反雷竞技是骗人的应组件工程师的主要部分经常需要访问符合样式自定义,能够将某些自定义属性传递给可组装组件中的任何元素,如可访问的互联网应用程序(aria)以及修改组件呈现的能力。因此,我们在基础Web组件中引入了一个统一的覆盖API。

我们拟议的覆盖模式经历的一些好处是:

  • 没有顶级属性API过载
  • 没有额外的属性在可组合组件中不一致
  • 易于更换的呈现组件

让我们来看看基本Web的覆盖API详细介绍:

如上所述,我们为组件中的每个底层元素提供了一个标识符,因此它可以通过覆盖属性。在上面的示例中,有两个元素呈现,它们被暴露为选项在覆盖API中。

对于每个元素或组件,我们提供了一种传递方式额外的属性和样式,或完全更换组件。额外的属性作为对象传递给默认情况下应用于其他属性的JSX元素。样式覆盖可以用两种方式传递,作为对象或作为接受的函数$主题和一些共享组件状态属性,并返回样式对象。传入的样式覆盖与默认元素的样式进行深度合并。

我们还提供了一种方法完全替换底层元素或组件通过将替换作为目标标识符的组件值(在上面的示例中描绘了覆盖)。如果您想添加或更改给定子组件的功能,这可能很有用。

在内部,我们创造了助手将覆盖合并到默认或自定义样式元素中;查看我们的文件了解如何为自己的项目使用它们。

开始使用基本网络

2018年开放采购,使其他人能够体验到这个解决方案的好处,基本网站现在在优步使用,确保我们的Web应用程序中的无缝的开发经验。

要开始使用基础网站,请向我们掌握文档网站,并通过入门部分阅读,涵盖:

检验出基础网站为自己,如果您遇到任何问题,请随时与我们联系松弛的频道

评论

没有帖子展示