【项目流程】前端项目的开发流程

news/2024/5/11 14:15:54/文章来源:https://blog.csdn.net/zx1041561837/article/details/132077642

1. 项目中涉及的所有角色及其职责

- PM 产品经理
产品经理(Product Manager,简称PM)负责明确和定义产品的愿景和战略,与客户、用户、业务部门和其他利益相关者进行沟通,收集并分析他们的需求和期望。负责制定产品的详细规划,并根据产品的战略目标和需求优先级,确定功能的开发优先级。

产品经理是与开发团队沟通的桥梁。他们与开发团队密切合作,向开发团队传达产品需求和功能细节,解答问题,并确保开发团队理解产品的愿景和目标。

产品经理撰写产品需求文档(PRD),其中包含产品的功能描述、用例、用户故事等详细信息,以便开发团队和测试团队理解需求和开展工作。

产品经理根据需求提供原型图

- UE 视觉设计师
简称UE或UI/UX Designer)的职责主要围绕用户体验和界面设计展开。根据产品需求和用户研究的结果,设计用户界面,包括页面布局、图标、按钮、颜色、字体等。视觉设计师要考虑界面的易用性和美观性,以及与品牌风格的一致性。

视觉设计师根据原型图绘制出较为美观的设计稿

- FE 前端开发
前端开发工程师(Front-end Developer,简称FE)是负责构建用户界面和用户体验的关键角色。他们主要负责开发和实现用户在浏览器中直接交互的部分,即前端部分。前端开发工程师需要根据设计稿还原页面。具体职责如下:

  • 网页设计实现:将设计师提供的网页设计转化为实际的网页界面,使用HTML、CSS和JavaScript等技术进行页面的构建和布局。
  • 用户界面开发:负责开发和维护用户界面,包括各种页面、表单、按钮、导航栏等用户交互元素的实现。
  • 响应式设计:确保网站或应用在不同设备上(如桌面、平板、手机等)的响应式布局,以便在不同屏幕尺寸下提供良好的用户体验。
  • 前端框架使用:熟悉并应用各种前端框架(如React、Angular、Vue.js等),以提高开发效率和代码质量。
  • 数据交互:与后端开发人员合作,实现前端与后端数据的交互,通过AJAX或API调用获取和展示数据。
  • 浏览器兼容性:确保网站或应用在主流浏览器中具有良好的兼容性,以确保用户在不同浏览器中都能正常使用产品。
  • 性能优化:优化前端代码和资源,以提高网站或应用的加载速度和性能,提升用户体验。
  • 测试和调试:进行前端代码的测试和调试,确保产品的稳定性和可靠性。
  • 版本控制:使用版本控制系统(如Git)来管理和追踪前端代码的版本变更。
  • 技术研究和学习:持续跟踪前端技术的发展和最新趋势,不断学习和提升自己的技能。

- RD 后端开发
后端开发工程师(Back-end Developer)的职责是负责开发和维护与前端用户界面无直接交互的部分,即后端部分。后端开发工程师主要关注服务器端的业务逻辑、数据库操作和数据处理等功能。

- CRD 移动端开发
移动端开发工程师(Mobile App Developer)通常是指“移动端开发”(Mobile App Development)的缩写,而不是“CRD”。移动端开发工程师的职责主要围绕开发移动应用程序,为移动设备(如智能手机和平板电脑)上的用户提供功能和服务。

- QA 测试人员
测试人员(Quality Assurance,简称QA)的职责主要是确保软件的质量,他们负责进行各种测试活动,以发现并报告潜在的缺陷和问题。

2. 项目开发的流程

在这里插入图片描述

3. 各个阶段常见的问题

① 需求分析

  • 作为前端开发工程师,我们在需求分析阶段需要了解项目背景,我们要知道为什么要做这个需求。
  • 可以质疑产品经理提出的需求是否合理。
  • 思考所提需求是否全面,能否实现闭环。
  • 评估所提需求的开发难度。
  • 在需求分析阶段,如果需要其他支持,比如人力支持,就要在需求分析的阶段提出来。
  • 不要急于给排期,可在需求分析会议结束之后,在给出排期。要考虑其他人员的排期,同时给自己的排期时长可以预留一些时间,考虑如生病的特殊情况。

② 技术方案设计

  • 在技术方案设计时,尽量考虑简单的方案,不要过度设计。
  • 最好先产出一个文档,文档的内容可以是对问题的文本描述,以及对代码的描述。
  • 找准设计重点。
  • 技术方案设计过程中,需要和后端进行沟通。设计完成后需要进行组件评审,同时发出会议结论,可以是聊天记录或者邮件的形式。

③ 开发

作为一个前端开发工程师,我们应该如何保证项目和代码的质量?

  • 合理规划自己的排期时长,需要预留出工作量时长的1/4以应对突发情况。
  • 开发过程符合开发规范,如commit、git、branch的规范。
  • 需要些开发文档(比如公共API需要写文档介绍)。
  • 及时进行单元测试。
  • 使用Mock API模拟数据,从而提升开发效率。
  • 经常进行Code Review,可以找项目团队中经验丰富的老员工帮忙。

④ 联调

  • 和后端进行技术联调。
  • 让UE确定视觉效果。
  • 让PM确定产品功能。(如果需求已经开发结束,此时产品经理增加了需求,我们不应该拒绝,而是走需求变更流程,增加排期,实现需求)

⑤ 测试

  • 提测发邮件,抄送项目组。
  • 测试问题可以用表格详细记录。
  • 有问题时,QA和FE要及时沟通,因为二者之间的信息是不对称的。
  • 不能说,这个问题在我的电脑上没有出现。
  • 可以去找测试,当面让QA帮你复现。

⑤ 项目上线

  • 项目上线后,QA会及时进行回归测试。
  • 如果存在问题,及时回滚。先止损,确保其他功能正常使用,再排查。

4. 项目沟通的重要性

  • 软件开发是多人协作的工作,因此沟通是最重要的事情。沟通 > 设计 > 开发
  • 最好是每日一沟通,汇报工作安排及完成情况,存在问题的问题要及时汇报。
  • 要预估到项目中可能存在的风险,及时汇报。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_152422.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TCP三次握手,四次挥手理解

1. 三次握手 *三次握手(Three-way Handshake)*其实就是指建立一个TCP连接时,需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实…

前端学习---vue2--选项/数据--data-computed-watch-methods-props

写在前面: vue提供了很多数据相关的。 文章目录 data 动态绑定介绍使用使用数据 computed 计算属性介绍基础使用计算属性缓存 vs 方法完整使用 watch 监听属性介绍使用 methodspropspropsData data 动态绑定 介绍 简单的说就是进行双向绑定的区域。 vue实例的数…

MPU6050

偏航角(Yaw) 横滚角(ROll) 俯仰角(Pit) 误差 mpu6050里面有一个受力的东西 受重力影响的电容 某个导体就往下一点 根据fma就可以算出当前的加速度值 加速度传感器只输出加速度 知道重力加速度和重力的角度可…

C++入门之stl六大组件--List源码深度剖析及模拟实现

文章目录 前言 一、List源码阅读 二、List常用接口模拟实现 1.定义一个list节点 2.实现一个迭代器 2.2const迭代器 3.定义一个链表,以及实现链表的常用接口 三、List和Vector 总结 前言 本文中出现的模拟实现经过本地vs测试无误,文件已上传gite…

java: 非法字符: ‘\ufeff‘

遇到这种情况是编码转换问题 解决办法: 单个文件:可以先将格式转换为utf-16,然后在转换回utf-8 多个文件:在setting-file encodings将乱码的这个文件夹里的所有Java文件都设置utf-8格式就可以了

小成本大幅度增幅CNN鲁棒性,完美的结合GLCM+CNN

本文以实验为导向,使用vgg16GLCM实现一场精彩的新冠肺炎的分类识别,并且对比不加GLCM后的效果。在这之前,我们需要弄明白一些前缀知识和概念问题: GLCM(Gray-Level Co-occurrence Matrix),中文称…

比特鹏哥-数据类型和变量【自用笔记】

这里写目录标题 1.数据类型介绍字符,整型,浮点型,布尔类型 2.signed 和unsigned3.数据类型的取值范围sizeof 展示字节大小--- 计算机中单位:字节 4.变量 常量4.1 变量创建变量(数据类型 变量名)创建变量的时…

基于react-native的简单消息确认框showModel

基于react-native的简单消息确认框showModel 效果示例图组件代码ShowModel/index.jsx使用案例device.js安装线性渐变色 效果示例图 组件代码ShowModel/index.jsx import React, {forwardRef, useImperativeHandle, useState} from react; import {View,Text,Modal,TouchableOp…

2023,哪些大厂不再值钱?

2023年,摘下口罩的第一年,虽然经济复苏没那么强劲,但对于在资本寒冬中熬了许久的互联网科技股来说,春天的步伐好像越来越近了。今年以来,主要互联网科技公司的股价基本都涨了不少,尤其美国那边,…

ROS添加发布者和订阅者机制实现

一. ROS的节点和包 ✨Node: ROS的基本单位,实现某个功能的节点。比如实现超声波传感器就是一个节点,雷达传感器就可以是一个节点 ✨Package: 多个有联系的节点组成的单位,比如你要控制无人机姿态,可能需要…

【Linux命令详解 | pwd命令】Linux系统中用于显示当前工作目录的命令

文章标题 简介一,参数列表二,使用介绍1. pwd命令的基本使用2. pwd命令中的参数3. pwd命令的工作机制4. pwd命令的实际应用 总结 简介 pwd命令是Linux中的基础命令之一,使用该命令可以快速查看当前工作目录。在掌握Linux命令时,pw…

在Raspberry Pi 4上安装Ubuntu 20.04 + ROS noetic(不带显示器)

在Raspberry Pi 4上安装Ubuntu 20.04 ROS noetic(不带显示器) 1. 所需设备 所需设备: 树莓派 4 B 型 wifi microSD 卡:最小 32GB MicroSD 转 SD 适配器 (可选)显示器,鼠标等 2. 树莓派…

CDN安全面临的问题及防御架构

CDN安全 SQL注入攻击(各开发小组针对密码和权限的管理,和云安全部门的漏洞扫描和渗透测试) Web Server的安全(运营商和云安全部门或者漏洞纰漏第三方定期发布漏洞报告修复,例如:nginx版本号和nginx resol…

Spring5.2.x 源码使用Gradle成功构建

一 前置准备 1 Spring5.2.x下载 1.1 Spring5.2.x Git下载地址 https://gitcode.net/mirrors/spring-projects/spring-framework.git 1.2 Spring5.2.x zip源码包下载,解压后倒入idea https://gitcode.net/mirrors/spring-projects/spring-framework/-/…

《数据同步-NIFI系列》Nifi配置UpdateAttribute实现字符串时间戳转日期

Nifi配置UpdateAttribute实现字符串时间戳转日期 数据处理流程如下:查询源数据库,将Avro转为Json格式,然后使用EvaluateJsonPath修改字段名,最后使用replaceText将参数组成SQL,最后PutSQL。 一、字段串时间戳导致无法插…

转运相关的征兆,大家可以来看看

转运是一种喜讯,意味着运势将逐渐好转,人生会迎来一系列积极的变化。 虽然没有确切的科学根据可以证明转运的存在, 但是在许多传统文化和民俗中,人们都相信转运的征兆是实实在在的。 虽然无法确保这些征兆会在每种情况下都适用&am…

MySQL索引3——Explain关键字和索引使用规则(SQL提示、索引失效、最左前缀法则)

目录 Explain关键字 索引性能分析 Id ——select的查询序列号 Select_type——select查询的类型 Table——表名称 Type——select的连接类型 Possible_key ——显示可能应用在这张表的索引 Key——实际用到的索引 Key_len——实际索引使用到的字节数 Ref ——索引命…

测试工程师的工作

目录 1.何为软件测试工程师? 2.软件测试工程师的职责? 3.为什么要做软件测试? 4.软件测试的前途如何? 5.工具和思维谁更重要? 6.测试和开发相差大吗? 7.成为测试工程师的必备条件 8.测试的分类有哪…

【Spring Boot】(二)Spring Boot 配置文件的探索之旅

文章目录 前言一、配置文件的作用二、配置文件的格式2.1 Spring Boot 配置文件格式2.2 properties 和 yml 的区别 三、properties 配置文件3.1 properties 基本语法3.2 配置文件的读取3.3 properties 优缺点分析 四、yml 配置文件说明4.1 yml 基本语法4.2 yml 使用案例4.3 yml …

Git报错合集

本文记录了笔者在使用 github 过程中遇到的问题,仅供个人使用。 目录 Could not resolve hostlocal changes to the following files would be overwritten by mergeTLS connection was non-properly terminatedUpdates were rejected because the remote contains …