What is front-end and back-end separation?

The separation of front-end and back-end is to separate data operation and display. The front-end focuses on data display, displaying the data intuitively through text, pictures, or icons; the back-end focuses on data manipulation. The front end sends data to the back end, and the back end modifies the data.

[Related learning recommendations:Front-end video tutorial]

In the process of website development, before and after The dividing line between the two ends seems to be a matter of debate. Searching the Internet for what front-end and back-end separation is, there is a lot of information about it, and the description is unclear. From the beginning, there was no concept of front-end and back-end at all, and then it became entangled.

Traditional separation method

When I mention front-end and back-end in my mind, basically the first difference that appears is:The back end deals with the database and the server, and the front end deals with the browser.There seems to be no problem, everyone thinks so. Of course, there is nothing wrong with this. We have always thought that we only use the browser as a boundary to separate these two parts of code. But the original intention of front-end and back-end separation is to separate the responsibilities of front-end and front-end developers and solve the problem of development model at the same time. But it seems that their responsibilities were not clear before or even now. Although the front end deals with the browser, the page the browser finally gets is just a temporary static page generated by the server through a template. So, the backend is actually involved because it has to deal with templates. Of course, there are generally two traditional development collaboration models:

One is that the front end writes a static page first, and after writing it, let the back end set the template. Static pages can be developed locally, and there is no need to consider business logic. You only need to implement View. The disadvantage is that you also need a back-end template, and these front-end codes need to be browsed by the back-end to avoid errors.

Another collaboration mode is that the front-end directly writes the template. The problem with this is that the front-end writing process relies heavily on the back-end environment. If the back-end is not finished writing In this case, the front end is almost impossible to work.

Obviously there seem to be many problems with both methods, but at least this is the model adopted by most companies so far. They distinguish the development of front-end and front-end from the physical layer, while downplaying the logical color of the front-end. Since what the front-end does is to implement a static version of a page, most companies find some work for their front-end engineers. If you look at the current requirements for front-end engineers when companies are recruiting, in addition to basic page production skills, they also have additional design responsibilities. For example, know at least one back-end programming language NodeJs or PHP or Java.

At this point, we originally thought we had separated the front-end and back-end, but when it comes to the embarrassing issue of templates, the front-end and back-end engineers have definitely suffered a lot. At present, writing HTML directly in jsp or php should be rare. The separation of front and rear ends is on track.So how to separate, who occupies more and who occupies less, depends on the technical level of each company.When a front-end development engineer is good, he just thinks about front-end mvc and mvvm. If the backend is awesome, I just think, you give this prototype to the backend and don’t worry about the rest.

Traditional development method

The previous PHP code was written in the HTML code. There are no pure PHP files and HTML files. Here is the difference between the front and back ends. Separation, roughly means php and html, you are in me, and I am in you.

However, we encountered many problems during development. Front-end (html, css, js) engineers PHP code may not be readable, and PHP engineers are not very familiar with CSS content, so later people came up with a way to separate the code! This allows everyone to perform better in their respective fields, although it consumes a certain amount of time. Efficient, but friendly to developers from a certain perspective.

The separation of front-end and back-end is not as complicated as said on the Internet.

1.First of all, you must know that all programs are based on data. A program without data has no practical meaning. The essence of a program is the addition, deletion, modification, and query of the program.

2.Separation of front-end and back-end is to separate data operation and display. The front-end focuses on data display, displaying the data intuitively through text, pictures or icons. The backend focuses on data operations. The front end sends data to the back end, and the back end modifies the data.

3.The back-end generally uses java, c# and other languages. The current node belongs to JavaScript and can also perform back-end operations. There is no point in cracking the language here. The backend is used to connect to the database and operate on the data.

4.The backend provides an interface for the frontend to call to trigger the backend's operation on data.

The basic principle is this. The language may be inaccurate, but the thinking is correct.

So the core of website development is basically:

html css: page display

javascript ajax (this is part of the browser, you can Called through javascript): page interaction, logic processing

Usual development framework selection:

Simple website: jquery bootstrap

Backend management system: angularjs jquery bootstrap webpack

Complex products: react redux webpack

The above is the detailed content of What is front-end and back-end separation?. For more information, please follow other related articles on the PHP Chinese website!