专栏名称: 前端之巅
InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。
目录
相关文章推荐
前端之巅  ·  Vue.js:极速选手还是高风险赌徒? ·  3 天前  
前端早读课  ·  【早阅】如何使用Vike和Vite构建可扩展 ... ·  2 天前  
前端早读课  ·  【早阅】了解Astro 4.10中的环境变量和容器 ·  4 天前  
前端大全  ·  前端代码规范- Commit 提交规范 ·  4 天前  
前端早读课  ·  【早阅】会话令牌和JWT结合的优势 ·  5 天前  
51好读  ›  专栏  ›  前端之巅

Vue.js:极速选手还是高风险赌徒?

前端之巅  · 公众号  · 前端  · 2024-09-19 15:00

正文

作者 | Rajni Rethesh
译者 | 王强
策划 | Tina
 引言

在本文中,我们来欣赏一下 Vue.js Core 存储库——这是目前最受欢迎的用户界面构建框架之一(https://github.com/vuejs/)。它简洁、快速,深受开发人员的喜爱,而在这样顺滑的体验背后有一个强大的引擎处理各种事务——那就是 Vue.js Core 存储库。

这篇案例研究深入探讨了他们开发过程的点点滴滴,特别是他们的团队如何设法实现极快的合并速度。现在软件的部署速度就像短跑运动员跑到最后一圈一样不断加快,而本文中的见解可以帮助其他项目达到类似的速度。

下面就来逐步分析吧——先看数字,再找乐趣!

Vue 存储库的神秘案例:中间件

我们的调查一开始很简单,我们像大家一样平常地浏览存储库的代码,这时 Vue.js Core 库的某些东西阻止了我们前进。它们的合并太顺利了——就像钟表一样,时间安排完美,执行精确。感觉就像我们偶然发现了一个隐藏在众目睽睽之下的秘密公式。自然而然,我们的中间件侦探本能觉醒了。是什么造就了这个近乎完美的过程?这个故事是否还有更多不为人知的秘密?

为了破案,我们拿出了重型工具——中间件 OSS(https://github.com/middlewarehq/middleware)——来深入挖掘 Dora Metrics 数据。当我们开始分析 Vue 指标时,不禁兴奋不已。

我们发现了什么?

快速合并:Vue 的超能力

Vue.js Core 团队在合并拉取请求时非常注重速度——他们就像 F1 赛车手跑到了代码合并界一样,以令人难以置信的敏捷性飞驰而过。看看这些令人瞠目结舌的数字:

  • 2024 年 6 月:每次合并只需 3.6 小时。他们开局不错!

  • 2024 年 7 月:令人震惊的 1.1 小时。是的,你没看错——这简直就是 F1 进站!

  • 2024 年 8 月:很不错的 16.9 小时。依旧很快,但更像是在赛道上小心翼翼地跑一圈,远低于平均水平。

那么,他们是怎样让这个速度一直维持在这么高的水平呢?以下是内幕消息:

  • 未经审查就合并的 PR 数量很多:在最近的 99 个 PR 中,有 88 个未经正式审查就合并了。这就像在 VIP 俱乐部跳过排队,大大减少了等待时间。例如 PR #11223 和 PR #11036。

  • 高效的审阅者:对于确实需要审查的 PR,团队会迅速采取行动。可以想象他们是 F1 维修站的技师,能以创纪录的速度更换轮胎。

  • 自动化流程:像 Renovate[bot] 这样的机器人处理依赖项更新和维护任务。它们是无名英雄,在团队专注于高速合并时负责处理手动合并的工作量。

简而言之,Vue.js Core 的合并过程就像观看 F1 大赛一样,迅速、高效,有时还令人兴奋!

改进领域:不稳定的交付周期

尽管 Vue.js Core 团队擅长以闪电般的速度合并拉取请求,但他们对变更的交付周期却像坐过山车一样跌宕起伏:

  • 6 月 24 日:13.4 小时——一切进展顺利。

  • 7 月 24 日:大幅放缓至 17 天——想象一下在新年前夕的高峰时段,在高速公路上遇到交通堵塞。

  • 8 月 24 日:进一步放慢至 24 天——就像被困在银行的无尽队列中。

这些剧烈波动暗示着在代码进入合并阶段之前存在一些隐蔽的瓶颈。以下是可能导致动荡的原因:

  • 首次响应时间延长了:在 7 月和 8 月,获得首次响应的时间就像等待缓慢移动的电梯一样——平均需要近 2.5 天加 1.1 小时。很明显,获得反馈的速度并不快。

  • 返工时间:8 月份返工时间激增,平均为 56 分钟。代码似乎需要额外停顿几次才能进行微调,然后才能合并。

因此,虽然 Vue.js 团队可以轻松完成合并,但显然有一些幕后故事影响了整个流程中变更的完成速度。

工作性质:并非所有 PR 都是平等的

Vue 团队需要处理一系列任务——就像厨师熟练地平衡不同的配料以制作出完美的菜肴。以下是他们管理厨房的方式:

  • 依赖项更新:Renovate[bot] 是这里的关键,它在幕后处理大量常规任务。就像一个在你忙得不可开交时送咖啡的朋友一样,Renovate[bot] 会自动管理依赖项更新,让事情顺利推进下去。看看 PR #11317 和 PR #11243 就知道了——两者都得到了轻松处理。

  • 错误修复和性能改进:这些 PR 就像代码的春季大扫除一样,旨在清除旧错误并调整性能。开发人员会深入代码库以消除错误,并使一切运行得更顺畅。查看 PR #11403 和 PR#11360,了解一些消除错误和提高性能的可靠示例。

  • 文档和测试:不要忘记基本要素!保持文档和测试处于最新状态是所有优质存储库的支柱工作。这种持续的努力可确保开发人员和用户都能随时了解最新情况。PR #11105 和 PR #11483 完美展示了文档和测试更新如何帮助维护项目的长期健康。

  • 返工:存储库的返工时间仅为 4.58 小时,短到令人印象深刻。想象一下,因为忘了带鸡蛋而不得不再次去杂货店——这种事情很烦人,但如果你能将时间缩短到最低限度,这就几乎不是什么问题了。他们致力于于干净、结构良好的代码和高效的审查,所以可以避免过多的来回往复,让项目保持正轨,而不会出现不必要的延误。

所有这些例子都表明一种平衡的 PR 方法可以确保代码库保持最佳状态,从小的错误修复到大的性能提升都会受益。

DORA 得分:8/10

在使用我们的 DORA Metrics 工具包仔细分析 Vue Core 后,我们得到了以下独家结果:Vue 得分高达 8/10。这里的重点是快速合并和频繁部署,这会让任何开发团队都羡慕不已。但是,就像其他编码英雄一样,Vue 也有自己的弱点——交付周期波动和返工时间会在你最意想不到的时候突然出现。

我们的分析中最大的收获是什么?Vue 的流程效率和自动化都恰到好处,但消除这些一致性问题能让他们的 DORA 得分飙升。与谷歌的年度 DORA 报告相比,Vue 的表现是一流水平。希望你的项目也能达到同样的效率水平吗?Middleware 的 OSS 是你追求完美分数的首选伙伴!

Vue 的经验参考

Vue Core 的策略值得复制。以下是你的代码库可以学到的东西:

  • 简化审核:对于较小或低风险的更改,可以考虑跳过审核以节省时间——就像 Vue 对其 88% 的 PR 所做的那样。

  • 鼓励快速的审核者回复:Vue 的快速合并是因为审核者不会在工作中打瞌睡。及时审核文化可以创造奇迹。

  • 自动化日常工作:使用机器人处理日常任务,让开发人员腾出时间进行更重要的工作。像 Renovate[bot] 这样的机器人使 Vue 的依赖项更新任务几乎从待办事项列表中消失了。

原文链接

https://middlewarehq.com/blog/vuejs-case-study-dora-metrics-speed-demon-or-just-high-risk-gambler

声明:本文为 InfoQ 翻译,未经许可禁止转载。

 会议推荐

AI 应用开发、大模型基础设施与算力优化、出海合规与大模型安全、云原生工程、演进式架构、线上可靠性、新技术浪潮下的大前端…… 不得不说,QCon 还是太全面了。现在报名可以享受 9 折优惠,详情请联系票务经理  17310043226 咨询。