目标

1.流程清晰化和可视化

2.从需求分析开始 规避返工

3.更高效、保质和愉快的研发

4.个人成长和团队经验积累

一 前端需求分析和设计

主要从原型和UI两个方面进行

1. 原型评审及分析

整体结构分析和设计

总体方向：前期分析越细，后期问题越少，开发起来越顺畅，并且可以在早期就能UI和产品达成意见一致，有问题即时发现，越早解决。

提前让产品准备好：原型 设计文档 功能清单

主要从以下方面如手：

  • 整体页面的风格分析
  • 整体模块拆分
  • 拟采用的技术路线
  • 技术难点
  • 通用组件 抽取
  • 风险评估

产出：

  • ① 领域关键词抽取 思维导图, 取好对应的英文模块名，方便以后统一命名规范
  • ② 路由规划思维导图 思维导图,取好对应的英文模块名，方便以后统一命名文件
  • ③ 技术难点 列表以及 预采用方案，无技术难点可以不列
  • ④ 整体时间周期评估和计划 （需要结合UI页面分析结果，统一计算给出），简单项目 excel即可，也可尝试使用 project

2. UI评审及分析
主要从以下方面如手：

  • UI评审和原型评审 以及沟通， UI评审可参考 https://shimo.im/doc/Bcf5dqTK2tYlNA9Z
  • 页面细节分析，细致到每一个交互，复杂的交互需要UI出交互文档
  • 页面整体布局
  • 通用组件 抽取及命名
  • 抽取页面级组件
  • 分析页面可有复用的样式和组件
  • 仔细分析 功能复杂的功能或组件
  • 当前页面 工时预估

产出：

  • ① 页面级组件 抽取及命名， 可复用部分 标注出来；
  • ② 详细的时间周期评估和人员分配（在原型分析的基础上进行）

以上分析完成后，需要组织前端相关参与人员一块分析评审，评审通过后，才能进行 编码阶段

以上两部分汇总成 前端的概要设计

二 前端编码过程

  • 按模块和页面 确定 路由
  • 按模块和页面 划分到人进行开发，最大限度 避免冲突
  • 切页面过程中，一定要细致，严格按照UI执行，页面数据用接近真数据的假数据填充
  • 后端接口文档分析， 审查后端接口文档是否完整，参数是否合理，在接口联调中，后端必须提供单元测试文档或代码，便于前端直接通过测试用例 走通接口，而不是各种调试后，发现接口有问题。对于不提供测试用例的后端代码，直接否决掉。

三 前端阶段性演示和评审

在研发过程中，为了避免出现实现的效果偏差，可以定期 组织演示和评审，小演示可每天进行，大的阶段性演示可一周一次，可邀请产品和UI参加

四 需求变更或调整

如果在研发过程中，产品和UI有需求变更或调整，需要他们 提供书面（或邮件通知）的更改需求以及变更理由。研发需要即时反馈出影响的范围和工期。必要时可以组织会议，大家讨论决策。 需求调整 根据 改动大小 酌情考虑 重新评审

五 提交测试和bug修正

总体目标：不要让bug留在 个人的bug列表里，都解决或都甩出去~~~

在bug修正过程中有以下要求：

  • 测试提出的bug要即时解决
  • 不确定的bug需要即时找测试和产品 沟通解决
  • 遇到技术上不好解决的bug，可请求帮助，拟定方案解决，或转给他人解决
  • bug经过分析和处理，发现不好解决，可以反馈给产品，但需详细说明理由，以及建议和可替换的处理方案

六 项目总结

产出

  • ① 个人项目经验总结 每人一份
  • ② 抽取复用的组件或算法 放入前端公用库中，方便以后其他项目使用
  • ③ 易反复出现的bug给出统一的处理方案，集成到前端公用库中
  • ④ 以上各个流程的产生的文档的汇总归类整理

注

以上内容由 前端人员以及相关人员 意见达到一致后开始执行 如需要更改或增加内容，大家达成一致后方可修改。