作者 | Adrien Joly
译者 | 张卫滨
策划 | 丁晓昀
有时候,JavaScript(甚至带有类型检查的 TypeScript)会因为其不可预测的特性和缺乏约定而遭到批评。对于那些知道 JavaScript 是为 web 浏览器设计的脚本语言的人来说,这就不足为奇了。
但是,现在它已经成为开发全栈 web 的首选语言,也是跨平台移动应用的热门方案。那么,当开发人员的 JavaScript/TypeScript 代码库开始老化,由此带来的复杂性痛苦地增长时,他们该采取什么行动才能最大限度地减少资源浪费并保持工作满意度呢?
本文将基于我 10 多年来编写 JavaScript 代码的经验和 5 年多拯救 JS/TS 项目的经历,向读者介绍如下内容:
1 清理工作台
在开发下一个特性时,每个警告、类型错误或非正常的测试都会让开发人员浪费时间、精力和专注度。
代码警告尤其令人讨厌,因为开发人员会习惯性地忽略它们,“只要一切按预期运行就好”。因此,它们会迅速累积,当我们遇到缺陷、事故或系统的意外行为时,就很难将其作为有用的线索。
类型错误就是一个很好的样例。当我们的用户遵循“快乐路径(happy path)”时,这些错误似乎无关紧要,因为软件似乎能够按照预期运行。所以,我们可能会使用@ts-ignore
、any
或类型断言来暂时忽略它们。但是,这样做的话,就意味着如果有一天用户选择不同的路径,就会面临运行时错误。
这样的话,开发人员就需要调查、重现和修复一个新的缺陷,而这个缺陷恰恰是他们几个月前允许走捷径所造成的。如果你的代码被各种警告和 / 或暂时忽略这些警告削弱了质量,那么找到这个捷径将耗费大量的时间。
当生产环境的数据库因“内存不足”错误而崩溃时,该警告可能会帮助开发人员找到崩溃的原因
警告和类型错误 是查找缺陷和事故的线索。我们累积(或忽略)的警告和错误越多,开发人员就会花费越多的时间去调查。如果代码是他们很久以前编写的,那情况就会更糟糕了。
我们能做些什么呢?
any
或类型断言),请添加注释以记录忽略该规则的原因。类型检查器认为缺少一个预期的属性。忽略这个错误将意味着要承担持久化不一致数据的风险,在几个月之后,你可能需要花费几天的时间来调查和解决这个问题
我们可以使用哪些工具来实现这一目标呢?
有许多静态代码分析工具可供使用,最常用的包括:
.ts
文件或 JSDoc 注解 以探测类型错误;警告也可能来自其他工具:依赖安装器(如npm
和yarn
)、打包器(如webpack
)、代码处理器(babel
、scss
)和执行环境(CI 运行器)。不要忽视它们!
如果遵循这些建议会让你的代码变得非常冗长和 / 或复杂(比如防御式代码),你可以需要对其进行重新设计。
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"lint:errors": "eslint . --quiet",
"lint:typescript": "tsc --noEmit --skipLibCheck",
"lint:jsdoc-typing": "tsc --noEmit --allowJs `find ./ -name '*.js' -name '*.d.ts'`"
},
借助静态代码分析器和 npm 脚本,能够让开发人员轻松快速地探测有问题的代码
后续该怎么办?
安装和配置静态代码分析工具是一个良好的开端,但这还不够。
要想取得持续的成功,要确保开发团队做到如下几点:
如下几种策略可能会提供帮助:
为何要把每个角色都交给一个专门的人?
当某项职责没有人负责时,集体责任往往会被其他“优先事项”所取代(比如,本周多交付一个特性,但是代价是忽略一个警告)。
定期轮换角色,确保每个人都能参与其中并保持积极性。
2 使用(恰当类型的)测试覆盖关键的业务逻辑
现在,我们有了一支致力于保持代码库整洁的团队,我们相信用户很少会遇到编程错误。
但是,业务逻辑中的错误该怎么办呢?
例如,如果一个新添加的功能破坏了另一个功能该怎么办?如果开发人员从一开始就误解了该功能的预期行为,又该怎么办?如果这样的错误最终导致了严重的收入损失又该如何处理?
与编程错误类似,业务逻辑问题可能会在生产环境由用户发现,但我们更希望尽早发现它们。因此,定期测试软件非常重要,这个过程可以使用自动化和 / 或手动测试。
从业务角度看,测试有两个作用:
确保功能性测试(也称为“验收测试”)涵盖大多数关键业务特性,单元测试或集成测试涵盖大多数关键技术组件。此外,确保持续集成在任何测试失败时都能向开发人员提供可执行的反馈。
对于有些开发人员来说,将测试工作委托给其他人(如产品负责人或 QA 团队)是很有诱惑力的做法。在每个新特性完成后,进行一次这样的委托测试,以确保特性实现符合功能性需求,并进行协作迭代,这样做可能是合理的。
但是,委托他人进行回归检测并不是一个好主意,原因包括:
回归测试是一项痛苦且可能代价高昂的负担,尤其是需要不同角色(如产品负责人和开发人员)必须协作的情况下。从长远来看,回归测试自动化意味着可以节省大量的时间,而且开发人员具有编写自动化测试的技能,所以,开发人员首先要承担起检测回归的责任,而不必让其他角色参与进来,这符合他们的利益。
如果要涵盖的功能范围很大该怎么办?
从最关键的业务特性开始。要找出这些特性,你可以问自己:“就收益和 / 或减少成本而言,在生产环境中可能发生的最糟糕的事情是什么?”
例如,电子商务网站的回答可能是如下的特性:
基于这些业务关键的用例,从它们开始编写端到端的自动化测试肯定就是非常有意义的。
何时运行测试?
在每次代码更新或添加到代码库之时,在将其部署到生产环境之前。
借助git
hook,在每次提交时运行测试可能就足够了,因为它能可靠地运行,而且其持续时间不会导致开发人员编写更少的测试。
不管是否使用git
hook,都要确保每次推送可用于生产环境的代码时,测试能在某处运行(例如,最好是在持续集成环境中)。
在持续集成环境中,每次提交都会运行代码检查和自动化测试。
我们应该编写什么样的测试?
需要优化的变量包括:
如果你的团队在编写自动化测试和 / 或可测试代码方面经验不足,那么可以从一些端到端测试开始。然后,逐步增加对范围更小的代码单元的测试。这样做可以激励开发人员编写易于测试的代码。例如,通过隔离责任、减少耦合和 / 或将业务逻辑写成纯函数。遵循依赖注入架构是实现这一目标的好方法。(参见 六边形架构 或 简洁架构)
我们是否应该 Mock 第三方 API?
自动化测试(如本文所述)的目的是探测团队的功能性范围内的回归,而不是第三方的功能。基于这一点,在测试中 Mock 第三方是合理的。
也就是说:
探测自己的代码中的问题和第三方 API 中的问题并不遵循相同的生命周期:
你需要持续监控第三方提供商是否能够正常运行并达到预期效果。但是,第三方错误不一定能够在发生之时就探测到,因此最好是定期监控,而不是在开发人员每次推送代码变更的时候进行监控。
所以,需要搭建两个专门的流水线:
为了编写长期最有用、最健壮的测试,我建议遵循 F.I.R.S.T. 原则。确保开发人员不会 滥用 mock。
3 细致保护代码库中新的 / 现代化的部分
假设你的代码库已经或者将要开发数年的时间,那么随着时间的推移,它很可能会在代码风格和质量方面失去内聚力。更糟糕的是,由于技术债务、缺乏测试或意外复杂性的积累,某些组成部分的维护可能会变得很复杂。
在这种情况下,要像上文所建议的那样,在整个代码库中对代码实现一致的内聚预期可能会变得很复杂。不过,这也没有关系。
你不希望看到的是期望值降低到一个最低的平均水准。这样的话,你可以把代码划分为不同的范围,并为每个范围设置不同的期望水平。
例如,考虑一个即将为电子商务网站实现新特性的团队。他们希望这个新特性能够比代码库中的其他特性更健壮、更易于维护。为了实现这一点,他们在配置静态代码分析工具(如 ESLint 和 TypeScript)时采用比代码库的其他部分更严格的规则,并针对专门为该特性而创建的目录使用覆盖的方式启用更多的规则。通过这种方式,团队可以提高新代码的质量,而不必急于对代码库中“遗留”的部分进行现代化处理。
"rules": {
"prettier/prettier": "error",
"deprecation/deprecation": "warn"
},
"overrides": [
{
// Tolerate warnings on non critical issues from legacy JavaScript files
"files": ["*.js"],
"rules": {
"prefer-const": "warn",
"no-inner-declarations": ["warn", "functions"],
"@typescript-eslint/ban-ts-comment": "warn",
"@typescript-eslint/no-var-requires": "off"
}
},
{
// Enforce stricter rules on domain / business logic
"files": ["app/domain/**/*.js", "app/domain/**/*.ts"],
"extends": ["async", "async/node", "async/typescript"],
"rules": {
"prefer-const": "error",
"no-async-promise-executor": "error",
"no-await-in-loop": "error",
"no-promise-executor-return": "error",
"max-nested-callbacks": "error",
"no-return-await": "error",
"prefer-promise-reject-errors": "error",
"node/handle-callback-err": "error",
"node/no-callback-literal": "error",
"node/no-sync": "error",
"@typescript-eslint/await-thenable": "error",
"@typescript-eslint/no-floating-promises": "error",
"@typescript-eslint/no-misused-promises": "error",
"@typescript-eslint/promise-function-async": "error"
}
}
]
通过配置覆盖,我们可以为不同的部分设置不同的 ESLint 规则
与之类似,如果要对整个代码库进行现代化改造,也要循序渐进。你可以创建一个具有更严格规则的专用目录,并逐渐将遗留代码迁移至该目录,同时修复代码的警告和类型错误。
从何处开始?
有种方式是逐步将功能范围中陈旧的部分迁移到更好的设计中。例如,选择一个难以编写自动化测试的特性,并将它的实现迁移到六边形架构中,将业务 / 领域逻辑根据输入命令(即“API”)和副作用(即“SPI”)分离开来。通过编写自动化测试来指导迁移,并将新的实现放在具有更严格静态代码分析规则的专用目录中。
import { makeFeatures } = from './domain/features';
import { userCollection } from './infrastructure/mongodb/UserCollection';
import { ImageStorage } from './infrastructure/ImageStorage.js';
/** @type {import('./domain/api/Features').Features} Features*/
const features = makeFeatures({
userRepository: userCollection,
imageRepository: new ImageStorage(),
});
routes.post('/avatar', (request, response) => {
features
.setAvatar(request.session.userId, request.files[0])
.then(
() => response.json({ ok: true },
(error) => response.json({ ok: false })
);
});
setAvatar
特性经过了重新设计,由于采用了依赖反转,使其易于单独进行测试。下面是我们迁移另一项特性的过程,即
播放列表删除
如果你决定遵循这一路径,如下是一些建议:
在迁移完每个限界上下文之后,你将会得到一个代码库,在代码库中 100% 的代码都应按照更严格的规则进行检查。
4 每日部署,但同样的错误不要犯两次
尽管使用了静态分析工具来检测缺陷,使用了自动化测试来探测回归,但用户还是会在生产环境中发现问题。这是无法避免的。但是,有一种方法可以降低出现此类问题的概率,并缩短团队修复问题的时间:
为何要每日部署?
简约版答案:因为 DORA 研究项目发现,大多数执行团队每天都在进行部署,或者每天部署多次。
详尽版答案:
如何确保相同的错误不犯两次?
在生产环境中出现意料之外的行为是可以的。在有些情况下,这甚至是一件好事。
当意料之外的行为给企业和 / 或开发团队带来巨大损失时(例如,网站中断,导致几个小时无法使用),开发人员应该采取措施防止类似的事件再次发生。
如何探测生产环境中的问题?
有多种方式可以探测生产环境中的问题:
无论是哪种情况,开发人员都需要以下信息:问题是什么、问题的具体表现(如错误信息)、如何重现问题(如环境 + 过程),以及用户的初衷和期望是什么。
但是,如何在最糟糕的情况下获得这些数据呢?这就是错误监控工具(如 Sentry)的用武之地了。通过将它们注入到生产环境中运行的产品中,它们就能像探针一样检测运行时错误,并将它们汇总到已知错误的列表中,直到每个错误都被开发人员修复为止。此外,它们还会获取有关错误上下文的数据(如用户代理、所使用软件的版本、操作系统、确切的时间戳等),以帮助开发人员重现错误。
但令人遗憾的是,与静态代码分析器类似,这些工具并不能解决问题。因此,与警告和类型错误一样,要确保尽快处理每个错误。团队让错误累积得越多,使用这些工具的动力和效率就会越低。
此外,在使用这类监控工具时,请确保个人和 / 或机密数据不会从系统中泄露出去。
从战术上讲,有许多方法可供选择。你可以让一名开发人员负责修复生产环境的错误,并将其作为最优先的事项。这个角色可以定期轮换(比如每天),这样可以激励每个人都编写更健壮的代码。或者,也可以在每天的会议上将新错误单独分派给志愿开发人员。
如何降低复发风险?
不必慌张!当生产环境中发生事故时,都要遵守如下程序:
避免重蹈覆辙的关键在于上述程序的最后一步。
这也是经常被忽视的过程。大多数情况下,是因为没人觉得自己有责任这样做。很多时候,是因为产品负责人(或产品团队)向开发人员施压,要求他们优先完成开发计划中的特性,而不是保护现有代码和 / 或调整开发流程。有时,开发人员自己也会决定开发更多的特性,而不是避免再次犯错。
调查事故根本原因时的注意事项
如何查找事故的根本原因?
在这个方面,“5 个为什么(5 WHY)”技巧是很有用的。例如:
在本例中,根本原因是整个网站都依赖于遗留的会话管理后端,这使得导航难以预测,有时还会导致生产环境崩溃。因此,除非团队修复传统的会话管理后端,否则类似的崩溃很可能很快就会在生产环境中再次发生。团队现在应该修复遗留的会话管理后端吗?也许不用。但是他们应该努力制定一个能够实现该目标的补救计划。
在实践中,如何实现低故障率的日常部署呢?
让一位开发人员负责确保尽快发现生产中的意外行为(如运行时错误、缺陷、事故……),尽快修复,并采取措施防止今后再次发生各类问题。
通过这种方式,开发人员能够感受到有能力在良好的条件下开展工作。例如,在生产过程中设置恰当的监控和日志,确保撰写有用的事后报告,并采取预防措施。
当信心达到良好水平时,逐步增加部署频率。
5 以正确的激励机制调整产品开发团队
此时,开发人员就具备了编写高质量软件,并尽快发现缺陷的能力。这些缺陷最好是在设计或实现时发现,而不是在生产环境中。他们能够快速发现并修正生产环境的错误,不会重复犯同样的错误。他们对自己的代码和开发流程充满信心,因此每天都能在生产中实现改善。而且,他们在对软件功能化范围进行预期改善的同时,也会逐步改善代码库中最古老部分的设计和质量,使其保持健康、稳健并易于长期维护。
但是,令人遗憾的是,这种平衡很快就可能被瓦解。举例来说:
防止或解决这类情况可能会非常困难,因为这需要良好的领导力和 / 或软技能。
一个常见的错误是培养某种思维定式,即开发人员应该主要致力于实现优先的、计划好的和设计好的特性。
这样做是有问题的,因为:
下面是一些关于如何避免上述陷阱的建议:
6 结论
JavaScript 语言及其不断变化的软件包和实践组成的生态系统会使代码库迅速变得难以维护。正如我们在本文所讨论的那样,无需从头重写所有的内容,也无需暂停新特性的开发,就可以避免由此造成的开发速度和 / 或代码质量的下降。
关于如何在 TypeScript 和 JavaScript 项目中应用这些推荐做法的更多实用建议,我建议你参考 Yoni Goldberg 的最佳实践列表。它们是为 Node.js(后端)项目编写的,但其中很多也适用于前端代码库。
参考链接:
https://www.infoq.com/articles/javascript-typescript-quality-velocity/
https://github.com/goldbergyoni/nodebestpractices
相关阅读:
TypeScript 与 JavaScript:你应该知道的区别 (https://xie.infoq.cn/article/6ff79700fb3bfa972c1beebf3)
“TypeScript 不值得!”前端框架 Svelte 作者宣布重构代码,反向迁移到 JavaScript 引争议](https://www.infoq.cn/article/dDXbcLHT7teNYSPL3sm7)
Typescript- 类型检测和变量的定义 (https://xie.infoq.cn/article/b7f556a866805cf5c71be7af8)
我踩过了 TypeScript 的坑,只想告诉你快来 (https://www.infoq.cn/article/ds994KySqo868U3e8s4N)
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有