我们是如何构建Arbor: Collib亚愽视频ra新的前端组件设计系统和架构的

如果你是Collibra亚愽视频的用户,你可能已经注意到在我们最近发布的版本中,一些区域看起来有点不同——现代,甚至更友好。这是感谢Arbor - Collibra亚愽视频最新的设计系统

Arbor是一个基于react的系统,建立在Material UI v5组件的坚实基础上,现在已经发展到包含这么多。我们已经开始使用Arbor来指代我们在Collibra实现架构现代化和重新定义如何设计、构建、管理和发布前端应用程序的举措。亚愽视频

我很高兴和大家分享它的进化历程。

使我们的正面建筑现代化

虽然我们一直努力为我们的产品提供最好的用户体验,但我们的前端技术堆栈并不总是让我们的团队轻松地提供出色的体验。有很多遗留代码需要维护,开发人员的时间只会随着组件的增加而增加设计系统和前端架构岁的。

2021年我加入Collibra时,亚愽视频用户体验研究和设计工作已经开始取代旧的Collibra设计系统。亚愽视频但很明显,我们需要的不仅仅是重新设计,我们需要重新设置前端开发的方法。我们需要使它现代化。

我们在用户体验设计和新组件设计系统的研究上投入了大量精力,但我们不能简单地在现有的前端架构上重新启动一个新的设计系统,否则我们将再次开始承担技术债务。我们想要一个全新的系统,让所有Collibra前端开发人员可以轻松地为我们现有的产品和许多即将推出的新产品创建、使用、共享和更新功亚愽视频能。

我很自豪地说t这就是我们所做的凉亭和新的正面建筑。

植树器前端组件设计系统的截图。显示图标、组件列表和一小段指导性代码。

Arbor是建立在前端开发的最佳技术之上的。技术堆栈包括React, Material UI v5, TypeScript, JavaScript, Figma的协作工具,用于视觉测试的Chromatic和Storybook,用于组件和单元测试/迭代的Cypress和Jest,模块联盟和使用Nx的下一代构建系统,它具有一流的monorepo支持。

使用新的前端架构和脚手架构建Arbor需要一个由才华横溢的设计师和工程师组成的小团队与整个组织中的许多才华横溢的团队合作,以创建和实现一个可扩展的系统。

我们所建立的以及我们如何建立它是Collibra的文化和价值观的一个很好的体现。亚愽视频虽然我们仍有一段路要走,要达到这一点并非易事,但我们开始看到我们的努力得到了回报。迁移到这种新的技术堆栈极大地提高了开发人员的生产力,减少了前端开发人员的构建时间,并缩短了向客户上市的时间。我们是这样做的。

创建中央前端团队

在用户体验研究和设计开始并在设计和产品管理的领导下开始成型后,我们在工程前线的第一步是开始建立一个坚实的团队。

这个团队不仅要刷新前端用户体验,还要改变我们前端开发的方法,并改进开发人员的工作方式。找到合适的人是很困难的这是一个挑战,因为这些都不是直接的前端工程角色。他们的工作部分是前端开发,部分是架构演进,部分是布道和实现。

与我们的产品主管一起,我们与一些进取的Collibrians组成了一个团队,我们知道他们有心态让我们朝着正确的方向开始。我们还聘请了一位新的首席工程师Steven Rathbauer。

Steven的现代思维,一流的技术技能,积极进取的态度,以及考虑Collibra短期和长期需求的能力,使他成为这项工作的完美人选,也是Collibra出色的技术领导者。亚愽视频他一马当先,很快就成为了我的好搭档。我们一起继续发展Central Frontend团队,随着项目的形成,增加了世界级的工程师和领导者,包括产品经理Eileen Jones和我团队中的软件工程高级经理Ian Forster。在几个月的时间里,我们有了一个完整的、有凝聚力的单位,叫做中央前线团队,它像交响乐一样运作。

这些工程师和这个团队拥有工作所需的各种技能的完美组合,他们都有大规模工程的能力——不仅考虑如何解决一个单一的问题,而且还考虑解决方案如何随着时间的推移广泛应用。大规模工程和愿意确定最佳实践并将其推广给其他人是在Central Frontend团队中取得成功的关键特征。这些是我们在面试新团队成员时继续寻找的技能。

建立一个新的设计系统,引入一个全新的架构

亚愽视频Collibra通过大量投资用户研究,从头开始了新的设计系统。我们想要了解我们的用户在寻找什么,同时研究最新的最佳实践和用户体验设计。在设计和产品团队领导的有力指导下,大量投资进入组件设计系统的用户体验研究和设计阶段。

研究和初始设计到位后,Central Frontend团队开始深入使用现代技术实现设计系统。我们利用Material UI v5和React作为我们的基础,我们依赖于优秀的协作工具,如Figma用于设计工作流,Chromatic Storybook用于UI可视化、文档、评论和测试。

演进体系结构、工具和核心开发人员库的工作与Material UI v5组件的主题化以及构建自定义组件组合并行进行。我们想要摆脱老化的前端整体。我们使用跨功能设计思维练习来提出一个现代的微前端体系结构,当我们用新系统替换旧系统时,该体系结构将允许我们在整个组织中扩展、实现并增量地将其推出。

我们引导一个新的前端体系结构供组织的其他部分使用,包括技术堆栈、设计系统、组件库、存储库,以及带有所有脚手架和检查的构建系统。然后,我们与来自整个组织的各个scrum团队的Collibrians组成了一个工作组,致力于我们所谓的shell的第一个实现。

亚愽视频Collibra的前端开发技术堆栈和架构

第一阶段的最终结果是:

  • 第一个使用React和Typescript作为核心技术的基于Material UI v5的设计库
  • 一个全新的前端架构,在monorepo中易于管理和维护的模块的概念,Nx作为我们的下一代构建系统。
  • 通过Material UI v5和Arbor设计系统,一个具有公共核心api、公共核心库和公共外观的脚手架
  • 专注于测试,以自动化为核心和高阈值——由高级报告和反馈工具支持
  • 存储库结构和构建系统的所有脚手架和检查使用到位Figma的协作工具,Chromatic Storybook, Cypress和Jest用于测试和迭代
  • 为任何开发人员提供的引导/快速入门指南,包括工作区生成器、检测/代码风格/IDE启动器、命名约定、库结构建议和最佳实践,让他们在前端开发中领先一步
  • 在上述技术堆栈上构建的具有公共顶部导航条的公共shell
  • 来自工作组的一组开发人员,他们配备了实用知识和最佳实践,可以与各自的scrum共享

Collibra的数据市场用亚愽视频户界面截图。在三个常见的目的地(热门数据、推荐数据和我最近访问的数据)上方会显示一个空白搜索栏。

现在,当一个新的开发人员加入或当一个新的团队想要开始时,他们可以使用Arbor设计系统、常用工具和最佳实践作为基础来编写他们的新功能或新组件。这给了他们一个巨大的开端,并节省了大量的初始投资。开发人员可以使用最新的前沿技术,并以更快、更精简和更一致的方式交付他们的工作。

演进架构

当我们启动新架构并成功执行第一组可交付成果时,我们对我们的方法充满信心,但我们并没有止步于此。我们继续寻找进一步改进的方法,尤其是当我们知道其他多个团队很快就会报名参加时。

挑战不可避免地出现了。

我们在早期发现的一个挑战是monorepo的组织方式。多个团队独立地共同开发他们的应用程序并不是最理想的,我们知道这对于推动整个Collibra的采用以及未来与新团队和产品的扩展非常重要。亚愽视频

Steven接受了挑战,提出了一个使用Module Federation的解决方案。模块联合是一种基于主机和远程概念的体系结构,其中shell被认为是主机应用程序,而使用顶部导航的其他应用程序(功能区域)被认为是远程应用程序。实现这一点和其他一些改进,包括Nx影响和缓存功能,导致了一个架构,每个应用程序可以相对独立地开发、测试、实现和迭代。

这些更改将总体构建时间减少了60-70%。

中央前线团队的演变

今天,随着Arbor的实施顺利进行,Central Frontend团队的角色已经发生了变化。除了为新组件提供支持外,他们现在还担任使用Arbor进行构建的其他团队和前端开发人员的顾问。

亚愽视频Collibra数据智能云用户界面。欢迎消息显示在空搜索栏和三个常见路径之上:仪表板、浏览次数最多的资产和推荐资产。

我们有意将Central Frontend团队构建为一个分布在多个时区的团队。这有助于传播Arbor,建立最佳实践,并将中央前端团队与Collibra的其他前端开发人员联系起来。亚愽视频

在过去的一年里,这个团队有所增长,但仍然相当小,只有不到10名高产的工程师。

当我想到Central Frontend团队时,我想到的第一个词是“Superstars”。他们是一群开放、谦逊的人,是变革的催化剂和力量的倍增器。虽然他们主要是异步工作,但他们已经像一个和谐的乐队一样团结起来,并为其他团队提供了有用的集中资源。

作为团队领导,Steven、Ian和Eileen继续帮助我努力使我们的产品路线图与新的前端架构保持一致。

为Collibra的新产品做出贡献亚愽视频

一年的辛勤工作已经为我们的用户带来了回报。

最近,我们为亚愽视频Collibra数据智能云,包括亚愽视频Collibra数据市场亚愽视频Collibra使用分析,亚愽视频Collibra主页。这些特性是Arbor的第一个实现。

亚愽视频Collibra使用分析用户界面。显示三个线形图与访问者指标上面三个表与访问指标。

所有这些新增功能都是与Central Frontend团队合作开发的应用程序。我们现在正在迅速采取行动,在多个其他功能中采用Arbor,我们正在开发几个令人兴奋的新领域,将于2023年发布。

作为备受瞩目的IBM主数据管理计划和其他云原生产品计划的前高级领导和技术主管,我经历过许多令人惊叹的团队和项目。在Collibra建立Central Frontend团队并帮助将Arbor亚愽视频带入生活是另一个职业亮点!

准备好迎接下一个挑战了吗?

数据中的机遇

相关资源亚博 在线

博客

亚愽视频Collibra是技术领域最好的工作场所之一-原因如下。

博客

Felix Van de Maele的数据处理新方法

博客

理解和推动采用新的Collibra使用分析亚愽视频

博客

数据窗口:介绍Collibra数据市场亚愽视频

查看所有资源亚博 在线

更多像这样的故事

Collibra BLEND社区亚愽视频的四位领导人,包括博客作者帕梅拉·琼斯(Pamela Jones),在照片中微笑着。
2023年2月16日4最小值

闪耀一盏灯:Collibra的BLEND社亚愽视频区如何庆祝黑色和…

阅读更多
箭头
2023年2月13日7最小值

我们如何构建Arbor: Collibr亚愽视频a的新前端组件设计系统和…

阅读更多
箭头
手持显示Calm应用界面的手机
2023年2月9日3.最小值

支持Collibra的心理健康:引入平静亚愽视频

阅读更多
箭头