【项目流程】前端项目的开发流程
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. 项目沟通的重要性
- 软件开发是多人协作的工作,因此沟通是最重要的事情。沟通 > 设计 > 开发
- 最好是每日一沟通,汇报工作安排及完成情况,存在问题的问题要及时汇报。
- 要预估到项目中可能存在的风险,及时汇报。
相关文章:

【项目流程】前端项目的开发流程
1. 项目中涉及的所有角色及其职责 - PM 产品经理 产品经理(Product Manager,简称PM)负责明确和定义产品的愿景和战略,与客户、用户、业务部门和其他利益相关者进行沟通,收集并分析他们的需求和期望。负责制定产品的详…...
JS监听浏览器关闭、刷新及切换标签页触发事件
蛮简单的东西,知道就会,不知道就不会,没什么逻辑可言。简单记录一下,只为加深点儿印象。 visibilitychange visibilitychange可以监听到浏览器的切换标签页。 直接上代码: <script>document.addEventListe…...

Unity 引擎做残影效果——3、顶点偏移方式
Unity实现残影效果 大家好,我是阿赵。 继续讲Unity引擎的残影做法。这次的残影效果和之前两种不太一样,是通过顶点偏移来实现的。 具体的效果是这样: 与其说是残影,这种效果更像是移动速度很快时造成的速度线,所以在移…...

【Linux】权限
1、shell命令以及运行原理 Linux 严格意义上说的是一个操作系统,我们称之为“核心(kernel)“ ,但我们一般用户,不能直接使用 kernel。而是通过 kernel 的“外壳”程序,也就是所谓的shell,来与 k…...
Excel导入日期格式时自动转为五位数文本
问题描述:Excel导入数据时,当数据是日期可能会存在问题,日期格式转为文本了,例如“2023-07-31”接收时变为“45138”,导致后端解析日期出错,无法导入。 解决方法: 方法一:将Excel日…...
Mac使用brew安装软件报错
在使用brew安装软件时报错Failed to upgrade Homebrew Portable Ruby! brew install --cask --appdir/Applications docker> Downloading https://ghcr.io/v2/homebrew/portable-ruby/portable-ruby/blobs/sha256:0cb1cc7af109437fe0e020c9f3b7b95c3c709b140bde9f991ad2c143…...
Android 实现MQTT客户端,用于门禁消息推送
添加MQTT依赖 implementation ‘org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.2’ implementation ‘org.eclipse.paho:org.eclipse.paho.android.service:1.1.1’ 在Manifest清单文件中添加服务 <service android:name"org.eclipse.paho.android.service.Mq…...

跨境电商的广告推广怎么做?7个方法
在跨境电商竞争日趋激烈的市场环境下,跨境电商店铺引流成了制胜关键点。这里给大家分享一套引流推广的方法。 一、搜索引擎营销推广 搜索引擎有两个最大的优点是更灵活、更准确。搜索引擎营销的目标定位更精确,且不受时间和地理位置上的限制࿰…...

《Java-SE-第二十八章》之CAS
前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页:KC老衲爱尼姑的博客主页 博主的github,平常所写代码皆在于此 共勉:talk is cheap, show me the code 作者是爪哇岛的新手,水平很有限&…...

git之reflog分析
写在前面 本文一起看下reflog命令。 1:场景描述 在开发的过程中,因为修改错误,想要通过git reset命令恢复到之前的某个版本,但是选择提交ID错误,导致多恢复了一个版本,假定,该版本对应的内容…...

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(18)-Fiddler如何接口测试,妈妈再也不担心我不会接口测试了
1.简介 Fiddler最大的优势在于抓包,我们大部分使用的功能也在抓包的功能上,fiddler做接口测试也是非常方便的。 领导或者开发给你安排接口测试的工作任务,但是没有给你接口文档(由于开发周期没有时间出接口文档)&…...
Oracle open JDK和 Amazon Corretto JDK的区别
Oracle OpenJDK和Amazon Corretto JDK都是基于Java开放源代码项目的发行版,它们之间有一些区别。 1. 来源:Oracle OpenJDK是由Oracle公司领导和支持的,它是Java的官方参考实现之一。而Amazon Corretto JDK是由亚马逊公司开发和支持的…...

Spark写PGSQL分区表
这里写目录标题 需求碰到的问题格式问题分区问题(重点) 解决完整代码效果 需求 spark程序计算后的数据需要往PGSQL中的分区表进行写入。 碰到的问题 格式问题 使用了字符串格式,导致插入报错。 val frame df.withColumn("insert_t…...
Git 命令行登录
有时候登录命令行版本的git会出现这个错误 1remote: Support for password authentication was removed on August 13, 2021. 2remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for …...

性能分析记录
4实例压测TPS浮动在200-300 1.TPS浮动200-300,ART浮动的可能性是10-20ms,链路复杂是可接受的,链路简单则需要分析原因。 1)缓存没命中,对某些账号缓存没命中,或缓存失效后导致隔段时间耗时升高。 2&…...

Java反射学习(大综合)
第一天 Java反射及动态代理... 2 一、 Java反射... 2 1、什么是反射:... 2 2、反射的原理... 2 3、反射的优缺点:... 2 4、反射的用途:... 3 5、反射机制常用的类:... 3 1、获得Class:主要有三…...

Vite+Vue3 开发UI组件库并发布到npm
一直对开源UI组件库比较感兴趣,摸索着开发了一套,虽然还只是开始,但是从搭建到发布这套流程基本弄明白了,现在分享给大家,希望对同样感兴趣的同学有所帮助。 目前我的这套名为hasaki-ui的组件库仅有两个组件࿰…...

vue- form动态表单验证规则-表单验证
前言 以element官网的form表单的-动态增减表单项为例讲解表单验证规则 动态的功能就是v-model配合push v-for 便利来实现的 我们需要熟知2个知识点prop表单验证需要跟v-model绑定的值是一样的, 如果是一个数组便利的表单,那就需要绑定这个数组每一项…...

FPGA学习—通过数码管实现电子秒表模拟
文章目录 一、数码管简介二、项目分析三、项目源码及分析四、实现效果五、总结 一、数码管简介 请参阅博主以前写过的一篇电子时钟模拟,在此不再赘述。 https://blog.csdn.net/qq_54347584/article/details/130402287 二、项目分析 项目说明:本次项目…...

区块链媒体发稿:区块链媒体宣发常见问题解析
据统计,由于区块链应用和虚拟货币的兴起,越来越多媒体对区块链领域开展报导,特别是世界各国媒体宣发全是热火朝天。但是,随着推卸责任媒体宣发的五花八门,让很多人因而上当受骗,乃至伤害一大笔资产。身为投…...

Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误,它们的含义、原因和解决方法都有显著区别。以下是详细对比: 1. HTTP 406 (Not Acceptable) 含义: 客户端请求的内容类型与服务器支持的内容类型不匹…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台,覆盖应用全生命周期测试需求,主要提供五大核心能力: 测试类型检测目标关键指标功能体验基…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
Leetcode33( 搜索旋转排序数组)
题目表述 整数数组 nums 按升序排列,数组中的值 互不相同 。 在传递给函数之前,nums 在预先未知的某个下标 k(0 < k < nums.length)上进行了 旋转,使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...
华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)
题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

jdbc查询mysql数据库时,出现id顺序错误的情况
我在repository中的查询语句如下所示,即传入一个List<intager>的数据,返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致,会导致返回的id是从小到大排列的,但我不希望这样。 Query("SELECT NEW com…...