Web前端开发流程

开发前准备

了解需求

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

分析需求

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

预算人力和时间

• 根据项目工期要求及工作量，预算人力和时间。
• 挑选前端成员组成前端小组，拟定技术选型。
• 确定功能开发优先级，预算开发周期和阶段性产出。
• 提醒需求方在项目管理平台（禅道）中创建项目并加入项目成员。
• 提醒需求方在项目企业沟通工具（企业微信或钉钉）中创建项目交流群并加入项目成员。
• 提醒项目负责人创建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规范。
• 同时小组长将页面提交给设计师，进行效果验收。
• 效果验收将主要检查视觉效果符合度（尺寸、位置、颜色、切图等）。

交接说明

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

总结分享

• 分享内容：遇到的问题和解决方案，新技术应用，协作心得
• 分享对象：项目组成员以及感兴趣的人
• 分享方式：每月分享会

变更维护

• 需求变更必须在项目交流群中提出，由小组长与需求方确认，如有必要，需求方召集项目组开会说明
• 如果静态资源的版本号不是自动完成更新，你可能需要手动更新版本号（demo.css?v=1.0.1）
• 前端代码优化维护，必须上报主管，需小组讨论可行性后，方可由修改。

参考 Nec工程师规范