引言

在日常的前端项目中,我们经常需要对需求任务进行功能点Task分解,分解Task是为了更合理地进行开发资源分配,也是为了更准确地对项目进行评估和管理。然而如果分配不合理的话,便会带来许许多多的问题,导致开发及管理不畅,甚至会导致项目延期或失败。

分配不合理导致的问题

  • 不好进行任务分配
  • 不好对前端项目有个整体进度及风险把控
  • 开发不好对具体点的实现聚焦
  • 相关依赖遇到风险时,前端的开发也受到阻塞
  • 前端项目出现风险时,不好进行资源调配来解决风险

我们通常使用什么方式来进行Task分解的呢?作为一个项目的前端负责人,如何进行合理的Task分解并分配给相应的开发?作为业务开发人员,我们该如何安排每天的Task?当在项目中遇到问题时如何抛出问题?

如果没有一个合理且相对统一规范的Task分解,业务开发人员甚至不知道每天需要做什么,遇到问题也感觉无门,而且前端项目管理人员也不好对前端项目的整体进度及状态有个很好地把控,这便给项目带来了风险。

所以,我们需要尽早地建立起适合团队在项目开发中使用的前端Task分解参考,指导着前端团队在项目开发中进行合理且统一的Task分解,让前端项目开发过程更加流畅,让项目的风险降到最低。下面分享的是自己在前端团队中建立的Task分解的一些实践经验。

结构+表现+行为

所有前端项目开发,所有的界面都遵从着结构+表现+行为的三大组成原则。

结构指的是一个界面的整体骨架,从结构中,我们能看到这个界面的所有组件元素,如果是h5项目,那么标签便是界面的结构组成基本单位,如果是react项目,那么等组件便是界面的结构组成基本单位。

表现指的是界面结构的具体样式展现,加上表现,我们便能确定这个界面最终的静态呈现是什么样的,例如设置字体的大小颜色、设置按钮的样式、实现一个动效。

行为指的是这个界面功能动态实现,例如列表的数据请求并渲染、按钮点击事件地响应处理等。

如何合理分解Task?

合理分解目的

  • 有利于任务的分配,让不同的开发人员负责各自擅长的事,优化资源利用
  • 有利于前端项目的整体进度及风险把控
  • 让开发人员在开发的时候更聚焦,不会东做一点西做一点
  • 当遇到依赖不能及时提供时,可以暂时搁置,不影响其他Task的开发
  • 当前端项目出现风险时,协调资源,分担Task,解决项目风险

合理分解原则

不同团队在Task分解上可能存在差异,但应统一保持一些通用原则。

  • 以界面作为基本单位
  • 遵从结构+表现+行为的原则
  • 保持对前端开发中的其他依赖进行解耦

分解方式

前端Task分解参考图

具体的分解方式是为了让前端项目管理者及业务开发者在项目开发中对功能点分解达成一致。分解的粒度要保持适中,不能过粗也不能过细。如果太粗的话,在项目开始前,不利于项目的任务分配,在开发中,不利于观察项目的进度和状态。如果太细的话,则会增大项目管理者及业务开发者对Task的管理成本,反而会影响到具体的开发任务。

按照前端的特性,我是按照一个界面(由结构+表现+行为组成个体)为基本单位来进行Task划分。

1、对一个界面来说,先以界面的静态呈现为一个维度来进行划分,将结构+表现的实现作为一个Task,如果界面有交互效果实现,则将交互效果的实现作为一个Task。

2、然后以界面的行为实现为一个维度来进行划分,将该界面的前端业务功能实现作为一个Task,将接口联调作为一个Task,如果还有第三方依赖,例如跨平台应用开发,需要原生提供相应功能,则将第三方依赖作为一个Task。

实际案例

项目需求

实现豆果美食学烘焙中的精华模块。包含三个界面,精华文章列表界面,发帖界面和文章详情界面。

UI设计图

Task分解

将精华模块按照如下方式分解后,并进行对应Task的开发评估。

精华模块Task分解图

精华模块包含三个界面,分别对三个界面进行Task分解,下面对精华文章列表页的分解进行详细解释。

对于精华文章列表页,按照界面展现来分解,可以将精华文章整体界面结构+表现实现作为一个Task,可以分配给擅长UI绘制的人员,评估开发时间为1人天。

将精华文章动效处理-列表滑动控制界面元素作为一个Task,让开发人员对动效的处理更聚焦且用心,评估开发时间为0.5人天。

将文章列表页的业务功能实现作为一个Task,业务功能实现可以分配给另外的人来做,评估开发时间为1人天。

将列表页的接口联调作为一个Task,当接口不支持联调时,Task则转化成问题,放入问题列表中进行跟踪,评估时间为0.5人天。

将看大图功能调用作为一个Task,假设列表页的实现是通过跨平台技术(rn、weex)来实现,看大图功能由原生提供,同样,如果原生不能按时提供,同样也作为问题放入问题列表中由前端项目管理者统一监控。

结语

由上可看出,Task的划分合理起到的作用还是很大的。既有利于资源的合理分配,又能提高项目开发中的规范流程,而且还有利于前端项目的管理。当在团队中推行Task分解规范的时候,最重要的还是要基于自己团队,要与团队成员进行充分沟通和指导,一起高效地完成前端项目任务。

前端如何更精准的评估开发时间相关推荐

  1. 程序员如何精确评估开发时间?

    一个程序员能否精确评估开发时间,是一件非常重要的事情.如果你掌握了这项技能,你在别人的眼里就会是这样: 靠谱 经验十足 对需求很了解 延期风险小 合格的软件工程师 正规军,不是野路子 评估开发时间的重 ...

  2. 如何精确评估开发时间的 4 个小套路?

    一个程序员能否精确评估开发时间,是一件非常重要的事情.如果你掌握了这项技能,你在别人的眼里就会是这样: 靠谱 经验十足 对需求很了解 延期风险小 合格的软件工程师 正规军,不是野路子 评估开发时间的重 ...

  3. 如何精确评估开发时间?

    一个程序员能否精确评估开发时间,是一件非常重要的事情.如果你掌握了这项技能,你在别人的眼里就会是这样: 靠谱 经验十足 对需求很了解 延期风险小 合格的软件工程师 正规军,不是野路子 评估开发时间的重 ...

  4. 前端该如何评估开发时间

    一.需求分析 产品经理提出的需求可能不是很正确,这个时候需要工程师进行辅助,原因如下: 1.产品经理可能对技术的边界不是很了解,所以无法充分利用技术解决用户需求.优秀的产品经理是需要有技术广度的,他不 ...

  5. 为什么程序员不擅长评估开发时间?(转)

    一个曾经与我一起工作过的经验丰富的项目经理声称,他拿到程序员的时间估算以后,先将它乘以π,然后转化下一个时间数量级后,才能得到真正的值.1天转化成3.14周.他过去因为程序员不擅长估算时间而吃尽了苦头 ...

  6. 如何评估开发代码质量

    情景 小A所在的项目组,每个项目版本都bug数都在400-500之间,每次项目测试期间都要给验证Bug单独安排2-3天的时间进行Bug验证.Bug多的问题一直存在,终于在4.6.0版本发布后问题爆发了 ...

  7. 需求分析与开发时间评估

    编者按:本文作者Berwin,W3C性能工作组成员,360导航资深前端工程师.<深入浅出Vue.js>作者. 今天想谈一谈关于"需求分析"和"开发时间&quo ...

  8. 最佳实践:怎样评估软件开发时间

    作者 | DDI Development 译者 | 王强 策划 | 王一鹏 据统计,有差不多 70% 的项目都没能准时完成,你的项目也可能是其中之一.总是 delay 是不是很烦人?你也希望在满足市场 ...

  9. 前端开发时间格式的转换方法_开发人员投资时间而不浪费时间的10种方法

    前端开发时间格式的转换方法 In today's, in the past and probably in the future world - the time is more valuable t ...

最新文章

  1. RIPv2相对于RIPv1来说主要有3方面的改进。下面的选项中,RIPv2的特点不包括【两个题】
  2. Nginx + FastCgi + Spawn-fcgi + c 的架构
  3. Docker 容器技术 — 安装
  4. 【数据结构与算法】之深入解析“石子游戏VII”的求解思路与算法示例
  5. oracle-sql优化-通过分组和缓存减少不必要的读
  6. 2012三年大专计算机试题医学,计算机原理2012年4月真题(02384)
  7. Java Message System简介
  8. Linux程序设计01:开发工具和开发平台
  9. mysql log4jlogger_mybatis结合log4j打印SQL日志
  10. OneGame V1.0 发布,开源免费页游联运系统
  11. jackson json转bean忽略没有的字段 not marked as ignorable
  12. 【模拟信号】基于matlab标准调幅信号产生+解调【含Matlab源码 984期】
  13. Java学习-设计模式-单例模式
  14. android 圆圈扩大动画,Android实现3个圆圈的动画
  15. Windows XP常见进程列表
  16. 硬件电子开发常用工具
  17. relative和absolute的使用(详细+案例)
  18. 数字手势识别App--(2)图像处理
  19. 使用java读取文本文件的倒数第N行
  20. pc station v15 博图_博图V15的硬件要求很高啊

热门文章

  1. postgresql python连接不用把密码写在代码里[.pgpass]
  2. R语言中读取xlsx文件的方法
  3. Python3.x的print()输出问题
  4. PMOS做固态继电器,PMOS做高侧双向开关电路,PMOS防电流倒灌电路,PMOS电源防反接电路
  5. ROS学习笔记三:创建ROS软件包
  6. 【简单几句】应对焦虑
  7. UML图中时序图和协作图转化
  8. ASP.NET MVC 1.0 学习笔记(随时更新)
  9. springmvc的作用:
  10. 【软工3】迭代二 心得体会及感想