重新设计 Jenkins（第一部分）

在现代化 Jenkins 前端时，我们的首要任务是保持向后兼容性，维护平台稳定性，并确保 UI 或框架的更改不会导致生产流水线中断。鉴于 Jenkins 在全球企业中为任务关键型 CI/CD 工作流程提供支持的作用，即使是小的回归也可能产生深远的影响。

为了实现这一目标，我们的方法是务实的、谨慎的、高度渐进的。我们没有引入颠覆性的改动，而是选择在数年内逐步现代化代码库，确保每一次更改都经过充分的测试和真实用例的验证。

所有增强功能都经过全面的自动化测试，包括与 Jenkins 庞大的插件生态系统的兼容性检查。此外，我们的每周发布周期能够提前了解更改，并在更改被广泛采用之前收集大量用户的反馈。

在能够应对更大的挑战之前，我们需要从基础做起。这项工作的一个重要部分是现代化 Jenkins 前端的基础——移除过时的技术，清理遗留代码，并为更灵活、更易于维护、更面向未来的平台打下基础。

Jenkins 前端现代化中的第一个重要里程碑是移除 Prototype.js，这是一个遗留的 JavaScript 框架，长期以来一直限制着现代 JavaScript 语法和实践的应用。Prototype.js 已与 Jenkins UI 的核心组件深度交织，成为阻碍进展和现代化的技术障碍。正如 Basil 的博客文章中所述，它的移除标志着一个主要阻碍的终结，并解锁了实施长久以来期待的更新和改进的能力。这一改变不仅提高了代码的可读性和可维护性，还使 Jenkins 前端能够拥抱更现代的 JavaScript 标准，营造一个更清洁、更健壮的开发环境。

影响最大的变化之一是移除 Yahoo 用户界面 (YUI)，这是一个遗留的 JavaScript 库，它“深深地”嵌入了 Jenkins UI 及其插件的各个区域。YUI 的存在极大地复杂化了前端架构和资产管理。移除它是一项艰巨的任务，但它极大地简化了资产树，并减少了代码库中的技术债务。截至 Jenkins 2.492.1，YUI 已默认禁用。这项工作最终导致了代码库的大规模清理，移除了超过85,000 行代码，极大地简化了平台，并为更现代、更易于维护的开发实践铺平了道路。

现代化 Jenkins 前端的另一个重要步骤是将样式架构从 LESS 迁移到 SCSS，这是一个微小但有意义的改进。SCSS 提供了更好的语言特性、更强的社区支持以及与现代工具更好的兼容性。我们还正在将遗留的 CSS 模块化为离散的、易于维护的样式模块，从而更容易强制执行一致性、隔离关注点并提高可重用性。

我们还进行了一项更广泛的计划，以标准化 Jenkins 代码库中现代 JavaScript 的使用，拥抱 ES6+ 语法、模块化架构和改进的浏览器原生 API 使用。这一转变在提高代码可读性、可维护性和性能方面起到了关键作用。遗留的内联脚本和全局作用域函数正逐渐被结构良好、可重用的 JavaScript 模块所取代，使前端架构与现代开发实践保持一致。

我们特意避免引入新的复杂框架和重量级依赖。如今，现代 JavaScript——纯粹的原生 JS——已经足够强大。通过现代 JavaScript，我们可以编写富有表现力、易于维护的代码，而无需任何额外的开销。

这并不意味着我们害怕现代工具——只是我们有选择性。目标是降低贡献者的入门门槛，而不是提高它。Jenkins 有成百上千的人在全球各地以各种方式做出贡献——我们不希望我们的前端栈成为一个守门员。

这些改变中的每一个都有助于降低复杂性、提高可维护性，并为更宏大的 UI 改进铺平道路。从外部来看，其中一些改变可能显得微不足道，但总的来说，它们为 Jenkins 打下了新的基础。这是未来 UX 改进的基础——例如更简洁的插件集成、更好的可访问性、更优的导航以及现代 UI 组件。

在第二部分，我们将深入探讨一些新 UI 功能的设计决策，我们如何改进开发者体验，以及我们为确保插件生态系统的兼容性而不减慢进展所做的努力。

如果您想参与Jenkins的UI和UX讨论，请加入用户体验SIG。

通过Design Library利用您的插件中的新组件和模式。

您可以在 YouTube 上观看我们的月度会议，并可以在 GitHub 上查看正在进行的工作。