前端如何更精准的评估开发时间

[webVueBlog]

在日常的前端项目中，我们经常需要对需求任务进行功能点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。