当前位置: 首页 > Web前端 > JavaScript

前后端数据接口协同提升效率的实践

时间:2023-03-26 22:36:23 JavaScript

作者|YPGuide:在大多数场景下,前后端可以在开发前约定好数据接口,双方可以围绕约定并行完成开发和自测。但是,在大型系统中,有些后端模块有时并不直接与前端相连,它们之间可能存在其他模块的一些处理过程。为了保证数据的真实性和有效性,前端需要搭建完整的环境来调试渲染效果,导致效率和研发体验不断。恶化。本文主要介绍百度商业前端团队通过接口平台与直接数据能力相结合,优化前端前端协同效率,有效提升团队协同效率的尝试。全文2533字,预计阅读时间7分钟。一、实践计划我们的实践主要分为两个阶段:1、协同提升效率;2.品质保证&体验优化。其中,协作效率提升包括基础能力建设和合作模式升级实施;质保&研发经验基于协同效率提升,针对业务质保和极端场景遇到的问题提出一些解决方案。2、数据直接接入能力我们团队维护的后端模块是一个BFF层,负责适配上游和前端模块的数据,与前端业务密切相关。但是由于这一层和前端之间存在一些策略和聚合处理逻辑,所以在开发和自测过程中不能直接使用存根数据来预览效果。前端只能维护多套调试功能的环境,环境搭建除外。除了耗费大量时间,模块连通性检查、资源协调、环境更新等都会影响前端的工作效率。为了减少维护环境带来的能源消耗,我们在实践初期曾多次尝试优化环境管理,但效果不是很理想。provider也在苦苦应对各种问题,所以我们想能不能不再维护线下环境,而是把开发和测试的工作转移到线上环境,也就是让后台可以处理线上环境同时。线上线下数据请求,让前端在连接线上环境时可以看到线下数据的渲染结果。基于这个思路,我们在后端隔离了一组侧支逻辑,定时从Redis中拉取线下素材数据和对应的设备信息,其中设备信息就是某个手机或者某个浏览器的唯一id,当这些devices对应的请求到达后,后端将其视为特殊请求,将原来的请求替换为离线数据,然后继续进行后续处理。前端只需要将数据和设备信息写入Redis,就可以接收到离线数据的处理结果,这样前端就像使用了一套常驻环境,永远保持最新,不会再被被各种环境维护问题所消耗。双方在协作过程中可以更加关注业务逻辑本身。3、合作模式升级借助直接数据接入能力,我们成功解决了环境维护难的问题,大大提升了联调阶段的效率,但实际上我们在合作中还存在一些问题发展阶段。在能力建设的初期,我们只支持替换请求的数据,在后端代码上线之前,前端无法开始开发。这样的串行协作模型显然是有问题的,所以我们想是否可以基于直接数据访问能力扩展一个系统。一套常规打桩服务。为了实现存根服务,我们在需要作为存根输出到前端的数据上加上一个特殊的标识。当后端识别到带有特殊标识的数据请求时,会跳过后续的处理逻辑,直接将结果返回给下游模块。这种替换返回模式允许后端在开发之前将离线存根数据交付给前端,从而实现前后端并行协作。为了降低学习和运营成本,我们将上面介绍的能力打包成一个平台供团队使用。后台可以根据项目的维度编辑下发数据,前台可以使用这些数据与设备连接,然后直接在APP上进行。刷新看看效果。4.数据分类为了改造前后端协同模型,我们在开发过程中实际使用的是存根数据,这可能会导致数据和最终真实逻辑输出的结果存在差异,而这些差异可能会暴露在网上,影响业务功能,如果没有有效的措施限制数据的使用,那么质量风险将变得难以控制。为此,我们将数据的使用按照规则和应用场景分为三种:人工生成、离线后台生成、在线后台生成。可以看出,随着项目的推进,数据约束规则逐渐收紧。在开发前期,后端可以利用编辑生成的存根数据快速交付给前端,让前端完成单模块开发的自测;在联调阶段,我们的数据是由后端开发的代码逻辑生成的。由于这部分数据需要保证一定的真实性,不再支持编辑,让数据匹配后台即将上线的逻辑;后台上线后,前台可以通过在线检索系统采集真实素材数据,扫码预览效果等,从数据和代码逻辑上保证真实性。通过上述对数据分类的规划,我们保证协同流程高效并行运行,同时始终遵循一套流程标准,可以有效保证业务交付的质量。5.优化平台体验经过前三步的优化,我们已经解耦了大部分项目中的前后端协同。但是,在一些复杂的项目中,这个过程会降低工作效率。这是因为复杂的项目往往需要覆盖的功能点更多,相应的数据组合也更多。我们发现有些项目需要200多条数据,所以后台会花费大量的时间和精力去录入和编辑数据。在这种极端需求下,数据准备时间成为效率瓶颈,导致研发体验急剧下降。为了解决这个问题,我们围绕“分片”的概念,支持批量编辑数据的功能,让后台在编辑数据的过程中,将编辑过的操作以“分片”的形式保存下来。每一个“片段”都包含了编辑的位置和价值,这些“片段”可以持续应用于多个数据,使编辑工作从多次变为一次,大大减少了重复工作量。同时,由于前端需要频繁校验同一个功能,比如版本兼容、标题长度兼容等,为了更好的支持这个需求,我们支持“分片”版本功能,即同时在维护“fragment”的操作位置不变的前提下,为“fragment”赋不同的值,前端通过切换“fragment”的不同版本,可以快速获取同一功能下不同细节的数据”来快速验证一些兼容效果。6.总结前后端数据接口的协同升级让我们的团队能够更加稳定高效的完成产品迭代,团队的项目平均交付时间减少了超过50%,目前已经有上千个业务项目基于该方案完成了开发测试和线上回归工作,我们也在不断探索可能在产品视觉验收、销售问题验证等其他方面的落地,希望在更多场景下提升团队协作效率。——————END————————推荐阅读:前端状态管理与时间穿梭:San实践篇百度App低端机优化-启动性能优化(概览篇)海量数据的云管理、百度沧海存储产品分析和百度统计实践中的增强分析。百度基于TLS1.3的安全通信协议bdtls。介绍百度用户产品流批量整合的实时数仓实践。如何控制资源浪费?百度云原生成本优化最佳实践