These days, MSA (Micro Service Architecture) is becoming more prevalent, and the following situations can arise during development:
- Supporting multiple platforms (Web, Android, iOS, etc.) requires specific data for each.
Manipulating, mixing, and matching responses from multiple API calls to achieve the desired data format. - These situations overlap, leading to complex calculations or business logic on the front-end.
- As codebases grow and become more complex, organization becomes difficult. Eventually, the codebase becomes unmanageable, and complexities that hide bugs can be discovered.
Performing complex calculations on the front-end can lead to slow rendering, as rendering and business logic compete on the UI thread.
So, what can be done to improve this? Let's compare and contrast commonly used API formats with the BFF architecture.
General structure
APIs that support multiple platforms can sometimes contain unnecessary data unused by the application.
As shown in the figure, when there are multiple platforms, the frontend calls the same API. Backend developers implement the API to deliver all data to meet the requirements of all platforms. Additionally, backend developers may deliver additional data needed for data processing, or call multiple APIs from a single page.
Furthermore, relying directly on APIs can lead to various issues.
- Follow-up issues when API endpoints are separated in an MSA (Micro Service Architecture) environment
- CORS issues, a browser's fate
- Communication costs associated with aligning with multiple platforms and specifications from an API perspective
- Unreasonable attempts to integrate authentication methods that inevitably vary across platforms
- Issues that make it difficult to achieve the client's dream of "receiving only the data necessary for the screen"—partial responses
BFF structure
BFF (Backend For Frontend) is a solution to the issues associated with relying directly on APIs. As the name suggests, Backend For Frontend (BFF) essentially refers to implementing an intermediate server for the frontend.
As shown in the diagram, there must be one BFF for each frontend, and the BFF can be implemented to suit the frontend's requirements. Therefore, BFF may be meaningless if you don't support multiple platforms.
BFF handles data integration to further enhance frontend productivity. Furthermore, implementing BFF allows the frontend to remain decoupled from the backend. BFF exists to meet frontend requirements and should ideally be built by frontend developers.
In conclusion, BFF can address the API dependency issues discussed earlier.
- Follow-up when API endpoints are separated in an MSA environment
- Handling CORS, a browser's destiny
- Reducing communication costs when aligning with multiple platforms and specifications from the API's perspective
- Handling authentication methods that inevitably vary by platform
- Partial response: "Receive only the data necessary for the screen," a client's dream
