Web前端开发流程

wufan0 2019-07-01

开发前准备

了解产品和设计

  • 参加需求、交互、视觉会议,了解产品设计和项目成员。
  • 了解产品面向的设备和平台。
  • 了解产品对兼容性的要求以及是否采用响应式设计等。

提出疑问和见解

  • 按需求结合现有技术,提出疑问和见解。
  • 提出可能存在的问题(技术实现,性能问题等),协商解决方案(如优雅降级、渐进增强)并达成共识。
  • 提出当下已掌握新技术可能在项目中的应用场景,协助产品创新。不要采用未掌握的技术创新

预算人力和时间

  • 根据项目工期要求及工作量,预算人力和时间。
  • 挑选前端成员组成前端小组,拟定技术选型。
  • 确定功能开发优先级,预算开发周期和阶段性产出。
  • 提醒需求方在项目管理平台(禅道)中创建项目并加入项目成员。
  • 提醒需求方在项目企业沟通工具(企业微信或钉钉)中创建项目交流群并加入项目成员。
  • 提醒项目负责人创建git仓库并设置成员权限。

开发过程

职责任务

  • 确定前端小组长,负责对整个页面开发工作做统筹规划、分配协调等管理工作和主开发职责
  • 确认交互原型或视觉效果已经定稿,再开始开发工作。
  • 如果采取并行模式(视觉设计和页面开发同时进行),则以交互原型定稿为准(当视觉效果定稿后,页面工程师再补充细节),开始分配。
  • 按页面类型分配,同一类型页面分配给同一个人。
  • 每个人都要了解页面公共元素(多个页面中相同或相似部分),一个公共元素只分配到一个人,每人完成自身页面的同时完成“提取剥离”。
  • 在项目管理平台中细分开发任务,填写任务详情和时间,如果任务间存在关系,则设置好关联或从属关系。

页面开发

  • 由小组长创建前端目录,包含“页面开发”目录(如:js、css、html、images)及“提取剥离”目录(如:demo)。
  • 由小组长创建公共样式和引入js库版本以及工具包(如:reset.css、jquery3.2.1.js、resize.js、util.js)
  • 和交互、视觉及其他前端工程师或后端工程师保持良好的沟通。
  • 对交互原型和视觉设计有疑问,上报小组长,由小组长统一对外(需求方和设计师)反馈问题和建议。
  • 如果采取并行模式,前后端有数据交互的页面,先与后端小伙伴约定好API字段(如图片接口用imgorimg_urlorimage

提取剥离

  • 提取剥离相同或相似结构,封装成模板或组件。
  • 提取剥离公共js方法,保存到util.js。
  • 若要修改提取剥离出的公共部分,需小组讨论可行性后,方可由小组长修改。

开发产出

自测联调

  • 首先对自己的代码进行全面的多设备测试和兼容性测试。
  • 多人协同项目,git先拉取再提交,如有冲突上报小组长解决冲突。
  • 自测过程中发现别人写的代码有问题,及时反馈。

提交验收

  • 当有阶段性产出后,小组长上报主管,安排经验丰富的前端工程师进行代码验收。
  • 代码验收将主要检查兼容性、HTML、CSS、JS规范。
  • 同时小组长将页面提交给设计师,进行效果验收。
  • 效果验收将主要检查视觉效果符合度(尺寸、位置、颜色、切图等)。

交接说明

  • 当完成验收后,通知并交给后端小伙伴,进行后续开发,前端需要交代可能需要他们注意的地方或者对代码的解释说明。
  • 如果你的工作需要与别人交接,也需要交代清楚整体架构部署和代码解释。

变更维护

  • 需求变更必须在项目交流群中提出,由小组长与需求方确认,如有必要,需求方召集项目组开会说明
  • 前端代码优化维护,必须上报主管,需小组讨论可行性后,方可由修改。

参考 Nec工程师规范

相关推荐