前端目标
本部分定义了 GitLab 前端的 期望状态 以及我们未来几年的愿景。这是一份动态文档，将随着技术和团队的发展而不断调整。
技术
Vue@latest
保持与最新版本的 Vue 同步，确保 GitLab 前端能够利用最高效、最安全、功能最丰富的框架特性。最新的 Vue (3) 提供了更好的性能和更直观的 API，共同提升了开发者体验和应用程序性能。
当前状态
- 截至 2023 年 12 月：GitLab 目前使用 Vue 2.x。
- 进展：（进展的简要描述）
负责团队
- 工作组：Vue.js 3 迁移工作组
- 协调人：Sam Beckham，工程经理，Manage:Foundations
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
- 在 Monolith 中使用 @vue/compat
状态管理
当需要全局状态管理时，应该在 Apollo 中进行，而不是使用 Vuex 或其他状态管理库。有关我们计划迁移的原因和方法的更多详情，请参阅 从 Vuex 迁移。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
默认使用 HAML
在适当的情况下，我们将继续使用 HAML 而不是 Vue。有关如何决定何时选择 Vue，请参阅 何时添加 Vue 应用程序。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
完全移除 jQuery
2019 年我们承诺不再使用 jQuery，但我们尚未优先考虑完全移除。我们的目标是在主要的 GitLab 代码库中不再有任何对它的引用。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
依赖项管理
与保持使用 Vue 的最新主版本类似，我们应该尽量保持依赖项接近最新版本，除非不升级的好处大于升级的好处。至少，我们将每年审计一次依赖项，评估是否应该升级。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
最佳实践
可扩展性和性能
集群式单页应用
目前，GitLab 主要遵循 Rails 架构和 Rails 路由，这意味着每次更改路由时，我们都需要重新加载页面。这会导致加载时间变长，因为我们需要：
- 渲染 HAML 页面；
- 如果有 Vue 应用程序，则挂载它们；
- 为这些应用程序获取数据
理想情况下，我们应该减少用户需要经历这个长过程的次数。将 GitLab 转换为单页应用程序可以实现这一点，但这需要大量重构，并且不是短期内可实现的目标。
现实的目标是转向 多个单页应用 的体验，我们定义构成用户流程的 页面集群，并将这个集群从 Rails 路由转移到具有客户端路由的单页应用程序。这样，我们只需从 HAML 加载一次所有相关上下文，并根据路由从 API 获取所有额外数据。集群的例子可以是以下页面：
- Issues 页面
- Issue boards 页面
- Issue details 页面
- New issue 页面
- 编辑 issue
它们都具有相同的上下文（项目路径、当前用户等），我们可以使用 issue 特定参数（issue iid）轻松获取更多数据，并将结果存储在客户端（这样打开同一个 issue 就不需要更多的 API 调用）。这为浏览 issue 提供了流畅的用户体验。
对于集群之间的导航，我们仍然可以依赖 Rails 路由。这些情况应该比集群内的导航相对少见。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
可复用组件
目前，我们将通用可复用组件主要保存在两个地方：
- GitLab UI
vue_shared文件夹
虽然 GitLab UI 有良好的文档记录，并且组件足够抽象，可以在 Vue 应用程序的任何地方复用，但我们的 vue_shared 组件有些混乱，通常只能在特定上下文中使用（例如，它们可以绑定到现有的 Vuex 存储），并且存在重复（我们有多个用于 notes 的组件）。
我们应该对 vue_shared 进行审计，找出哪些可以移动到 GitLab UI，哪些不能，并重构现有组件以消除重复并提高可复用性。理想的结果是将应用程序特定的组件移动到应用程序文件夹，并在共享文件夹/库中保留可复用的"智能"组件，确保每个可复用功能都只有 一种实现。
这目前正在开发中。关注 GitLab 前端模块化单体架构 以获取我们如何在 vue_shared 等顶级文件夹上强制封装的更新。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
迁移到 PostCSS
SASS 编译几乎占前端总编译时间的一半。这使我们的管道运行时间比应有的更长。迁移到 PostCSS 应该能 显著改善编译时间。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
协作和工具
视觉测试
我们正处于添加视觉测试的早期阶段，但应该建立一个框架。一旦确定实现方案，我们将更新此文档以包含具体细节。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 任务组：
- 协调人：
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）
可访问性测试
2023 年，我们确定了可访问性测试的工具。我们选择了在功能测试中使用的 axe-core gem，用于测试整个视图，而不是孤立地测试组件。请参阅自动化可访问性测试文档 了解何时以及如何包含它。您可以通过 可访问性扫描器 查看我们的进展，该扫描器使用 Semgrep 来检测是否存在测试。
当前状态
- 截至 2023 年 12 月：（状态）
- 进展：（进展的简要描述）
负责团队
- 工作组：产品可访问性工作组
- 协调人：Paulina Sędłak-Jakubowska
里程碑和时间线
-（关键里程碑，预计完成时间）
挑战和依赖项
-（任何主要挑战）
成功指标
-（潜在指标）