当前位置: 首页 > 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;乃至伤害一大笔资产。身为投…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...