Netease NEI provides a complete solution to the problem of front and back end separation

Nowadays, product development is generally carried out in accordance with the process of interactive draft, visual draft, development, testing and release. This time we will focus on the development area, both client side and server side.

When there is no interactive draft, the development can also do some preliminary preparation, such as the technology selection and environment construction of the front and back end, and the process of modeling of the back end.

In the development process, the ideal state should be the parallel development of the front and back end, which is also a popular concept in the industry, but it is still difficult to achieve for some traditional enterprises without technological accumulation.

In the whole process, the front end uses the Mock Server back end for interface testing, the API contract is agreed in the middle, and then the front and back ends are developed in parallel, and finally the joint tuning is carried out. In theory, the cost of tuning is minimal because the Mock Server is developed according to API contracts, and the back-end defines interfaces by convention as well.

After the interaction draft is designed, it is the turn of interface design. Traditional interface documents include IM, TXT, Word, Wiki and Swagger. They are often unclear or poorly formatted, which can be effectively solved by using an interface management platform.

One obstacle to fully separating the front and back ends is how to handle templates. Templates are run in a back-end environment and come in FTL, PHP, EJS, and more. If a back-end environment is involved in front-end development, then this is not a complete separation of the front and back ends. To do this, we implemented a Mock Server that parses templates and retrieves real data from templates, such as logged-in user data, while using Mock data alone makes some business logic impossible.

There needs to be templating in front and back end separation, so there needs to be page specifications in addition to interface specifications. There is also a cost to implementing Mock Server manually, so we provide a companion build tool for parsing templates and Mock interfaces.

From the beginning of the interaction phase, the interface can be designed according to the interaction draft, and then the initialization code can be generated through the build tool. After the completion of the front and back end development, the self-test can be carried out. During self-test, since the front-end Mock data is generated locally or through platform-provided interfaces, you can modify the data for more full self-test. The back end is primarily a test of interface compliance, and we provide tools for that. Ultimately, this can effectively reduce the cost of joint investigation.

Interface designers should first understand the system function very well, and secondly have dabbled in the development of the front and back end, understand the front-end function realization and back-end interface realization. So I personally prefer the role of front-end architect, but many companies don’t have one.

Interfaces must be designed in accordance with industry specifications, such as Restful interface specifications. Then be clear and don’t leave out important information.

In the actual development process, the back-end will establish the data model in advance when creating the interface, and carry out some additions, deletions, changes and checks. The front end also has a corresponding data model abstraction, which has the advantage of reuse, specification, and automation.

Data specifications on the NEI platform are defined through the interface, then exported using NEI Toolkit, and finally started using Express.

Interface specifications in NEI define the relationship between requests and data; Page specifications define the relationships between pages and templates and interfaces. The template specification defines the relationship between templates and data.

Figure is the simulation container of NEI, interface, page are visually displayed. Its main features include page mocks, interface mocks, listening for static files, and other features frequently used by the front end.

The above image shows the Mock data file generated by the build tool, where data.json is the Mock value and data.js is mainly used for interception. The front-end self-test can modify the data.json data and the data.js filter.

NEI integrates interface testing capabilities, such as verifying that field types match, field values match definitions, and fields are missing or redundant, as well as automatically generating test reports and batch-running use cases.

In theory, the only difference is the address of the server environment. The local development uses the Localhost server, and you only need to replace the Localhost with the corresponding address to use other environments. In general, you don’t set the Localhost address, you just focus on the following address.

You only need to modify the configuration file server.config.js to change the address.

We also explored and practiced other aspects, including migrating older projects, working with teams, supporting industry standards, supporting test engineers, and supporting typical products.