Abstract: In this article, we will discuss why the front and back ends are separated in software development, how to separate the front and back ends, and how to decouple.
To put it simply, it is to simplify the complex problem and transform a problem from 0 to N into N problems from 0 to 1. Another similar argument is "decoupling."
For example, we received a customer request and asked to write an application. This application has page switching, data interaction of the corresponding page, data acquisition, and data calculation. If these functions are placed in a single application However, from the perspective of the overall situation, this single application is more complicated.
In order to reduce this complexity, the first thing we have to do is to separate the front and back ends. The definition of the front and back ends is generally like this: the front end is responsible for page path management, display and management of page corresponding data, etc.; back end Responsible content mainly includes data provision, data calculation, security management, etc.; front-end and back-end communications are generally implemented through HTTP requests; of course, there are exceptions, for example, some functions may require real-time, like chatting Functions, the function of sharing documents, the function of drawing board sharing, the function of multi-person collaborative operation, etc., need to be carried out through a communication mechanism such as socketio.
Let's break it down again, the single program framework model will be MVC (Model-View-Controller) structure. After the front and back ends are separated, there will be Model/Entity-Repository/Service-Controller at the back end and View-Model-API calls at the front end.
Looking at the front-end part, View mainly refers to the page of the web page, the page of the mobile phone (Android is Activity, Layout and View, etc., iOS is View Controller and UIView, etc.), if you use cross-platform technology (such as React Native, Flutter, Xamarin, etc.) It is also inseparable from the above concepts, which are similar. Of course, this part of the processing is inseparable from the data model and API calls. After handling these, the front-end tasks will be done.
Looking at the back-end part again, interface-related processing is no longer a back-end task. The back-end only needs to provide the data needed by the front-end through the API. Controller is used to define these APIs. This part will analyze or calculate the input and output models of the front-end. The specific processing method has the following factors to consider: The type of request such as GET, POST, PUT, DELTE, PATCH, etc.; Data From Body, Data From Route, Data From Form, etc.; after the data processing is completed, one is returned through API, and the other is to update the data source. The data source here can be databases such as SQL and NoSQL, or message middleware such as Kafka, or It can be a data buffer server such as Redis, etc. Through the above description, we can see that the back-end tasks have become more lightweight and logically simpler.
Therefore, by separating the front and back ends, we always maintain the complexity of the front and back ends within a controllable range. If we always use this concept in software development, we will greatly expand our software development efficiency and program quality. Because solving an N difficulty problem is obviously much more difficult than solving N 1 difficulty problems. For an N-difficulty problem, after we break it down into N 1-difficulty problems, we can break each one step by step, step by step, calmly and confidently in our work, because we always use the simplest method to solve the problem. If you encounter a complicated problem, divide it into multiple difficulty 1 problems, and so on. To put it simply, it is to ensure that when solving problems, we do not fight unprepared battles, always keep our feet on the ground, divide and conquer, and avoid putting ourselves on the stove.
After the complexity is reduced, the maintenance cost and expansion cost of the entire project will be very low. Our ability to control project development will also improve a lot.
Let's talk about the problem of data flow, which mainly occurs in the front end. This part of the processing will be directly related to the complexity of the front-end programming. There are two-way data flow and one-way data flow in the three front-end frameworks, and React only supports one-way data flow. But now with the Hooks mechanism, you can modify the data by passing Setter and Getter references. This mode of passing parameters to other components actually increases the complexity of the program, because the layer-by-layer transmission enhances the coupling between components.
So how to solve this problem?
In Angular, this problem can be solved by defining Getter and Setter in the Service. Every component that needs to manipulate this data can rely on injecting this Service. With this Service, you can easily read and update the data. For data monitoring, you can define a Subject in the Service. After monitoring the data changes, you can update the interface, send requests to the server, etc. In this way, the coupling between the components is greatly reduced.
Let me talk about one-way data flow mechanisms such as Ngrx, VueX, Mux, etc. The one-way data flow mechanism is commonly used in the current front-end development, however, in fact this mechanism will increase the complexity of the program. This is mainly because this mechanism will introduce another system in the front-end development level to maintain the flow of data. If we define the existing business as the realization from 0 to 1, after adding this mechanism, it becomes 0 to 1 plus another 0 to 1, becomes a 0 to 2 problem. This becomes complicated.
The front-end only needs to do the following tasks such as page switching, data and back-end interaction, data model and API correspondence, and the components are written as Self-Contained as much as possible.
So I don't recommend adding a similar data flow mechanism in the front end.
Let’s talk about the back-end analysis. When we are talking about the back-end, we don’t care much about what technologies are used (Node JS, .net Core, SpringBoot, PHP, Python, Ruby On Rails, etc.), because the back-end logic is clear, no matter what you use The levels of technology and program design are similar.
The main task of the backend is to provide API data. For example, user-related APIs, creating a user, updating a user, deleting a user, and so on are all defined in a user Controller. For the addition of Controller, I suggest adding it according to the business layer, and don't do too many things in a Controller. For example, we can add Book Controller to handle Book-related operations, and Order Controller to handle order-related operations.
This is to make the API design linear, parallel, and minimize the coupling between the respective Controllers, thereby reducing complexity.
Furthermore, at the implementation level, we can have Data Set corresponding to database tables, Entity corresponding to data table records, Model corresponding to API data models, Service/Repository responsible for logic implementation and so on.
In the selection of back-end technology, database-related operations are an insurmountable threshold. Some frameworks use EntityFramework-like mechanisms such as .NetCore and PHP Laravel, some use similar to JPA Hibernate, Mybatis such as Spring Boot, and some use directly JDBC SQL statement execution method, and some combined with Stored Procedure. In this place, sorted by program complexity, from lowest to highest, they are EntityFrameWork<JPA Hibernate+Mybatis<JDBC SQL<Stored Procedure.
Of course, database design and database upgrade Migration are also factors related to the complexity of the program project. This should be discussed in conjunction with specific back-end technologies. We will not expand in this article.
Well, in this article, we mainly discuss the role of front-end and back-end separation, how to perform front-end and back-end separation, and how to decouple.
Click to follow and learn about Huawei Cloud's fresh technology for the first time~