With the development of the Internet, time is always racing against time, and faster research and development means that they can seize the market opportunity. Therefore, research and development efficiency has always been one of the core issues that r&d engineers pay attention to. This article takes the Web project as an example, from the perspective of architecture design, auxiliary tools, coding skills, test improvement and so on, gives some practical tips that can be quickly implemented, hoping to be helpful to everyone.

01 Architecture design: Front and rear end separation architecture

In traditional MVC model applications, the front and back ends have varying degrees of dependence and coupling in development and deployment. With the expansion of business volume, development efficiency is low and the code is difficult to maintain. The completely separated architecture of the front and back ends can solve these problems well.

Implementation of front-end and back-end separation architecture mode: front-end and back-end code storage separation and development responsibility separation in the development link, application deployment separation in the deployment link, communication between front-end and back-end through HTTP request. Compared with the traditional mode, the development mode of front and back end separation improves the development efficiency and enhances the maintainability of the code. In the process of implementation, we mainly start from the following aspects:

Separation of responsibilities: separation of the front and back end code base, back-end focus on the back-end control layer (RestfulAPI), service layer, data access layer; The front end focuses on the front end control layer (Nodejs), view layer.

Ii. Development mode: The separation of the front and back ends is their respective division of labor, parallel and collaborative agile development. The back end provides Restful API, and provides detailed documentation and test cases to ensure API availability and reduce integration risks; Front-end personnel send API requests (GET, POST, etc.) to obtain data (JSON, XML) for page assembly and rendering.

3. Interaction mode: The front and back ends interact with each other through HTTP. Before the API is completed, the front end personnel will use mock Server for simulation test, and the back end personnel will use corresponding tools for API unit test (such as junit) without waiting for each other. After the API is completed, the front and back end will be tested. Of course, not all interfaces can be defined in advance, and some are tweaked during development.

4. Deployment mode: The front-end and back-end resources are deployed separately. The front-end and back-end resources can use Nginx as reverse proxies, for example, Java + NodeJS + Nginx for interaction.

02 Auxiliary tools: Skillfully use scaffolding

In the field of software engineering, scaffolding can be interpreted as a development tool or framework that helps developers to use in the development process. With scaffolding, you don’t have to build from scratch or write the underlying software, which helps us to greatly reduce the amount of rework.

At work, when a project involves multiple people working together, a large proportion of non-r&d work is done, which is boring but necessary. On a regular Web team, the constant work of adding and deleting test data, maintaining documentation for each interface, and mocking unfinished interfaces can take longer than writing code. Scaffolding tools can help us solve these problems. Here are a few examples:

First, test data modification: commonly used phpMyAdmin, can be configured in a few minutes, generate a background for mysql management, visual and convenient management of test data, PM can also be easily used.

Second, document generation: there are many configuration tools, interface documents can choose TypeDoc, Doxgen, function documents can choose MKdoc, through simple configuration, you can complete the document writing work.

3. Interface Mock: Rap, Nei, easy-mock, etc., can be selected, and the separate front-end can also use mock.js. The development of the front and back end is decoupled, which does not block each other and reduces communication costs.

Because programmers hate repetition, there are many tools available for every similar problem. The above list is just a few common scenarios to help open up the idea, meet other scenarios can also go to search tools, try to automate the solution.

Coding tips: High quality front-end coding

Improving the quality of front-end code is an important measure to improve the efficiency of front-end research and development. Reasonable code logic, module design and complete engineering means can ensure stable and fast iterative delivery of modules.

In actual development, common optimization schemes are as follows:

Focus on logical abstraction: the same code is repeated in multiple places, which obviously increases the maintenance cost of the code. Logical abstractions should be made from repetitive code to improve code reuse and unit test those abstractions.

Ii. Reasonable design module: when a simple function is added, multiple codes need to be modified. This indicates a lack of encapsulation of functionality or improper module partitioning. Modules should be redesigned and partitioned, or common functionality and precipitation mechanisms encapsulated.

Remove too many global dependencies: Change one feature, but cause bugs in other unexpected places. This is often the case in more complex modules where new functionality depends on some kind of global state, and there are too many global variables and event centers distributed in the module. In this case, we should adapt the old code to gradually remove the dependency on global state and create new mechanisms that do not rely on global state to use it in new requirements.

Four, a variable describes only one meaning: when the content and meaning of the same variable constantly change with the operation of the program, it will make the actual value of the variable difficult to predict, and it is difficult to infer the behavior of the program. So when the meaning of a value changes, you should refer to it with a new variable whose name describes the content and meaning of the new value.

5. Git commit specification: To ensure efficient delivery of requirements, teams should develop a uniform Git commit specification that makes it easy to find, merge, and roll back. Commits should comply with the Commitizen specification, which can be enforced by introducing a COMMIT tool to manage commits and adding pipeline tasks to block final releases.

04 Test efficiency improvement: automatic test speed up

In the process of front-end automated testing, the operation steps of case need to wait for the completion of page loading. Page loading speed is affected by a variety of uncontrollable factors, including interface response speed, network speed, device performance, front-end rendering, and transition animation duration. In order to ensure stable test case execution, it is common to set up a longer than normal wait time during case writing, which leads to the slow execution of automated test cases.

In order to improve the efficiency of use case execution, computer vision technology can be used to automatically determine whether the page is loaded. The implementation idea is as follows: After device interaction, the interface of the device will transition from the initial stable state to a blank intermediate state, and then gradually load from the intermediate state to enter the next stable state. According to this phenomenon, drivers (such as MinicAP) can be used to quickly intercept the image information of the device interface, and then determine whether the page has reached a stable state by analyzing the page blank information of the current interface in real time and combining the changes between multiple frames before and after.

The introduction of computer vision technology realizes self-adaptation in different environments. In the scene with fast loading speed, the waiting time is reduced to improve efficiency; in the scene with slow loading, the waiting time is increased to ensure the stability of the case.

Recommended reading:

Baidu front-line engineers talk about the changing cloud yuan

【 Technology gas station 】 Reveal Baidu intelligent test scale landing

Brief discussion on the three stages of Baidu intelligent test