程序地带

立完flag,你可能需要对flag进行量化


DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师。
官方网站:devui.design
Ng组件库:ng-devui(欢迎Star)
官方交流:添加DevUI小助手(devui-official)
DevUIHelper插件:DevUIHelper-LSP(欢迎Star)


引言

当你的能力足够,并且获得领导的信任之后,很自然地就会去承担更大、更重要的责任,比如成为大中型业务的Owner。


大中型业务指的是该业务足够大,足够复杂,仅凭一己之力无法按要求交付版本,需要团队协作。


我们假设该业务一共12个人,其中角色分布如下(按产品研发流程排序):


角色
职责
成员数
产品经理
对接用户,是需求的来源
1
项目经理
管理项目进度,有节奏地进行版本交付
1
设计
负责UI交互和视觉,是用户体验的设计者
1
前端
前端用户界面和交互效果开发
3
后台
后台数据存储和接口开发
4
测试
负责版本质量
1
运维
负责现网部署
1

如果你被分到该业务,成为前端Owner,你可能需要做些什么,以高效率、高质量地实现版本交付呢?


1 明确目标和职责

首先要了解组织和领导对你的期望,假设组织希望你能够改善该业务的交付质量,赢得用户口碑。


目标非常明确,就是提升交付质量,这个目标将牵引你未来一年的方向和行为,也是你超预期完成目标的前提。


有了目标之后,我们还需要去衡量它,这样才知道有没有提升,尽量寻找可以量化的指标。


这一块可以参考我们以前的文章:《如何度量前端项目研发效率与质量》


2 交付质量的组成

质量代表的是好不好,问题越少就越好。


从产品侧来看,缺陷率和JS错误率都是非常不错的衡量指标。


从开发侧来看也有很多很好的衡量指标,比如:


重复率
圈复杂度
ESLint问题数
巨石文件/方法数
3 计算缺陷率

缺陷率=缺陷数/代码规模


缺陷也就是BUG,当我们开发完产品特性后,需要部署到测试环境,并提测,测试人员测试完,会提一堆BUG单,这些BUG的数量就是缺陷数。


代码规模可以用代码行数来表示,一般源码都放在工程根目录下的src目录中,可以使用cloc工具统计代码行数:


cloc src

如果要排除里面的某些目录,比如__tests__,可以加上--exclude-dir参数


cloc src --exclude-dir=__tests__

比如html2canvas库的代码行数:



有了缺陷数和代码规模,就可以计算缺陷率啦。


可以先统计下历史迭代的缺陷率,缺陷数可以通过查看测试报告获得,该版本增加的代码行数可以通过Git提交记录获得。


比如上一个迭代1.2.6,从2020.12.14-2020.12.25。


我们可以使用以下命令统计到新增的代码行数:


git log --after="2020-12-14 00:00:00" --before="2020-12-25 23:59:59" --pretty=tformat: --numstat | grep -v "static" | awk "{ add += $1 ; subs += $2 ; loc += $1 - $2 } END { printf "增加行数:%s 删除行数:%s 变化总行数:%s ",add,subs,loc }"

还是以html2canvas举栗子?



假设通过查看测试报告,这段时间一共出了3个BUG,那么缺陷率就是:


缺陷率=缺陷数/代码规模=3/130=2.3%


也就是上个迭代的缺陷率为2.3%,我们可以多计算几个迭代,然后算个平均数,这样我们就知道以前这个业务的缺陷率水平大致如何。


这样你作为业务Owner,后续通过一系列举措,最后降低了这个指标,假设降低到1.8%,那么可以认为质量提升了:


(2.3-1.8)/2.3=21.7%


4 监控JS错误率

第二个是JS错误率,就是监控现网用户访问页面时,是否有JS报错,如果有JS报错,很可能某些功能就可用。


我们没法在用户的现场,我们不知道用户使用我们产品的体验如何,他是否在使用过程中遇到了困难,这些我们没法直接知道。


但是JS报错给我们提供了一些了解这些信息的线索,假设某个时刻,现网出现了JS报错,我们或许就能复现这个报错,找到报错的原因,并在用户投诉之前及时修复这个缺陷。


可以说:


降低现网JS错误率就是在排除地雷,地雷越少,炸到的用户就越少,这对产品的用户口碑意义重大


这个指标需要通过前端监控平台采集,比如我们DevUI内部的Furion平台,它的计算公式如下:


JS错误率=JS错误数/PV


也是先看下以往的现网JS错误率水平,假设是6.2%,你通过努力将这个指标降到0.1%,那么质量提升就是98%。


5 统计重复率

除了产品层面的质量衡量指标,我们还可以设定一些开发侧的质量指标。


重复率就是一个很不错的指标,如果项目里面重复的代码太多


一来我们的维护成本提高,一处变更,要改很多地方;
二来容易漏该某些地方,从来导致BUG。

重复代码是万恶之源


我们可以用jscpd工具来统计前端代码的重复率:


jscpd src

以html2canvas为?



它一共有14处重复代码,重复率为1.71%(算比较低的),jscpd命令还会列出每一处重复所在的文件以及所在的行/列。


我们要做的就是照着重复率报告,一处一处改掉即可,当然修改重复代码也要考虑可读性,不能为了消除重复,降低了代码的可读性。


假设改完之后,重复率降到1.16%,那么质量提升了32%。


6 计算圈复杂度

圈复杂度可以参考下我们之前的文章:浅谈前端中的圈复杂度 ,这里就不赘述。


7 ESLint问题数清零

ESLint通过一些最佳实践的规范,来约束我们的代码,从而保障代码质量。


下图清晰地展示了ESLint的价值:



如果你不使用ESLint,你的代码只能靠人工来检查,格式乱七八糟,运行起来bug丛生,你的合作者或用户会怒气冲冲;
如果你使用了ESLint,你的代码有可靠的机器进行检查,格式规则,运行起来问题会少很多,大家都会很满意。

如果项目中的代码没有遵循ESLint规则,那么就会产生一条ESLint错误或者提示,将这些ESLint问题修复,在一定程度上是可以提升代码质量的。


假设ESLint问题清零了,那么质量提升就是100%。


8 统计巨石文件/方法数

大而复杂的事物,我们理解起来一般更费劲,简洁的事物往往易于理解。


代码也是一样,简单的代码,我们一眼就知道它是做什么的,这样修改它就不容易出错。


如果一个文件包含几千行代码,或者一个方法包含几百行代码,里面分支众多,嵌套又深,那么我们就很难读懂它,修改它的时候总不免战战兢兢、如履薄冰,还容易出bug。


统计所有文件的代码行数,并按代码行数从大到小排序,可以使用之前提到的cloc工具:


cloc src --by-file

还是以html2canvas为?(只截取了代码行数大于100行的文件)



一般一个文件的代码行数不要超过300行,超过300可能就需要进行适当的模块拆分,以增强代码的可读性和可维护性。


另外也要权衡下文件的嵌套深度,从根路径开始往下,一般不超过7层。


我目前没想到比较好的统计巨石方法的办法,只能去巨石文件里面找,找到超过50行的方法,我就会考虑重构。


大家有更好的办法欢迎推荐。


小结

我们做一个简单的小结,从产品侧来看,可以通过


缺陷率
JS错误率
来衡量质量。

从开发侧来看,可以通过


重复率
圈复杂度
ESLint问题数
巨石文件/方法
来衡量质量。

这些质量指标可以根据自己团队的特点和偏好,设定相应的权重,并最终计算出一个总的质量提升比率。


对目标进行量化之后,我们就可以撸起袖子开干了。


经过一段时间的努力,我们超预期完成了组织的目标,就可以拿着这些质量提升的量化指标去跟组织要年终奖和加薪啦!


加入我们

我们是DevUI团队,欢迎来这里和我们一起打造优雅高效的人机设计/研发体系。招聘邮箱:[email protected]


文/DevUI Kagol


往期文章推荐


《在瀑布下用火焰烤饼:三步法助你快速定位网站性能问题(超详细)》


《html2canvas实现浏览器截图的原理(包含源码分析的通用方法) 》


《大厂是如何用DevCloud流水线实现自动化部署Web应用的?》


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/kagol/p/14288560.html

随机推荐

spring sercurity的简单使用

(一)修改用户名密码简介SpringSecurity基于Spring框架,提供了一套Web应用安全性的完整解决方案。一般来说,Web应用的安全性...

小王同学.. 阅读(123)

c++listview表格线颜色_WPS表格插入制作折线图表教程

WPS表格插入制作折线图表教程WPS表格如果单纯只是数据表,会不直观,通过图表可以把数据进行直观化显示。而今天读书屋OFFICE网陈飞老师要讲的就是如何通过WPS表格制作图...

陈贵祥 阅读(462)

mysql 配置文件_mysql配置文件优化

1、innodb_buffer_pool_size(1)介绍InnoDB使用一个缓冲池来保存索引和原始数据,如下图所示:(2&#x...

weixin_39562554 阅读(633)

mysql 配置文件_MySQL - 默认配置文件

简述MySQL自带了一些默认配置参数,在没有配置文件的情况下就会使用这些配置参数。配置文件读取路径通过帮助可以看到配置文件的加载顺序/data/apps/mysql/bin/mysqld...

weixin_39574140 阅读(180)

mysql 排名_MySQL用变量实现排名

MySQL8.0版本用窗口函数就可以实现排名,有三种方式,对相同值的处理不同:row_number():不产生相同的记录,没有序号...

weixin_39764487 阅读(808)