资讯专栏INFORMATION COLUMN

Web前端开发流程

fox_soyoung / 3398人阅读

摘要:页面开发由小组长创建前端目录,包含页面开发目录如及提取剥离目录如。提交验收当有阶段性产出后,小组长上报主管,安排经验丰富的前端工程师进行代码验收。

开发前准备 了解产品和设计

参加需求、交互、视觉会议,了解产品设计和项目成员。

了解产品面向的设备和平台。

了解产品对兼容性的要求以及是否采用响应式设计等。

提出疑问和见解

按需求结合现有技术,提出疑问和见解。

提出可能存在的问题(技术实现,性能问题等),协商解决方案(如优雅降级、渐进增强)并达成共识。

提出当下已掌握新技术可能在项目中的应用场景,协助产品创新。不要采用未掌握的技术创新

预算人力和时间

根据项目工期要求及工作量,预算人力和时间。

挑选前端成员组成前端小组,拟定技术选型。

确定功能开发优先级,预算开发周期和阶段性产出。

提醒需求方在项目管理平台(禅道)中创建项目并加入项目成员。

提醒需求方在项目企业沟通工具(企业微信或钉钉)中创建项目交流群并加入项目成员。

提醒项目负责人创建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工程师规范

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117532.html

相关文章

  • Web设计流程优化:网页效果图设计新思路

    摘要:这引发了对设计流程以及使用工具的新思考能否在贴近并尽量覆盖各种真实使用环境的情况下,又易于修改答案网页效果图设计新思路答案是抛弃原有的在效果图制作方法,转而使用以及等构建真实的基础网页效果,最终以截图的形式获得效果图展示给客户。 传统的PS网页设计已经跟不上如今流式布局潮流的发展了,PS不可能把所有移动设备的尺寸都做一个版本出来。如果PS的页面过多,期间要修改一个通用的东西,也是牵一发...

    Maxiye 评论0 收藏0
  • Web设计流程优化:网页效果图设计新思路

    摘要:这引发了对设计流程以及使用工具的新思考能否在贴近并尽量覆盖各种真实使用环境的情况下,又易于修改答案网页效果图设计新思路答案是抛弃原有的在效果图制作方法,转而使用以及等构建真实的基础网页效果,最终以截图的形式获得效果图展示给客户。 传统的PS网页设计已经跟不上如今流式布局潮流的发展了,PS不可能把所有移动设备的尺寸都做一个版本出来。如果PS的页面过多,期间要修改一个通用的东西,也是牵一发...

    xiaotianyi 评论0 收藏0
  • Web前端开发流程

    摘要:页面开发由小组长创建前端目录,包含页面开发目录如及提取剥离目录如。提交验收当有阶段性产出后,小组长上报主管,安排经验丰富的前端工程师进行代码验收。 开发前准备 了解产品和设计 参加需求、交互、视觉会议,了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应式设计等。 提出疑问和见解 按需求结合现有技术,提出疑问和见解。 提出可能存在的问题(技...

    keithyau 评论0 收藏0
  • Web前端开发流程

    摘要:页面开发由小组长创建前端目录,包含页面开发目录如及提取剥离目录如。提交验收当有阶段性产出后,小组长上报主管,安排经验丰富的前端工程师进行代码验收。 开发前准备 了解产品和设计 参加需求、交互、视觉会议,了解产品设计和项目成员。 了解产品面向的设备和平台。 了解产品对兼容性的要求以及是否采用响应式设计等。 提出疑问和见解 按需求结合现有技术,提出疑问和见解。 提出可能存在的问题(技...

    zhkai 评论0 收藏0
  • 前端资源收集整理

    摘要:工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 工作原因,最近一年断断续续写了一点前端代码,收集整理了一些资料,和大家共享。 Github版本:Front-End Resource Collection 前端相关资源汇总 学习指导 精华文章 Web前端的路该怎么走?:文章超长,但是干货超级多,值得反复精读! 听说2017你想写前端?:适合于已经度过了小白阶...

    awesome23 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<