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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...