Taiga UI：开源一年

开源

什么是新的？

接下来会发生什么？

Taiga UI是一个庞大的 Angular 组件库。在Tinkoff ，我们闭源开发了几年，最终发布了第二个主要版本。开源至今已有一年，今天我想回顾这段历程，并制定一些 2022 年的计划。出发！

开源

这段时间里，社区开始逐渐壮大。在 GitHub 上开源的一个好处是，即使来自不同项目的同事也能更轻松地做出贡献。环境很熟悉，无需额外的身份验证或 VPN，流程也很清晰。

我们还花了相当多的时间来利用许多不同的工具来改进我们的流程，以帮助我们更安全、更快地发布新版本。

Taiga UI 是一个 Monorepo，包含多个库和一个演示应用程序，我们使用 GitHub Pages 进行部署。现在它由NX 工具管理，这些工具提供了许多实用的命令，并提高了本地开发和 CI/CD 流水线的构建和测试速度。如果您打算使用 Monorepo，一定要尝试 NX！

每当创建拉取请求时，我们都需要能够快速检出更改。阅读代码差异固然很好，但有时你只需要修改新版本，在移动设备、不同的浏览器和操作系统上进行测试。云服务非常适合这种情况，它们允许你临时部署代码，并通过任何设备上的链接访问。我们选择Firebase来托管它，Github 操作会在拉取请求的评论中发布一个指向部署的链接。它非常有效，大大加快了代码审查速度。阅读本文，了解如何在你的代码库中进行设置！

此外，每个 PR 都会运行一组Cypress截图测试，这些测试会在演示门户上迭代，并将当前组件与主分支中的引用进行比较。Cypress 有一个商业解决方案，您可以通过仪表板轻松访问失败的截图。但我们创建了一个小型Github 机器人，它将失败的截图存储在一个临时分支中，并以评论的形式将其发布到 PR 中，并在每次推送时更新。这使得识别 UI 库的问题变得快速而简单。我们已将此机器人开源，您也可以使用它，请阅读这篇文章，详细了解它！

此外，还有一个强大的预提交钩子，它结合了ESlint和Prettier，可以在每次提交时使用lint-staged修复和格式化更改的代码，从而确保格式错误的代码不会被添加到拉取请求 (Pull Request) 中。结合标准版本和严格的提交信息，它使发布和生成变更日志变得轻而易举。对于贡献者来说，工作流程非常简单：

fork → npm ci → npm start → 代码 → 提交 → 推送

什么是新的？

2.0 版本发布时，它已经相当庞大了。但在 2021 年，我们添加并改进了许多功能。在社区的启发和帮助下，我们显著扩展了自定义和本地化功能。这对我们自己的国际项目也大有裨益。Taiga UI 目前已内置超过 10 种语言的文本，大多数组件都支持 RTL 格式，并提供多种货币和日期格式。我们还提供了“ng add”的示意图，帮助您顺利上手 Taiga UI。让我们来看看今年我们 150 多个组件库中最值得关注的新增功能！

新组件

Sheet — 移动端滑动对话框

树——一个灵活的组件，用于显示树状数据结构

PdfViewer — 用于在 iframe 中预览 PDF 的自定义对话框

轮播——图像滑块的常见 UI 模式

ArcChart——一种显示数值数据的新方法

新的附加包

表格——交互式表格组件及相关实用程序

编辑器——基于tiptap 2的富文本编辑器

预览— 自定义对话框，用于预览任意内容，例如图像和文档

我们还添加了许多有用的实用程序、令牌、服务和指令，例如 Pan、Swipe、DropdownHover 等，并为所有组件添加了夜间主题：

接下来会发生什么？

这是硕果累累的一年。我们在基础设施和内容方面取得了长足进步，并开始建立用户社区，尤其是在加密货币领域，这一点从用户提问的截图中可以看出来 🙂 在接下来的一年里，我们计划扩展本地化和国际化选项，以便全球各地的开发者都能享受 Taiga UI 的魅力，并将其应用于他们正在进行的任何项目中。以下是我们 2022 年计划重点关注的简要概述：

• 改进并稳定新的编辑器附加包
• 使所有本机输入都可以从 Taiga UI 控件外部访问，以便轻松分配属性和监听本机事件
• 重新设计我们的一些内部结构，使其更多地依赖 CSS，而不是 JavaScript，这将减少变更检测周期
• 更多地利用 DI 进行定制
• 放弃对全局样式的依赖
• 为 Taiga UI 组件创建 ComponentHarnesses，以便轻松测试它们
• 支持不同的通知实现方式，就像我们现在对对话框所做的那样
• 减少技术债务，例如等待重构的旧组件和过时的掩码库
• 使用 Angular 13 和 Ivy 发行版为下一个主要版本做好准备

希望您喜欢 Taiga UI，如果您还没有尝试过，不妨一试！欢迎在GitHub 上讨论，或通过Angular Discord联系我们。俄语用户可以使用Telegram 聊天。我们的问题列表接受功能请求和错误报告。如果您想贡献自己的力量，它也总有一些问题等着您尝试解决！祝大家圣诞快乐，新年快乐！🎄