Example tutorial on separation of front-end and back-end

As the company increases its developers and the number of projects, the cost of front-end and back-end communication continues to increase. The original project's front-end and back-end were not separated. As a front-end, you also need to have some understanding of back-end languages ​​​​such as PHP. This greatly increased the learning cost of front-end development, especially when you encounter database errors and do not understand the reason, spending a lot of time. solve. Therefore, based on our current business needs, we started to try to separate the front and back ends from some new projects.

1) Code separation. The front-end and back-end codes are separated using independent project directories. The front-end development environment does not need to configure PHP or Java environment. All project codes are managed using Git.

2) Development process improvement. The development process will be divided into local [local development], dev [front-end and back-end joint debugging], beta [QA testing] and prod [online release].

Nodejs

Webpack

Command pad

HostProfiles

Git

Sftp

1) Determine the requirements and design the interface.

In the entire development process, after the requirements and design are determined, the front-end and back-end must first design the interface, determine the parameters of the corresponding interface and the JSON structure of the returned data, and then develop independently.

2) Local development

The local development environment can be built with the help of Grunt, Gulp, and Webpack. We usually use Webpack to achieve it, because Webpack can It supports modularization, has relatively good support for development such as React and VUE, and is relatively popular in the community. Problems can be solved relatively quickly. Using Webpack and Webpack-dev-server, you can quickly build a local service that supports hot loading and refreshing of code. Of course, you can build simple services through express.

At this time we usually use Command Pad to manage the command line, such as the commonly used npm start, or npm run dist, etc., which is convenient and fast.

Image resources are managed in a unified directory and deployed to Qiniu in advance.

Local development will use the mock data method to simulate the interface and develop the page logic. In some projects where jquery exists, we use jquery.mockjax.js as the mock tool. Usually, an api directory is created to centrally manage all interface data, and is loaded and blocked uniformly through an index.js.

3) Front-end and back-end joint debugging

After the front-end and front-end are separated, the joint debugging of front-end and back-end data will be very simple and efficient. You only need to deploy the code to DEV respectively. on the server, and then use the development tools provided by chrome to debug. If you encounter problems during the debugging process, you can modify and submit them at any time. The front-end will not rely on the back-end development environment. Even if there is a problem with the DEV environment, the back-end can handle it in a timely manner with a clear division of labor. Especially after the introduction of Docker, we can easily create multiple DEV development environments, so that even if multiple colleagues develop a project, they will not affect each other's joint debugging of DEV.

When releasing the code, Sublime Text's plug-in sftp was introduced to directly push the locally compiled code to the DEV server, making the whole process faster.

4) QA test

Entering the QA test phase, it is almost similar to the joint debugging phase, except that it provides an online-like environment, which is provided separately For testing use.

5) Online publishing

Before publishing, the code needs to be compressed and packaged, which is also done with the help of Webpack. What is worth mentioning is that when a bug occurs online, we need to map the online code to local for debugging, using HostProfiles and nginx. Use the branch function of git to create a hotfix branch for processing.

This is a simple front-end and back-end separation solution. It is just a solution proposed for the company's existing project situation. Of course, there are many places that can be improved. For example, Taobao's Midway Plan adds a middle layer of nodejs for template rendering and business processing.