在平常的前端项目中,咱们常常须要对需求任务进行功能点Task分解,分解Task是为了更合理地进行开发资源分配,也是为了更准确地对项目进行评估和管理。然而若是分配不合理的话,便会带来许许多多的问题,致使开发及管理不顺畅,甚至会致使项目延期或失败。前端
咱们一般使用什么方式来进行Task分解的呢?做为一个项目的前端负责人,如何进行合理的Task分解并分配给相应的开发?做为业务开发人员,咱们该如何安排天天的Task?当在项目中遇到问题时如何抛出问题?react
若是没有一个合理且相对统一规范的Task分解,业务开发人员甚至不知道天天须要作什么,遇到问题也感受无门,并且前端项目管理人员也很差对前端项目的总体进度及状态有个很好地把控,这便给项目带来了风险。weex
因此,咱们须要尽早地创建起适合团队在项目开发中使用的前端Task分解参考,指导着前端团队在项目开发中进行合理且统一的Task分解,让前端项目开发过程更加流畅,让项目的风险降到最低。下面分享的是本身在前端团队中创建的Task分解的一些实践经验。字体
全部前端项目开发,全部的界面都听从着结构+表现+行为的三大组成原则。flex
结构指的是一个界面的总体骨架,从结构中,咱们能看到这个界面的全部组件元素,若是是h5项目,那么标签即是界面的结构组成基本单位,若是是react项目,那么等组件即是界面的结构组成基本单位。优化
表现指的是界面结构的具体样式展示,加上表现,咱们便能肯定这个界面最终的静态呈现是什么样的,例如设置字体的大小颜色、设置按钮的样式、实现一个动效。设计
行为指的是这个界面功能动态实现,例如列表的数据请求并渲染、按钮点击事件地响应处理等。cdn
不一样团队在Task分解上可能存在差别,但应统一保持一些通用原则。blog
具体的分解方式是为了让前端项目管理者及业务开发者在项目开发中对功能点分解达成一致。分解的粒度要保持适中,不能过粗也不能过细。若是太粗的话,在项目开始前,不利于项目的任务分配,在开发中,不利于观察项目的进度和状态。若是太细的话,则会增大项目管理者及业务开发者对Task的管理成本,反而会影响到具体的开发任务。vps
按照前端的特性,我是按照一个界面(由结构+表现+行为组成个体)为基本单位来进行Task划分。
一、对一个界面来讲,先以界面的静态呈现为一个维度来进行划分,将结构+表现的实现做为一个Task,若是界面有交互效果实现,则将交互效果的实现做为一个Task。
二、而后以界面的行为实现为一个维度来进行划分,将该界面的前端业务功能实现做为一个Task,将接口联调做为一个Task,若是还有第三方依赖,例如跨平台应用开发,须要原生提供相应功能,则将第三方依赖做为一个Task。
项目需求
实现豆果美食学烘焙中的精华模块。包含三个界面,精华文章列表界面,发帖界面和文章详情界面。
UI设计图
Task分解
将精华模块按照以下方式分解后,并进行对应Task的开发评估。
精华模块包含三个界面,分别对三个界面进行Task分解,下面对精华文章列表页的分解进行详细解释。
对于精华文章列表页,按照界面展示来分解,能够将精华文章总体界面结构+表现实现做为一个Task,能够分配给擅长UI绘制的人员,评估开发时间为1人天。
将精华文章动效处理-列表滑动控制界面元素做为一个Task,让开发人员对动效的处理更聚焦且用心,评估开发时间为0.5人天。
将文章列表页的业务功能实现做为一个Task,业务功能实现能够分配给另外的人来作,评估开发时间为1人天。
将列表页的接口联调做为一个Task,当接口不支持联调时,Task则转化成问题,放入问题列表中进行跟踪,评估时间为0.5人天。
将看大图功能调用做为一个Task,假设列表页的实现是经过跨平台技术(rn、weex)来实现,看大图功能由原生提供,一样,若是原生不能按时提供,一样也做为问题放入问题列表中由前端项目管理者统一监控。
由上可看出,Task的划分合理起到的做用仍是很大的。既有利于资源的合理分配,又能提升项目开发中的规范流程,并且还有利于前端项目的管理。当在团队中推行Task分解规范的时候,最重要的仍是要基于本身团队,要与团队成员进行充分沟通和指导,一块儿高效地完成前端项目任务。