Imagine an application that has a web and a mobile, IOS and Android, or that your API is consumed by similar frontends from totally different teams. The functionalities they provide are distinct, hence the need for distinct sets of data and functions. You might think that the solution for this is having an “as generic as possible” backend for all UI’s. From my experience, this kind of backend leads to big issues in matters of performance, entangled user experience as well as extra and unnecessary communication for the development teams in order to align and meet their needs. Fortunately, there is a promising set of approaches taking the stage as they are created with the intention to optimize how front-end applications collaborate with back-ends: BFF (Backend-For-Frontend) pattern and GraphQL. Given these two approaches, which one is the right to consider? Join me in a talk where we will discuss the two approaches, underline both their good and bad sides, and determine which you should consider as the backend technology for your frontend application.

1. Classification: Confidential (V3)
BFF vs. GraphQL:
A critical perspective
Mihaela Ghidersa
@Centric Romania

2. Classification: Confidential (V3)
About me…
● Senior Software Engineer
@CENTRIC Romania
● Trainer @ EduromTech
● Community oriented

3. Classification: Confidential (V3)
3
➔ BFF
Backend For Frontend
➔ GraphQL
➔ GraphQL & BFF

4. Classification: Confidential (V3)
What FE
developers think
when problems
arise
● Why can't those backend developers
just give us what we want?
● How can I be expected to know
everything I'm going to need in
advance?
● Really, how hard can building a backend
be? Doesn't it just get data out of a
database and send it to us?
● What do those backend developers
do with all their time?

5. Classification: Confidential (V3)
What BE
developers think
about this …
● Why it is so hard for these frontend
developers to just work with what we
provide?
● Why is this set of data changing so
often? Can’t they just say what they
need from the beginning?
● What are frontend developers working
on anyways?
● They make so much drama, what is it so
hard about writing so HTML and CSS?

6. Classification: Confidential (V3)
“With great power
comes great
responsibility”

7. Classification: Confidential (V3)
“I need some additional data in the UI”
Chaos starts with this
sentence:

8. Classification: Confidential (V3)
* Just create a new endpoint and use it
* Add more data to the endpoint we are already
calling
How to make
everyone
happy..

9. Classification: Confidential (V3)
*Just create a new endpoint
and use it

10. Classification: Confidential (V3)
*Add more data to the
endpoint we are already
calling

11. Classification: Confidential (V3)
The result?

12. Classification: Confidential (V3)
One-Size-Fits-All APIs

13. Classification: Confidential (V3)
!Absorbing complexity

14. Classification: Confidential (V3)
Unless…

15. Classification: Confidential (V3)
15
➔ BFF
Backend For Frontend
➔ GraphQL
➔ GraphQL & BFF

16. Classification: Confidential (V3)
Netflix & SoundCloud story

17. Classification: Confidential (V3)
BFF pattern = architectural
software pattern that shapes
data that is fetched between
clients and servers.

18. Classification: Confidential (V3)
Traditional FRONTEND
AND BACKEND
SEPARATION

19. Classification: Confidential (V3)
What do I want a BFF to do?
● Providing only the data what client needs
● Less response time
● Resiliency
● Caching

20. Classification: Confidential (V3)
API Gateway / BFF
● Decoupling the system’s services from the actual clients
● Client doesn’t need to know about all services location
● No dependency on communication protocol

21. Classification: Confidential (V3)
Same API for all clients

22. Classification: Confidential (V3)
Different types of clients

23. Classification: Confidential (V3)
BFF’s frontend and
backend ARCHITECTURE

24. Classification: Confidential (V3)
How do I make the right
choice?

25. Classification: Confidential (V3)
Challenges..
Duplication
Difficult cu manage = more deployable units

26. Classification: Confidential (V3)
26
➔ BFF
Backend For Frontend
➔ GraphQL
➔ GraphQL & BFF

27. Classification: Confidential (V3)
GraphQL to the
rescue

28. Classification: Confidential (V3)
GraphQL
= specification.

29. Classification: Confidential (V3)
Meet GraphQL
● Query Language
● Schema Language and type system

30. Classification: Confidential (V3)
REST ^ GraphQL
● Specific request, specific response
● Endpoints are gone, resources declaring their own
● Reduces the number of HTTP calls
● Error code processing
● Version number

31. Classification: Confidential (V3)
Big concept
● Bring the attention of your audience over a
key concept using icons or illustrations
31

32. Classification: Confidential (V3)
32

33. Classification: Confidential (V3)
“To be fair, REST is the
data-fetching equivalent
of going to a restaurant
and being asked “What
do you want? We’ll give
you what we have.”
- Ryan Glover

34. Classification: Confidential (V3)
GraphQL could be
your BFF

35. Classification: Confidential (V3)
35

36. Classification: Confidential (V3)
Where GraphQL shines
● The client gets more freedom respecting the data it gets
● Possibility to serve several clients
● Makes it easy for different clients to coexist and evolve
---
● Less interdependence between separate teams
● Isolates UX from changes

37. Classification: Confidential (V3)
So…
Do I really need a BFF?

38. Classification: Confidential (V3)
Some changes in the mindset
● Quit the association of frontend and backend with client
and server
● Create an overview
● Work of the communication to backend developers

39. Classification: Confidential (V3)
“With great power
comes great
responsibility”

40. Classification: Confidential (V3)
Thank you! :)

41. Classification: Confidential (V3)
Q&A

42. Classification: Confidential (V3)
Thank you! :)