当前位置: 首页 > news >正文

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

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监听浏览器关闭、刷新及切换标签页触发事件

蛮简单的东西&#xff0c;知道就会&#xff0c;不知道就不会&#xff0c;没什么逻辑可言。简单记录一下&#xff0c;只为加深点儿印象。 visibilitychange visibilitychange可以监听到浏览器的切换标签页。 直接上代码&#xff1a; <script>document.addEventListe…...

Unity 引擎做残影效果——3、顶点偏移方式

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

【Linux】权限

1、shell命令以及运行原理 Linux 严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用 kernel。而是通过 kernel 的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来与 k…...

Excel导入日期格式时自动转为五位数文本

问题描述&#xff1a;Excel导入数据时&#xff0c;当数据是日期可能会存在问题&#xff0c;日期格式转为文本了&#xff0c;例如“2023-07-31”接收时变为“45138”&#xff0c;导致后端解析日期出错&#xff0c;无法导入。 解决方法&#xff1a; 方法一&#xff1a;将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个方法

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

《Java-SE-第二十八章》之CAS

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

git之reflog分析

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

《吐血整理》进阶系列教程-拿捏Fiddler抓包教程(18)-Fiddler如何接口测试,妈妈再也不担心我不会接口测试了

1.简介 Fiddler最大的优势在于抓包&#xff0c;我们大部分使用的功能也在抓包的功能上&#xff0c;fiddler做接口测试也是非常方便的。 领导或者开发给你安排接口测试的工作任务&#xff0c;但是没有给你接口文档&#xff08;由于开发周期没有时间出接口文档&#xff09;&…...

Oracle open JDK和 Amazon Corretto JDK的区别

Oracle OpenJDK和Amazon Corretto JDK都是基于Java开放源代码项目的发行版&#xff0c;它们之间有一些区别。 1. 来源&#xff1a;Oracle OpenJDK是由Oracle公司领导和支持的&#xff0c;它是Java的官方参考实现之一。而Amazon Corretto JDK是由亚马逊公司开发和支持的&#xf…...

Spark写PGSQL分区表

这里写目录标题 需求碰到的问题格式问题分区问题&#xff08;重点&#xff09; 解决完整代码效果 需求 spark程序计算后的数据需要往PGSQL中的分区表进行写入。 碰到的问题 格式问题 使用了字符串格式&#xff0c;导致插入报错。 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&#xff0c;ART浮动的可能性是10-20ms&#xff0c;链路复杂是可接受的&#xff0c;链路简单则需要分析原因。 1&#xff09;缓存没命中&#xff0c;对某些账号缓存没命中&#xff0c;或缓存失效后导致隔段时间耗时升高。 2&…...

Java反射学习(大综合)

第一天 Java反射及动态代理... 2 一、 Java反射... 2 1、什么是反射&#xff1a;... 2 2、反射的原理... 2 3、反射的优缺点&#xff1a;... 2 4、反射的用途&#xff1a;... 3 5、反射机制常用的类&#xff1a;... 3 1、获得Class&#xff1a;主要有三…...

Vite+Vue3 开发UI组件库并发布到npm

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

vue- form动态表单验证规则-表单验证

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

FPGA学习—通过数码管实现电子秒表模拟

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

区块链媒体发稿:区块链媒体宣发常见问题解析

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

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) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

LRU 缓存机制详解与实现(Java版) + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

jdbc查询mysql数据库时,出现id顺序错误的情况

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