What is the difference between front-end and back-end separation and non-separation?

Difference: When the front-end and back-end are not separated, the effects seen on the front-end page are controlled by the back-end, and the back-end renders the page or redirects, that is, the back-end needs to control the display of the front-end and the coupling between the front-end and the back-end. The degree is very high. In the separation of front-end and back-end, the back-end only returns the data required by the front-end, no longer renders HTML pages, and no longer controls the effects of the front-end. The coupling between the front-end and the back-end is relatively low.

#The operating environment of this article: windows10 system, thinkpad t480 computer.

Related recommendations: "Programming Video"

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

1. Front-end and back-end separation

• Front-end and front-end separation is an architectural pattern. To put it simply, the page cannot be seen in the back-end project (JSP | HTML) , the back-end provides an interface to the front-end, the front-end just calls the REST style interface provided by the back-end, and the front-end focuses on writing the page (html|jsp) and rendering (JS|CSS|Various front-end frameworks); Just focus on writing code on the backend.
• The core of front-end and back-end separation:The background provides data, and the front-end is responsible for display

1. Software architecture model

Most familiar with the MVC design pattern, Model—View-Controller Model-View-Controller

• How it works ? In layman's terms: you enter a URL (Request) on the page, where does this URL go? Just call the interface
  (REST style) . This interface is actually a piece of code (method) that accesses the backend. There are many methods in the backend.
• How to determine which method is accessed? The interface is defined, for example: 177.25.26.7/idp/user/login, where idp represents a
  service (a project), user represents a class, login represents the specific method to be called. Once you press Enter, the backend method is directly called, and the backend method goes to the database (MySQL| Oracle|Others) Get data. Each row of data in the database table represents an object, that is, a JavaBean, which is finally saved to the collection framework using pojo method ( List|Map|Set|etc.) , the method returns this set, then the result of calling this interface is (Response) gives you a result set, and the front end gets the data. Then it is displayed through the page (html|Jsp) . What the user sees is what the View layer does.

2. Reasons for separation of front-end and back-end

In the past, I heard that TDD (Test-driven development, test Driven development) can improve the quality of the code, so we implemented TDD; then, we heard that BDD (Behavior-driven development, behavior-driven development) can deliver products that meet business needs For software, we implemented BDD; later, we heard that DDD (Domain-driven design, domain-driven design) can separate business code and basic code, so we implemented DDD. Today, I heard that front-end and back-end separation is very popular, so we implemented front-end and back-end separation - this is the legendary HDD (Hype-driven Development).

Process: TDD -》 BDD -》 DDD =》 HDD

3. Advantages of front-end and back-end separation

The separation of front-end and back-end can well solve the problem of uneven division of labor between the front-end and front-end. More interactive logic is assigned to the front-end for processing, while the back-end can focus on its own work. For example, it provides API interface for permission control and calculation work. Front-end developers can use nodejs to build their own local server, develop directly locally, and then forward api requests to the background through some plug-ins, so that they can completely simulate the line. scene and decoupled from the background. The front-end can independently complete the entire process of interacting with users. Both can start working at the same time without relying on each other. The development efficiency is faster and the division of labor is relatively balanced.

The advantages are summarized as follows:

• Improve development efficiency
• Perfectly cope with complex and changing front-end requirements
• Enhance code maintainability

2. The difference between front-end and back-end separation and front-end and back-end non-separation

1. The front and back ends are not separated

• In the application mode where the front and back ends are not separated, the effects seen on the front-end page are controlled by the back-end, which renders the page or redirects, that is, the back-end needs to control the display of the front-end, and the front-end and The backend is highly coupled.
• This application mode is more suitable for pure web applications, but when the backend is connected to App, App may not require the backend to return a HTMLWeb page, but just the data itself, so the original interface of the backend that returns the webpage is no longer applicable to the front-end App application. In order to connect to the App backend, another set of interfaces needs to be developed. .

2. Separation of front-end and back-end

• #In the application mode of separation of front-end and front-end, the back-end only returns the data of the front-end. The required data is no longer rendered, the HTML page is no longer rendered, and the front-end effect is no longer controlled. As for what effects front-end users see and how the data requested from the back-end is loaded into the front-end, it is up to the front-end itself. Web pages have their own processing methods, and App has their own processing methods. method, but no matter which front-end is used, the required data is basically the same, and the back-end only needs to develop a set of logic to provide data to the outside world. In the application model where the front and back ends are separated, the coupling degree between the front end and the back end is relatively low.
• In the application model where the front and back ends are separated, we usually call each view developed by the back end an interface, or
API
• . The front end adds, deletes and changes data through the access interface. check.
If you want to read more related articles, please visit

! !

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