语言 Chinese, Simplified

SEO Title

Laying the Frontend Foundations with a Platform Team

这篇文章是与 Razorpay 的前端核心团队合作的，该团队由 Varun、Kamlesh、Dhruvdutt、Chaitanya、Saurav、Zameer 组成。

去年，我们组建了前端核心团队，为构建与我们一样快的前端应用程序奠定了基础，这样开发人员就可以专注于更快地交付产品，而不会影响质量。

我们将走过这段旅程，了解为什么我们认为 Razorpay 应该存在这样一个团队，我们如何构建它，我们的使命、目标、原则、我们可以做得更好的事情以及我们下一步的发展方向。

为什么要组建前端核心团队？

多年来，随着新工具、框架、模式的出现和成熟，现代前端生态系统呈指数级增长。掌握现代前端堆栈对个人来说是一项巨大的努力。

Razorpay 的工程团队每年都在迅速扩大规模。在过去的两年里，仅我们的前端团队就增加了两倍多📈。

如果我们分解前端工程师的职责，就会做出各种各样的决定。

前端工程师的职责

Front of Frontend：涉及构建产品、功能、用户界面、UI组件、可访问性、微交互等。
前端数据：涉及构建和管理客户端数据存储、状态管理、数据转换、与数据源交互、API 等。
前端骨干：涉及设置用于构建和部署应用程序的工具。包括为各种环境配置构建设置：本地、暂存、生产、设置测试框架、代码检查和格式化设置、添加 TypeScript 支持、设置 CI/CD 管道、设置工作流和 PR 检查。

Brad Frost 在他的博客中很好地介绍了这些内容。

我们提升了整个组织的前端工程师正在处理的问题，并创建了团队来建立基础。当时的想法是，只需要 4 名工程师来考虑前端构建工具，而不是 100 人。只有 2 名工程师需要考虑工具提示组件，而不是 50 人。我们建立了一个由专业工程师组成的团队，他们将在这些领域工作并构建一个我们前端堆栈的基础。

缺乏基础设施标准化

设置构建和部署的冗余工作。个别项目所有者必须深入研究这些方面。

缺乏设计一致性

我们在设计/开发过程中遇到了冗余，例如具有相同意图但具有不同变化的组件（按钮、输入字段、颜色等）

复杂的发布管理

复杂的构建和部署过程依赖于构建 ID、提交哈希、shell 脚本和脆弱的 CI 配置。在没有 SLI/SLA 的情况下，缺乏用于可预测错误和性能监控的可观察性工具。

缺乏测试框架

缺乏基础测试，在设置测试方面付出了多余的努力，单元/集成测试的摩擦很大。

复杂的本地环境设置

建立项目的学习曲线很高，本地环境需要很长时间才能构建，这会减慢开发速度，缺少项目指南。

旧版工作流程

让我们看看我们在组建前端核心团队之前遵循的日常工作流程，以及让我们放慢速度的漏洞是什么。

我们有很多移动的部分，它们很脆弱，也有巨大的学习曲线。随着更多产品和团队的扩展，我们将重做相同的事情，失去在工具基础设施的帮助下自动化此工作流程中的许多部分的巨大潜力。

Lifecycle of frontend app in legacy workflow

涅槃工作流程

这是我们希望为 Razorpay 的所有产品实现的未来工作流程。我们相信这将显着提高我们产品的开发效率、开发人员体验、可扩展性和性能。

Lifecycle of frontend app in the nirnava workflow

我们的旅程到目前为止 - 奠定基础

在回顾了我们在跨产品的前端工程方面的低效率之后，我们展示了我们的愿景以及我们如何通过以下方式使产品更具弹性和效率：

创建有关可以在开发工作流程中填补的空白的详细文档。
展示当前的挑战和我们对领导层的愿景
为在当前工作流程中投入的时间和金钱以及我们可以优化的地方创建成本估算。

一些单独尝试解决类似挑战的内部工程师聚集在一起建立了前端核心团队。我们实现了我们的愿景，为团队制定了年度目标和 OKR，并开始了这一旅程。

我们主要在两个轨道上工作：

工具和核心基础设施
设计系统

工具和核心基础设施

由明确标准管理的工具、实用程序和配置的瑞士刀。它们可以组合在一起以构建或扩展到任意数量的产品。

在内部，我们将此项目命名为 Frontend Universe。

我们创建了一个包含多个包的 monorepo，每个包都有自己的边界和范围。

我们的工具链由各种包组成，所有这些包都可以作为单独的包单独使用，也可以通过通用 CLI 使用。