前端修行 - 与后端配合的那些事情

news2025/1/10 17:16:08

最近总结一下个人作为前端,与后端、测试、以及产品经理、UI设计之间配合的那些事情,想到哪里说到哪里

1 关于正确认识项目研发一号位都是后端的这个事情

项目研发一号位,在有的公司可能会叫做SDM(software development manger),大体是一个意思,也就是一个项目的研发团队,会有一个项目的研发leader,整体负责该项目的研发演进。

一般而言,这个岗位都是后端研发担任。

原因无他,大部分的研发项目,业务数据是第一资产,这样的话谁掌握了数据库,谁就可以离业务更近,近而有更大的话语权。

前端作为重界面展示的一侧,天然的就离数据远,带来的好处就是前端可以不用了解业务,也可以顺利进行代码开发。但也会带来不好处,就是常规的项目都无法担任一号位。

!!重要的来了

项目研发一号位,仅仅是负责当前的这个项目,对前端而言,一号位需要把前端的工作进行汇总、向上汇报的,大家配合方便工作,仅此而已

前端通常还有自己的前端团队+前端leader,一号位不是前端的leader。

也就是说,前后端分离,不仅仅是代码/部署方式的分离,人也是分离的一号位也无法干涉,这个是本文后面一切所说的基础。

2 丑话说在前面,前端的事情前端自己来负责

前端开发入门简单,加上早几年前前后端开发不分离,因此很多后端研发都会点JS,或者之前有写过jQuery甚至vue的实际经验,然后就觉得自己也会前端

然后就很可能会出现这种情况,后端研发会干涉前端的工作,包括但不限于

  • 未经过前端,替前端同学接活
  • 干涉前端工作的工时评估
  • 干涉前端的开发设计

以上后端的行为,个人全部遇到过,这个时候我会列几条准则给前后端伙伴们周知

  • 未经过前端,接了前端的活 —— 前端概不承认,谁接的谁干。需要前端出席的会议,喊上前端一起
  • 前端的工时,前端自己来估,未经过前端确认的评估一概不认,即使前端估的时比后端更少
  • 前端的工作,后端可以提建议,甚至意见,但最终前端自己说了算,出现问题的话,也是前端自己背

OK,接下来说一起配合的事情

3 前后端接口规范定义

个人的准则一向是规范先行

可以参考本人csdn博客 前端规范——前后端接口规范

规范定义不难,重要的是遵守+根据业务演进,才能最大发挥作用

4 前后端高效联调,需要双方深度参与

早之前的联调模式如下

前后端开发同一个模块,大家一起写自己的代码,但由于前端的细节性与琐碎性,接口的mock无法完全做到替代真实接口的作用,比如真实数据字段的长度,就会影响前端界面的展示。

所以会经常出现一种现象,不管前端开发快慢,都需要等着后端接口出来之后,拿着界面进行联调,这个时候,后端同学可能需要修改前端联调中提出来的接口问题,如果没有的话,就没事了

个别不负责的后端同学,自己写的接口,不自测,直接丢给前端来进行测试,出现一个bug就修改一个

最后前端将功能联调完成之后,直接提测,然后QA同学介入,前端只管界面,后端只管接口。

首先要说,在此再说一句:后端未经过自测的接口,未达到提交给前端联调的条件

其次,如上无法发挥联调的最大功能,作为最熟悉该模块的前后端同学,除了保证自己的代码无误之外,还需要最大限度帮对方测试

个人认为正确的联调模式,是前后端都尽快将代码部署到测试环境,通过对方的代码来测试完善自己的代码,然后将自己测试通过的代码告知对方,然后互相验证对方的代码

  • 后端同学需要将所有的界面功能完整的走几遍,查看前端的功能、交互问题
  • 前端同学需要测试接口的必要性能,如按每页100页分页的接口返回、层级比较深的树接口返回

这样的话,一个业务模块,我们是前后端共同负责,除了代码工作的共同负责之外,还有责任的共同负责。比如一个浅显的前端bug,固然前端有问题,但后端没有测试出来,需要一起来背锅

5 首选后端同学来做show case工作

show case是我们团队最近推行的一个验收标准,即一个研发任务提测之前,研发拉着QA同学一起,将该任务进行详细的演示,使测试更了解业务细节的同时,也顺便做了一次冒烟测试

一开始领导们觉得show case前端做比较好,实际上需要首选后端研发来做。

因为前端研发每天与界面交互打交道,操作界面会下意识会使用一种“最佳路径”,比如:使用Chrome浏览器,关闭掉无关的浏览器tab、使用之前刷新一下界面、界面最大化,以及操作功能时的按钮先后点击顺序等等,因此很难作为一个普通的用户来操作界面。

后端同学就没有这个影响,他们可以更像普通的用户一样来操作,而且他们要进行show case的话,会更好的多走几遍界面,更容易发现前端自己发现不了的问题。

6 前后端都可以做的事情,谁来做

我们经常看到一类bug,就是后端返回了null、undefined之类的数据,前端照样给展示出来。如下图。
在这里插入图片描述

这样的话会造成互相甩锅,前端怪后端数据返回的不对,后端怪前端未做兜底

除了背锅的原因之外,还有一些工作量的考虑,这个活前后端都可以做,为啥是我来做?

那么问题来了,前后端都可以做的事情,到底谁来着?

个人认为可以考虑按不同的维度考虑,各维度重要性从高到低

安全维度上需要前后端都需要做

事关安全、财产等比较重要的接口提交,前后端都需要做校验、兜底

而且由于前端易暴露代码的特殊性,后端需要承担更多

性能维度

如果有需要避免对服务器运算减负的话,可能需要前端来处理分摊负担

工作量维度

  • 比如公式处理,后端专门的spring库,实现起来简单,前端实现就比较复杂,这个时候应当后端来做
  • 比如一个接口需要多端使用的,那这个接口需要将各个字段格式化好,避免不同平台各自处理导致展示上出现差异

人员维度

比如后端最近很忙,那差不多的事情可以前端来做;反之也是一样

暂时想到了这些,后面想起别的再补上……

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot 接入websocket实现定时推送消息到客户端

目录说明代码实现说明 如标题&#xff0c;举例需求场景&#xff1a; 前端与后端websocket连接上后&#xff0c;多用户登录&#xff0c;后端根据不同用户定时发消息给前端用于展示 代码实现 1、 <dependency><groupId>org.springframework.boot</groupId>…

vit-pytorch实现 MobileViT注意力可视化

项目链接 https://github.com/lucidrains/vit-pytorch 注意一下参数设置&#xff1a; Parameters image_size: int. Image size. If you have rectangular images, make sure your image size is the maximum of the width and heightpatch_size: int. Number of patches. im…

git:详解git rebase命令

背景 今天无意中打开 git 官网&#xff0c;发现 git 命令还是很多的&#xff0c;然而我们常用的就那几个&#xff0c;今天来学习一个也不怎么常用的命令 rebase 官网链接 都说学一个东西最好的方式就是读他的 官方文档&#xff0c;这里我读了一遍&#xff0c;把一些核心的地…

读书思考:步步惊心的《技术陷阱》

《技术陷阱》这本书450页&#xff0c;43万字之巨&#xff0c;信息量密密麻麻&#xff0c;采集的资料极其丰富&#xff0c;复习了一遍大停滞、大分流、大平衡、大逆转时代&#xff0c;并展望未来。看完了有很多想法&#xff0c;随手写了下来&#xff0c;希望不是蹭热点。&#x…

vue 最详细教学篇(一)

文章目录前言前景Vue 的长期技术支持 (LTS)、终止支持 (EOL) 及其延长版服务学习vue 要掌握那些技能-为什么学习 vue走进vueHello World 起手提示&#xff1a;示例&#xff1a;示例解析编辑器 VSCodevsCode 插件正式使用 vue.js要使用 vue 就绕不开生命周期 下面是生命周期图&a…

全国青少年编程等级考试scratch一级真题2022年9月(含题库答题软件账号)

青少年编程等级考试scratch真题答题考试系统请点击电子学会-全国青少年编程等级考试真题Scratch一级&#xff08;2019年3月&#xff09;在线答题_程序猿下山的博客-CSDN博客_小航答题助手1点击绿旗&#xff0c;下列哪个选项可以实现播放马叫声并在声音全部播放完后&#xff0c;…

Java常见数据结构的排序与遍历(包括数组,List,Map)

数组遍历与排序 数组定义 //定义 int a[] new int[5]int[] a new int[5];//带初始值定义 int b[] {1,2,3,4,5};赋值 //定义时赋值 int b[] {1,2,3,4,5};//引用赋值 a[6] 1 a[9] 9 //未赋值为空取值 //通过下表取值&#xff0c;从0开始 b[1] 1 b[2] 2遍历 Test p…

C语言操作符详解 一针见血!

目录算数操作符移位操作符位操作符赋值操作符单目操作符关系操作符逻辑操作符条件操作符逗号表达式下标引用、函数调用和结构成员表达式求值11.1 隐式类型转换算数操作符&#x1f4ad; 注意/ 除法 --得到的是商% 取模&#xff08;取余&#xff09;--得到的是余数如果除法操作符…

CentOS 根路径下各个目录的作用及介绍

前言 很多小伙伴刚刚开始接触Linux系统时肯定和我一样&#xff0c;都很懵&#xff0c;黑黢黢的界面&#xff0c;一个个目录&#xff0c;没有图形化界面&#xff0c;看着难受&#xff0c;多接触了一些后会好受一些&#xff0c;不过&#xff0c;对各个目录的了解肯定也很基础&am…

若依框架---PageHelper分页(十)

在前几天的文章中&#xff0c;我们介绍了PageHelper的分页方法&#xff0c;研读代码定位到了ExecutorUtil.pageQuery(...)方法&#xff0c;并阅读到了其中的部分代码。 今天我们将看到重要的SQL修改代码。 getPageSql 我们接着看代码&#xff1a; if (!dialect.beforePage(…

2023爬虫学习笔记 -- 批量爬取图片

一、目标网址http://img.itlun.cn/uploads/allimg/180703/1-1PF3160531-lp.jpg二、右击图片获取图片地址http://img.itlun.cn/uploads/allimg/180703/1-1PF3160531-lp.jpg三、以二进制形式返回响应数据响应requests.get(网页,headers头) 响应内容响应.content四、存储二进制数据…

SpringBoot整合Mybatis的核心原理

0. 前言&#xff1a;1. 自动配置类MybatisAutoConfiguration&#xff1a;1.1. SqlSessionFactory的生成&#xff1a;1.2. Mapper的扫描和代理生成&#xff1a;1.2.1. MapperScannerConfigurer1.2.2. MapperFactoryBean1.2.3. getMapper生成代理对象2. 小结&#xff1a;0. 前言&…

Vue2仿网易云风格音乐播放器(附源码)

Vue2仿网易云风格音乐播放器1、整体效果2、使用技术3、实现内容4、源码5、使用图片1、整体效果 2、使用技术 使用了HTML5 CSS3进行页面布局及美化使用Vue2进行数据渲染与页面交互使用Axios发送http请求获取数据 3、实现内容 实现了搜索歌曲功能&#xff0c;输入歌手或歌曲关…

如果企业遭受到攻击应该进行怎样的处理

声明 本文是学习2018勒索病毒白皮书政企篇. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 政企遭遇勒索攻击分析 由于感染政企客户更有可能获得赎金&#xff0c;再加上勒索病毒本身也以服务器定向攻击为主&#xff0c;所以&#xff0c;2018年政企客…

构建工具tsup入门第三部分

&#x1f384;Hi~ 大家好&#xff0c;我是小鑫同学&#xff0c;一位长期从事前端开发的编程爱好者&#xff0c;我将使用更为实用的案例输出更多的编程知识&#xff0c;同时我信奉分享是成长的唯一捷径&#xff0c;在这里也希望我的每一篇文章都能成为你技术落地的参考~ 目录&am…

“慌不择路”周鸿祎,昔日大炮忙跟风【短评】

文|智能相对论作者| 凯文2月7日下午360经历两次急速拉升后涨停了&#xff0c;作为一个被套牢的股民&#xff0c;我是羡慕的&#xff0c;但理智告诉我&#xff0c;360的后续难以为继。360涨停的原因很简单&#xff0c;只因其在投资者互动平台上对类ChatGPT技术的布局做出了回应&…

安装Sentinel控制台与初始化演示工程

目录 一、Sentinel 二、安装Sentinel控制台 &#xff08;一&#xff09;sentinel组件由2部分构成 &#xff08;二&#xff09;安装步骤 三、初始化演示工程 四、流控模式 &#xff08;一&#xff09;快速失败 &#xff08;二&#xff09;关联资源 &#xff08;三&…

第四章——随机变量的数字特征

文章目录1、数字特征的定义2、数学期望&#xff08;均值&#xff09;2.1、数学期望的定义及性质2.1.1、定义2.1.2、性质2.2、数学期望相关例题2.3、Yg(X)的数学期望2.4、Zg(X,Y)的数学期望2.5、随机变量函数的数学期望例题3、方差3.1、方差的定义与性质3.2、相关例题3.3、切比雪…

3.2 埃尔米特转置

定义 对于复矩阵&#xff0c;转置又不一样&#xff0c;常见的操作是共轭转置&#xff0c;也叫埃尔米特转置Hermitian transpose。埃尔米特转置就是对矩阵先共轭&#xff0c;再转置&#xff0c;一般来说用三种符号表示埃尔米特转置&#xff1a; 第一种符号是AHA^HAH&#xff0c…

热门盘点 | 10款评分最高的项目管理工具

项目管理软件可以让项目经理及时掌握项目进展可把复杂的任务分解简单帮助项目经理及时了解整个团队进展随着现代项目需求日趋复杂和个性选一个好的项目管理软件还是很有必要的① PingCode国内研发项目管理软件PingCode&#xff0c;它是国内软件研发项目榜单中评分最高的项目管理…