BFE- Backend for Front-End

Let's say you are designing some web application, and your main role is develop all Backend API's. As a good backend developer your aim is to write generic API's for any other applications also like Android App, IOS App, etc. etc.. 

Take a example that you are building an E-commerce Web and Mobile Application. And as per the size of screen UI designer made below like pattern - 
For Desktop view of specific product - 

1. Image of product, price
2. Rating in terms of stars 
3. Reviews
4. FAQ's 

For Mobile Application view of specific product - 

1. Image, price
2. Rating

FAQ's also there in mobile app but these things are in different tabs and UI/UX Developer made UI according to screen size.
So the main part is that for a different type of screen we are sending different kind of data. 

To Desktop -

Product1= {
 "Image": "IMG_1",
 "Rating": "5",
 "Reviews": ["R1", "R2"],
 "FAQ": ["Q1A1", "Q2A2"]
}

To Mobile App-

Product1 = { 
 "Image": "IMG_1", 
 "Rating": "5"
}

So the problem is if you are as a Backend Developer made generic API for Product data and Different Screen Size Device need different data then how these things works ?

Answer from Noob - 
As a fresher or beginner backend developer you would say that send all these data and render only those data which is needed at that time from frontend. 

But as a good backend developer this is wrong. It's like user can access Reviews and FAQ's on same page where we don't want to show on that page. Yes, it is not bad for security but I think it's more of EGO of Backend Developer 😅😅. (Joking)

Actual Answer - 
As I said it is not good practice for backend developer to send all data and use only required data, if developer do that then anyone can go to inspect and call that object and view all JSON of that data. (Still EGO of developer reason is at top).

To send data according to device type - 

Noob Advice: Check device properties every time before sending data - 
Cons of it- It will fucked up in between our Business Logic
Then BFE- Backend for Front-End came in picture to help these kind of scenarios. 

BFE is basically a additional layer we add, whenever any request goes, it will first come to BFE in which BFE identifies that Device type/ Screen Size/ Desktop/ Mobile/ Tab and send request to our generalized Backend, and Backend will send our generalized request to BFE and according to Device type BFE modifies data (BFE make new object of required entities and render that object instead of Generalized response).