Back

Technologies:

javascriptjavascript
avatar
Tolerim
25 days ago

Is it advisable to use the API response DTO in the view layer of a multi-client Angular frontend?

As a senior JavaScript developer, I understand the benefits of using DTO (data transfer object) for rest APIs response instead of returning Entity DAO (data access object), to prevent the frontend from being tightly coupled with the data layer. Now I am considering implementing the same pattern in my Angular frontend app, where I have an Angular client and an Ionic client for the view layer.

For instance, if the Backend returns the Bill interface as follows:

export interface Bill {
  accountNo: string;
  accountId: string;
  accountType: string;
  totalAmountDue: string;
  primary: boolean;
}
However, I would like to display different partial data for the Angular client and the Ionic client. Hence, the question arises whether I should use the same Bill interface for both clients, or create separate ViewModel interfaces akin to the DTO and DAO pattern?

export interface BillAngularViewModel {
  accountNo: string;
  accountId: string;
}

export interface BillIonicViewModel {
 totalAmountDue: string;
  primary: boolean;
}
Although I explored the DTO and Backend For Frontend design patterns, none of them seem to be relevant in a frontend-only context.

Answers(2)
avatar
Vogi
25 days ago
Verified Answer
It is a good practice to use DTOs for REST API responses instead of returning Entity DAOs to prevent the frontend from being tightly coupled with the data layer. However, when it comes to the view layer, it is better to use separate ViewModel interfaces for each client instead of using the same interface for both clients. This is because each client may require different partial data from the same entity. In your case, you can create separate ViewModel interfaces for Angular and Ionic clients as follows: 
export interface BillAngularViewModel {
  accountNo: string;
  accountId: string;
}

export interface BillIonicViewModel {
 totalAmountDue: string;
  primary: boolean;
}
This way, you can avoid tightly coupling the view layer with the data layer and also ensure that each client receives only the required data. I hope this helps! Let me know if you have any more questions.

Sources

javascript - Should I use the api response DTO in the view layer in ...ionic/angular- How to use interfaces correctly? - Stack OverflowBuild Native and Progressive Web Apps with Angular and Ionic
avatar
Tolerim
25 days ago
It would be ideal to create separate ViewModel interfaces for the Angular and Ionic clients to avoid coupling between the frontend and backend. This will also allow you to show different partial data for each client, as mentioned in the question. Using the same interface for both clients may cause issues in the future if you need to modify the data being returned for one client but not the other. With separate interfaces, you can make changes independently without affecting the other client's data. It is worth noting that the DTO and BFF design patterns are primarily used for backend architectures and may not directly apply to the frontend. However, the same principles of decoupling and separation of concerns can be applied to frontend development as well.
;