Quickly understand the essence of front-end and back-end separation (with architecture diagram)

1. The essence of front-end and back-end separation

People often fall into a misunderstanding and try to describe it with specific technologies What is the concept of front-end and back-end separation? This is not the answer. For example, when it comes to separation of front-end and back-end, it means Laravel Vue. This is not a completely correct understanding!We asked: Why do you solve the problem in this way

The answer is: How do you do it specifically

Separation of front and back ends

Yes: When software technology and business develop to a certain extent, an upgrade must be carried out in project management work. It is a necessity and not an accident! To put it bluntly, it is an adjustment to the company's departmental structure. [Related recommendations:webfrontend]Why did this change happen?

Because the initial software development actually focused on the back-end, because the page functions in the early days of the Internet were relatively simple. They only needed to display data and then provide basic operations! Therefore, the entire project focuses on the background business logic processing. However, with the development of business and technology, front-end functions are becoming more and more complex and important, and at the same time, the front-end technology stack is becoming more and more abundant! In this way, we encountered more and more problems during development, and it became more and more difficult to solve these problems. At this time, we found that front-end development could not be scattered throughout the system architecture as before. The front-end should also be engineered, modularized, and systematized like the back-end.

How to do this?

is to set up a dedicated front-end department to centralize the front-end development that was originally mixed with back-end programmers to form a pure front-end department. Specialize in research and development of engineering front-end technology and iteratively upgrade new technology systems to solve problems in projects and adapt to technology development. So in one sentence:

In order to adapt to the needs of technology and business development

. Front-end development needs to be separated from the previous organizational structure where the front-end and back-end were mixed together to form independent front-end and back-end departments. This is the reason for the separation of front-end and back-end.

2. Do not use front-end and back-end Disadvantages of separation

Separation of front-end and back-end is currently a popular development method, and most of the Internet will be developed using front-end and back-end separation!

Separation of front-end and back-end means

The front-end code and back-end code of an application are written separately

In the traditional Web development process, the View layer is not created by the back-end developer.

Independent

CompletedFront-end development——>HTML static page——>Back-end developmentThe front-end will make the page. If we need to develop the back-end, we will embed the front-end page into The same applies to View templates or using other templates! Tags also need to be added to integrate the data. Because the core is: how to add the data returned by our backend to the page
If we encounter some problems in the backend page at this time, we send the template file to the front-end development, and the front-end developer cannot understand the template. At this time, the front end is not easy to solve, and the back end is not easy to solve either. This communication and development efficiency is very low! The front-end and back-end coupling is too high, making development too troublesome!

The solution is very simple: just use the

front-end and back-end separation

method to develop!The front-end only needs to write the client code independently, and the back-end only needs to write the server-side code independently to provide the data interface.The front-end accesses the back-end data interface through AJAX requests and displays the Model in the View.

Front-end and back-end developers only need to agree on the interface documents (URL, parameters, data types...) in advance, and then develop them independently

The front-end can fake data for testing, and there is no need to rely on the back-end. Finally, complete the front-end and back-end integration

, truly realizing the decoupling of front-end and back-end applications! Greatly improve development efficiency

Single——> Front-end application Back-end application

Front-end application: Responsible for data display and user interaction

Back-end application: Responsible for providing data processing interface
Front-end HTML——>Ajax——>RestFul back-end data interface

3. Front-end and back-end separation architecture diagram

Summary ：

Separation of front-end and back-end is to split a single application into two independent applications: front-end application and back-end application, and perform data interaction in JSON format.

The above is the detailed content of Quickly understand the essence of front-end and back-end separation (with architecture diagram). For more information, please follow other related articles on the PHP Chinese website!