FrontEnd & BackEnd Relationship
What is the front end?
The front end mainly focuses on the presentation logic, no matter the client is a web app, mobile app or desktop app, etc. According to which type of device we building the front end for, the presentation requirement can be different.
What is the backend?
The backend is responsible to handle requests and persisting/retrieve data from the database, which database will store the business logic data.
No matter what client is using the backend resources, the backend will be sending the mapped business logic data back
The mapping that happens in the backend is not because of the presentation requirement, but it is used to hide some sensitive business data and also make the data easier for the clients to use since the format of the business data can be complex. (Vice Versa)
Mapping data between front end and backend
The mapping operation in the front end and backend is very important but the purposes are totally different.
- Front end: The client of the backend, have different presentation requirements according to the type of client.
- Backend: Business logic Core, handle the interaction of the business logic and interact with the database.
Mapping in Front end
We massage the data come from the backend because the backend data is not formatted for any of the clients but it’s the representation of the business logic.
Incoming data: So that the client needs to map the data for their own presentation requirement.
Outgoing data: Massage the data according to the backend contract.
NOTE: It will be crazy if we do this in the backend, imagine we have many types of clients, this will violate the open-close principle and SRP
Mapping in Backend
Massage the business logic data from the database to hide some sensitive data and formatted the data into something easier to use for clients.
Incoming data: Map the data the conform the DTO contract to the business model.
Outgoing data: Business model to DTO, hiding sensitive data and make it less complex to use.
Where to map the data?
The place that we add the mapping layer is just preference, but I make use of the repository pattern in both ends as you can see in the below image.
- Frontend: We have a service layer before in the front end act as a repository only for connecting with the backend enpoint.
- Backend: We have a repository layer only for connecting with the database.
Advantages:
- Easy to do the unit tests as we can mock the layer easily.
- Adding indirection so that it can make changes easily.
- Single Responsibility Principle
Conclusion:
So that we will put the mapping layer before the repository layer to make it cleaner, easier to face changes, and easier for testing.
(We can have validator tests, mapper tests, repository method tests, etc.)
