我是如何为 Angular Components 做出贡献的

2020 年 10 月 28 日

我是如何为 Angular Components 做出贡献的

本文最初发布于 Medium 网站,经原作者授权由 InfoQ 中文站翻译并分享。


在这篇文章中,我想分享我对@angular/components的贡献,以及与谷歌团队合作维护它的经验教训。作为Infragistics的工程师,我手头的一项工作是IgniteUI for Angular组件库,负责开发和维护 IgxOverlayService。它允许在应用中的内容上层渲染一个 Angular 组件或一个 ElementRef,比如说对话框、下拉菜单、工具提示等。


几个月前,我研究了Angular Components CDK(组件开发工具包),这组工具在实现通用交互模式的同时对其表示也不是 opinionated 的。它代表了在 Angular Material 库中核心功能的一个抽象,而没有任何专属 Material Design 的样式。可以把 CDK 视为经过良好测试的功能的一个空白状态,在此状态下你可以开发自己的定制组件。它提供的抽象之一是overlay(叠加)服务。这项服务的功能与我在产品中负责的功能非常相似。Angular Components Overlay 服务还允许渲染 Angular 组件或模板以覆盖应用中的其他内容。这项服务看起来很合适。我决定不使用自己的服务,而使用 CDK 提供的这些服务。我开始调查 CDK overlay 是否符合我们的要求。


前期工作


我与 Infragistics 的管理层开了一个会,讨论了从 IgxOverlayService 切换到 Angular Components SDK Overlay 的可能性。我们的共识是,如果切换到 Angular 叠加服务,我们需要维护的代码会更少,并且我们将能为 Angular Components 开源项目做出贡献。最后,我们决定尝试切换到 SDK Overlay。为了实现这一转换,Infragistics 的开发人员得到许可,可以每天花几个小时为 Angular Components 做出贡献。


第一步,我分叉了存储库,构建了程序包,运行了 dev-app,并开始研究贡献流程和 Angular Components 团队遵循的标准。当我熟悉了代码后,便开始查看 GitHub 上的 Material Components公共存储库中的问题。如果你想做出贡献,那么从文档入手是很好的选项。下面是你可行的一种入门策略:


  • 查看问题。

  • 选一个。

  • 尝试解决它。


你遇到的问题越多,你对代码以及组件的开发和工作方式就越熟悉。在贡献之前,请务必先阅读“对 Angular Material 做出贡献”指南。它将帮助你避免在开始使用开源项目时遇到的常见陷阱。


新功能


看过几个问题并开始熟悉这个库后,我看了一下Overlay服务,发现那里缺少我需要的某些特定功能。例如,它缺乏渲染纯 HTML 元素的能力,以及允许服务将其最终元素层次结构附加到 DOM 中特定位置的能力。于是我决定向 Angular Components 团队推荐新的功能,并尝试自己实现这些功能。


我和我的团队负责人与产品负责人一起,与 Angular Components 团队建立了联系。在几封电子邮件的交流之后,我们与对方开会讨论了叠加服务中所需的新功能。他们对我们为产品做出贡献的意愿感到高兴。他们还解释了向项目添加新功能的流程。最重要的一点是:不要破坏现有功能。正如他们所说,这个库已经用在了在成千上万的应用里,所以新的更改合并后应该不影响任何应用的工作。


设计文档


添加新功能的第一步是创建设计文档。你可以在 GitHub 的Wiki页面上找到 Angular Components 团队的所有设计文档的集合。在编写设计文档之前,最好检查一下现有文档并使用推荐的模板来起步。在检查了 Overlay 设计文档以及更多现有文档之后,我为 Angular Components Overlay 中自己需要的每一项功能都编写了文档。这个过程很艰苦,对我来说很困难,但到最后是很有意义的。向框架添加新功能可能看起来很容易,但当你开始编写设计文档时,你会发现这是有多难的事情。你必须从各个角度审视新功能的工作机制,以及它与现有功能集成的方式。将所有这些内容写到文档中后,我就可以描绘出自己对所需功能的蓝图。例如,以下是我必须回答的一些问题:


  • 是否有另一个可以对比的实现?

  • 该功能如何实现?

  • API会是什么?


等我完成了设计文档,它们就必须经过 Angular 团队的审查。Angular 团队的反应速度非常快。设计文档发过去后,第二天就得到了审核(你的时间表可能会有所不同)。我收到的所有评论都是简洁、积极和建设性的。在解决所有评论之后,我获得了实现功能的绿灯。


我关注的第一个功能是叠加层渲染 DOM 元素或 ElementRef 的能力。幸运的是,当我完成设计文档并被 Angular Components 团队接受后,他们告诉我该功能已经实现,并已包含在一个PR中。我查看了这个 PR,并请求了一些更改,因为我需要的某些更改已包含在该 PR 中。


实现


我实际开发的是自己需要的第二个功能,是在外部单击时关闭叠加层。想象一个模态对话框,你可以在对话框外部单击,然后它就会关闭。你可以在此处找到解释实现细节和先前工作的设计文档。设计文档获得批准后,我就开始写代码了。这个过程与修复错误没有太大的不同。我实现了该功能并添加了必要的测试。我在所有受支持的环境中进行了测试,然后推送了我的更改并创建 PR。接下来,Angular Components 团队的成员检查了我的 PR,并要求了一些更改。完成所有请求的更改后,该功能被添加到框架中。我的合并 PR 在这里


新功能帮助 Angular Components 团队解决了项目中记录的一些问题。例如,MatMenu 就使用了 SDK 的叠加层。当用户打开一个菜单时,显示的菜单会带 backdrop,使菜单变为模态的(issue6927)。结果,当菜单打开时,用户将无法与应用程序项目交互。使用新的 detachOnOutsideClick 功能可以解决此问题。借助这一新功能还可以解决其他一些问题,例如93201589916036


这个故事分享了我作为 Angular Component 贡献者的经验。一开始我是没什么头绪的。我不确定从哪里开始,不知道该如何协作。但如果你一步一步地往前走:找到所需的组件,进行调试以找出执行流程,并按照贡献流程行事,那么一切自然就会解决了。最后,我对自己的工作感到非常满意。我学到了很多东西:Angular 开发人员使用 RxJS 的方式、如何组织框架中的测试,等等。当然,为成千上万的工程师使用的项目做贡献的感觉也很棒。我还发现了负责项目的人们乐于接受新想法,并且非常友好。如果你有空闲时间,请大胆向前,检查 Angular Components 中的问题并挑一个解决吧!


原文链接:


How I contributed to Angular Components


2020 年 10 月 28 日 10:07704

评论

发布
暂无评论
发现更多内容

ARTS 第 3 周

乌拉里

ARTS打卡 第4周

引花眠

ARTS 打卡计划

week3 总结

雪涛公子

每周学习总结

Conn

极客大学架构师训练营

创业公司技术体系建设

星际行者

Kubernetes DevOps APM 基础设施

Week01 作业

Conn

Feign Client 原理和使用

公众号:好奇心森林

Spring Boot HTTP

区块链中的“链上”和“链下”

CECBC区块链专委会

区块链技术 分布式身份标识 难以篡改

数字政府升级下的数据产品探索

数据司令

大数据 政务信息化 数字政务

设计模式学习总结

qihuajun

week3 命题作业

任小龙

单例模式和组合模式

王鹏飞

第三章总结

「架构师训练营」第 3 周作业

邓江川。

设计模式-单例&组合

Z冰红茶

Raft探索历程--Part1

老胡爱分享

分布式协同 raft

Week 03 学习总结 代码重构

Z冰红茶

Spring 源码学习 - @Async注解实现原理

公众号:好奇心森林

Spring Boot aop

模式与重构

满山李子

第三周作业

胡江涛

极客大学架构师训练营

架构师训练营第 3 周 _ 课后作业

方舟勇士

课程作业

单例及组合模式实践

WulalaOlala

设计模式 极客大学架构师训练营

如何搭建一个本地服务器集群

Rayjun

分布式

重学设计模式之单例模式

设计模式 单例模式 Singleton

第三周总结

胡江涛

极客大学架构师训练营

138 张图带你 MySQL 入门

cxuan

MySQL 数据库

搞定 HTTP 协议(三):如何严谨地描述一个 HTTP 报文?

零和幺

https HTTP

架构师训练营 第3周作业

Lingjun

极客大学架构师训练营

架构师训练营 第3周总结

Lingjun

极客大学架构师训练营

易纲:上海可以在人民币自由兑换等方面先行先试

CECBC区块链专委会

数字货币 区块链技术 金融科技中心

信息的表示与存储-整数的运算

引花眠

计算机基础

我是如何为 Angular Components 做出贡献的-InfoQ