百度工程师教你快速提升研发效率小技巧

Posted 2022-04-13 百度Geek说

01架构设计：前后端分离架构

传统MVC模型应用中，前后端在开发、部署环节存在不同程度依赖和耦合，随着业务体积不断膨胀，不仅导致开发效率低下，代码也难以维护，前后端完全分离架构则能很好解决这些问题。

前后端分离架构模式实现：在开发环节进行前后端代码存放分离、开发职责分离，在部署环节进行应用部署分离，前后端之间通过HTTP请求进行通讯 。前后端分离的开发模式与传统模式相比，提升开发效率、增强代码可维护性。我们在实施过程中主要从以下几个方面切入：

一、职责分离：前后端代码库分离，后端专注于后端控制层（RestfulAPI）、服务层、数据访问层；前端专注于前端控制层（Nodejs）、视图层。

二、开发方式：前后端分离是各自分工，并行协同敏捷开发，后端提供Restful API，并给出详细文档说明及测试用例，以保证API的可用性，降低集成风险；前端人员发送API请求(GET, POST等)获取数据（JSON，XML）进行页面的组装和渲染。

三、交互方式：前后端之间通过HTTP进行交互，API完成之前，前端人员会使用mock server进行模拟测试，后端人员使用相应工具进行API单元测试（如：junit），不用互相等待；API完成之后前后端再对接测试。当然并不是所有的接口都可以提前定义，有一些是在开发过程中进行调整的。

四、部署方式：前后端资源进行分离部署，前后端可利用nginx做反向代理，如：Java + nodejs + nginx 方式进行交互。

02辅助工具：巧用脚手架

软件工程领域，脚手架可以解释为帮助开发人员在开发过程中使用的开发工具、开发框架，使用脚手架你无须从头开始搭建或者编写底层软件，帮助我们大幅减少重复工作。

在工作中，当项目涉及多人配合，非研发工作量就会占很大比例，这些工作很枯燥，却又不得不做。在常规的Web团队开发工作中，我们要频繁对测试数据增删查改，要维护每个接口的文档，要对未完成的接口进行Mock，这些工作甚至占用时长比编写代码还要久。脚手架工具，能帮我们解决这些麻烦，下面举几个例子：

一、测试数据修改：常用的有phpMyAdmin，几分钟即可配置完成，生成一个可对mysql进行管理的后台，可视化便捷管理测试数据，PM也能轻松使用。

二、文档的生成：有很多配置化的工具，接口文档可选择TypeDoc、Doxgen等，功能文档可选择mkdoc，通过简单的配置，就能完成文档编写工作。

三、接口Mock：可选择Rap、Nei、Easy-Mock等，单独前端也可以用mock.js，前后端开发解耦，互相不阻塞等待，也减少很多沟通成本。

由于程序员都很讨厌重复，每个类似问题都会有很多工具。上面只是列出几个常见场景帮助打开思路，遇到其他场景也可以多去搜索工具，尽量自动化解决。

03编码技巧：高质量前端编码

提升前端代码质量，是提升前端研发效率的重要举措。合理的代码逻辑 、模块设计以及完备的工程化手段，能够保证模块稳定快速的迭代交付。

在实际开发中，常见的优化方案有以下几点：

一、注重逻辑抽象**：同样的代码在多处重复出现，这样显然会提高代码的维护成本。我们应当对重复代码进行逻辑抽象，提升代码复用性，并对这些抽象做好单元测试。

二、合理设计模块：新增一个简单功能时，需要修改多处代码。这说明功能缺少封装，或者模块划分是不合理的。应当重新设计和划分模块，或者封装通用的功能 、沉淀机制。

三、去除过多全局依赖：只修改了一处功能，却在其他意想不到的地方引发了Bug。这常常出现在较为复杂的模块中，新增功能依赖某种全局状态，而模块中分布着太多的全局变量和事件中心。面对这种情况，我们应当改造旧代码，逐渐去除对全局状态的依赖，并创建不依赖全局状态的新机制，在新的需求中去使用它。

四、一个变量只描述一种含义：当同一个变量的内容和含义随着程序运行不断发生改变，会使该变量的实际取值难以预测，也就很难推断所在程序的行为。所以当值含义发生变化时，应当用新的变量指向它，变量名描述新值的内容和含义。

五、git提交规范：为了保证需求的高效率交付，团队应当制定统一的git提交规范，便于查找、合并和回滚。提交应当遵守 commitizen 规范，我们可以通过引入 commit 工具管理提交，以及增加流水线任务阻塞最终发布，来强制保证提交的规范性。

04测试提效：自动化测试提速

在前端自动化测试的过程中，case的操作步骤之间需要等待页面的加载完成。页面的加载速度受各种不可控因素的影响：包括接口响应速度、网络速度、设备性能、前端渲染以及过渡动画时长等。为了确保测试用例的执行稳定，在书写case的过程中通常会设置一个比正常耗时更长的等待时间，这也就导致了自动化测试用例执行过程缓慢。

为了提高用例的执行效率，可以在执行过程中使用计算机视觉技术来实现自动判定页面是否加载完成。实现的思路如下：由于在发生设备交互后，设备的界面会从最初的稳定态过渡到一个空白的中间态，然后再由中间态逐步加载完成进入下一个稳定态。根据此现象可以利用驱动（例如 minicap）快速地截取设备界面的图像信息，然后通过实时分析当前界面的页面空白信息，以及结合前后多帧之间的变化情况判断页面是否达到稳定状态。

计算机视觉技术的引入，实现了不同环境下的自适应。在加载速度较快场景降低了等待时长提高效率，在加载较慢场景增加了等待时长确保case的稳定性。

推荐阅读：

百度一线工程师浅谈日新月异的云原生

【技术加油站】揭秘百度智能测试规模化落地

【技术加油站】浅谈百度智能测试的三个阶段