前端开发人员已精疲力竭

Web 开发持续飞速发展。静态网站凭借现代化的 UI 模式、快速的工具和智能的默认设置，发展成为功能丰富的 Web 应用。理论上，构建应该更容易。但实际上，快速的变化速度带来了无形的阻力，减慢了交付速度，并悄悄地加剧了人们的倦怠。

早期的前端工作感觉简单透明：内置 Web API、少量 JavaScript，或许还有 jQuery。无需编译步骤。部署过程简单直接。现代框架使大型应用成为可能并富有成效，但它们也包含层层决策、抽象和变更，这些可能会打乱进度并耗费精力。

本文探讨了为什么即使团队努力工作，交付工作仍然会变得更加困难，以及如何保持速度和精力。

现代前端开发者为何难以交付

在代码库、聊天和社区讨论中，我们发现了一个规律：许多项目完成了 60% 到 80% 之后就停滞了。兴趣并非唯一的罪魁祸首。多种因素叠加，导致首次发布时间越来越长：

• UI 期望值不断提升。用户通过精心设计的应用程序进行学习。匹配现代交互和可访问性需要实时投入，这延迟了首次发布。
• 架构变得更重。将文件拖到服务器上变成了微前端、持续集成 (CI)、持续交付 (CD) 和云。抽象有助于扩展，但它会减慢开发速度。
• 完美主义悄然兴起。团队不断完善“另一件事”，直到 MVP 窗口关闭。发布进度延误，动力也随之消退。
• 现代技术栈的隐性成本。频繁的框架变更、配置变更、样板重写以及脆弱的流水线消耗着时间和精力。

现代前端如何影响快速交付

框架宣传生产力，并以多种方式实现生产力。权衡利弊，却显得更加平和。这些是项目生命周期内不断累积的摩擦点。

快速变化的框架、库和工具

创新带来了更好的 DX 和功能，但也缩短了当今“正确方法”的保质期。去年推荐的工具今年可能会被取代，迫使团队在 v1 版本发布之前就进行迁移。

• React 最初是一个可以放入页面的极简客户端库。JSX 带来了构建步骤。随着时间的推移，推荐的构建工具和模式迅速发展。
• 多年来，Create React App 是一个常见的起点，后来社区转向了 Vite 和 Next.js 等全栈框架。
• 在 Hooks 规范化函数组件之前，React 类组件是标准配置。
• Angular 从 AngularJS 过渡到包含必需构建步骤的完整框架；Vue 和 Svelte 发布了包含迁移指南的重大版本。

框架复杂性

框架将最佳实践压缩成约定。这种能力伴随着需要学习的概念、需要权衡的选项以及需要拥有的生成代码。对于中小型项目来说，这种繁琐的仪式感可能超过其带来的好处。

团队有时花在完善框架代码上的时间比交付产品逻辑的时间还多，导致交付时间加倍，而对用户却没有明显的影响。

框架的局限性

抽象可以解决很多问题，但也设定了界限。当达到极限时，你需要调整产品以适应框架，而不是反过来。

• 使用其他功能。你可以在找到替代方案后再发布，但发现时间会拖延你的开发进度。
• 采用变通方案。你可以带着负债发布，然后希望框架稍后能补充缺失的部分。
• 接受硬性限制。如果核心设计选择阻碍了修复，团队有时会放弃功能或整个实现。

框架锁定

选择框架意味着模式、工具和默认值。逆势而行会增加配置开销和风险。之后切换通常意味着重写。

代码流失增加

代码流失会随着时间的推移跟踪代码的添加、删除和编辑。过多的流失可能预示着不稳定。现代技术栈通过样板代码变更、DX 重构和持续的依赖项更新来增加代码流失。

• 状态管理交换、上下文重构、路由改进。
• 性能测试：延迟加载、代码拆分、渲染优化。
• 配置流失：构建工具、linters、TypeScript、测试运行器、持续集成 (CI)。

脆弱的开发者体验

当你顺利上手时，DX 会非常出色。但当你遇到问题时，它就会令人沮丧。组件检查器、间接 DOM 访问以及工具方面的缺陷，会让简单的任务变得比实际难度更大。

• 本地实验感觉很容易；生产状态和性能工作可能会螺旋式上升。
• 框架开发者工具很有用，但会分散浏览器开发者工具的注意力。
• 直接的 DOM 工作通常会变成引用和生命周期协调。

设计、开发和部署中的决策疲劳

昨天：HTML、CSS、JS、辅助库和 FTP 部署。今天：架构模式、运行时选择、构建工具、托管模型、容器以及十几个“不错的”选项。

更多选项固然重要，但同时也会减慢团队的开发速度，并增加代价高昂的绕路风险。

90% 规则的真相

前 90% 的代码占据了开发时间的前 90%。剩余 10% 的代码则占据了开发时间的后 90%。

—— Tom Cargill，贝尔实验室

软件并非流水线。最后的 10% 隐藏着未知因素。现代技术栈可以通过添加用户永远无法察觉的迁移、配置更改和依赖关系工作，使最后的阶段更加漫长。

超越交付的影响

招聘。角色由框架标记，这缩小了流程并增加了不匹配度。

入职培训。课堂知识很少与生产代码库相匹配。上手时间增加。

职业流动性。对工具的深度很重要，但它会使切换技术栈的成本高昂。

可维护性。如果不进行精简和削减抽象，它们会增加负担。

产品生命周期。重写和客户流失会消耗路线图的时间。

用户满意度。隐形工作会延迟可见的改进。

避免使用现代技术栈倦怠的技巧

使用模板和代码生成器

从最小且维护良好的模板开始。依靠生成器创建遵循最佳实践的样板，以便交付功能，而不是搭建脚手架。

自动化运维和健康检查

使用持续集成 (CI) 运行测试、类型检查和打包。跟踪规模预算。让机器人自动提交依赖项 PR，以便您掌控进度。

选择合适的工具

选择最轻量且符合需求的工具。对于小部件而言，使用 Lit 的 Web 组件可能比微前端框架更简单。

学习框架内部原理

了解生命周期、渲染和数据流。您将能够更快地做出更明智的选择，并避免过度依赖代码。

负责任地使用生成式人工智能

人工智能助手可以加速迁移和重构。让人类参与审核，逐步实现变更，并保证质量。

结论

现代前端工具解锁了众多精彩的应用。但它也带来了一项“隐形税”：更多选择、更多客户流失和更多隐形工作。这项“税”会减慢交付速度，并拖累团队。

为了保证速度，我们可以从简单入手，自动化枯燥的部分，选择适合工作的工具，了解你的技术栈的实际运作方式，并谨慎使用人工智能。我们的目标并非放弃现代技术栈，而是将更多时间投入到产品价值上，而不是其他方面。