Index - BFFs vs GraphQL

Chris Bailey 
(@Chris__Bailey)
Discover. Collaborate. Deploy.
VS
BFF

{
“name": "Luke Skywalker",
"height": "172",
"mass": "77",
"hair_color": "blond",
"skin_color": "fair",
"eye_color": "blue",
"birth_year": "19BBY",
"gender": "male",
"homeworld": "https://swapi.co/api/planets/1/",
"films": [
"https://swapi.co/api/films/2/",
"https://swapi.co/api/films/7/"
],
"species": [
"https://swapi.co/api/species/1/"
],
"vehicles": [
"https://swapi.co/api/vehicles/14/",
"https://swapi.co/api/vehicles/30/"
],
"starships": [
"https://swapi.co/api/starships/12/",
"https://swapi.co/api/starships/22/"
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
"url": "https://swapi.co/api/people/1/"
}

{
"height": "172",
"mass": "77",
"gender": "male",
"films": [
],
"species": [
],
"vehicles": [
],
"starships": [
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
}
Planet Query Reference

{
"height": "172",
"mass": "77",
"gender": "male",
"films": [
],
"species": [
],
"vehicles": [
],
"starships": [
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
}
Planet Query Reference
Film Query References
Species Query References
Vehicle Query References
Starship Query References

Q: What ﬁlms feature Luke
Skywalker?

{
"height": "172",
"mass": "77",
"gender": "male",
"films": [
],
"species": [
],
"vehicles": [
],
"starships": [
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
}
Call #1

{
"height": "172",
"mass": "77",
"gender": "male",
"films": [
],
"species": [
],
"vehicles": [
],
"starships": [
],
"created": "2014-12-09T13:50:51.644000Z",
"edited": "2014-12-20T21:17:56.891000Z",
}
Film Query References
Call #1

{
"title": "The Empire Strikes Back",
"episode_id": 5,
"opening_crawl": "It is a dark time for thernRebellion. Although the DeathrnStar has been destroyed,rnImperial troops have driven thernRebel forces from their hiddenrnbase and pursued them acrossrnthe galaxy.
rnrnEvading the dreaded ImperialrnStarfleet, a group of freedomrnfighters led by Luke Skywalkerrnhas established a new secretrnbase on the remote ice worldrnof Hoth.rnrnThe evil lord Darth Vader,rnobsessed with
finding youngrnSkywalker, has dispatchedrnthousands of remote probes intornthe far reaches of space....",
"director": "Irvin Kershner",
"producer": "Gary Kurtz, Rick McCallum",
"release_date": "1980-05-17",
"characters": [
"https://swapi.co/api/people/1/",
"https://swapi.co/api/people/26/"
],
"planets": [
"https://swapi.co/api/planets/4/",
"https://swapi.co/api/planets/27/"
],
"starships": [
],
"vehicles": [
],
"species": [
"https://swapi.co/api/species/6/",
],
"created": "2014-12-12T11:26:24.656000Z",
"edited": "2017-04-19T10:57:29.544256Z",
"url": "https://swapi.co/api/films/2/"
}
Call #2

{
"title": "Revenge of the Sith",
"episode_id": 3,
"opening_crawl": "War! The Republic is crumblingrnunder attacks by the ruthlessrnSith Lord, Count Dooku.rnThere are heroes on both sides.rnEvil is everywhere.rnrnIn a stunning move, thernfiendish droid leader, GeneralrnGrievous, has swept into thernRepublic capital and kidnappedrnChancellor Palpatine, leader ofrnthe Galactic Senate.rnrnAs the Separatist Droid
Armyrnattempts to flee the besiegedrncapital with their valuablernhostage, two Jedi Knights lead arndesperate mission to rescue therncaptive Chancellor....",
"director": "George Lucas",
"producer": "Rick McCallum",
"release_date": "2005-05-19",
"characters": [
],
"planets": [
],
"starships": [
],
"vehicles": [
],
"species": [
],
"created": "2014-12-20T18:49:38.403000Z",
"edited": "2015-04-11T09:45:44.862122Z",
Call #3

{
"title": "Return of the Jedi",
"episode_id": 6,
"opening_crawl": "Luke Skywalker has returned tornhis home planet of Tatooine inrnan attempt to rescue hisrnfriend Han Solo from thernclutches of the vile gangsterrnJabba the Hutt.rnrnLittle does Luke know that thernGALACTIC EMPIRE has
secretlyrnbegun construction on a newrnarmored space station evenrnmore powerful than the firstrndreaded Death Star.rnrnWhen completed, this ultimaternweapon will spell certain doomrnfor the small band of rebelsrnstruggling to restore freedomrnto the
galaxy...",
"director": "Richard Marquand",
"producer": "Howard G. Kazanjian, George Lucas, Rick McCallum",
"release_date": "1983-05-25",
"characters": [
],
"planets": [
],
"starships": [
],
"vehicles": [
],
"species": [
],
"created": "2014-12-18T10:39:33.255000Z",
"edited": "2015-04-11T09:46:05.220365Z",
Call #4

{
"title": "A New Hope",
"episode_id": 4,
"opening_crawl": "It is a period of civil war.rnRebel spaceships, strikingrnfrom a hidden base, have wonrntheir first victory againstrnthe evil Galactic Empire.rnrnDuring the battle, Rebelrnspies managed to steal
secretrnplans to the Empire'srnultimate weapon, the DEATHrnSTAR, an armored spacernstation with enough powerrnto destroy an entire planet.rnrnPursued by the Empire'srnsinister agents, PrincessrnLeia races home aboard
herrnstarship, custodian of thernstolen plans that can save herrnpeople and restorernfreedom to the galaxy....",
"director": "George Lucas",
"producer": "Gary Kurtz, Rick McCallum",
"release_date": "1977-05-25",
"characters": [
],
"planets": [
],
"starships": [
],
"vehicles": [
],
"species": [
],
"created": "2014-12-10T14:23:31.880000Z",
"edited": "2015-04-11T09:46:52.774897Z",
}
Call #5

{
"title": "The Force Awakens",
"episode_id": 7,
"opening_crawl": "Luke Skywalker has vanished.rnIn his absence, the sinisterrnFIRST ORDER has risen fromrnthe ashes of the Empirernand will not rest untilrnSkywalker, the last Jedi,rnhas been destroyed.
rn rnWith the support of thernREPUBLIC, General Leia Organarnleads a brave RESISTANCE.rnShe is desperate to find herrnbrother Luke and gain hisrnhelp in restoring peace andrnjustice to the galaxy.rn
rnLeia has sent her most daringrnpilot on a secret missionrnto Jakku, where an old allyrnhas discovered a clue tornLuke's whereabouts....",
"director": "J. J. Abrams",
"producer": "Kathleen Kennedy, J. J. Abrams, Bryan Burk",
"release_date": "2015-12-11",
"characters": [
],
"planets": [
],
"starships": [
],
"vehicles": [],
"species": [
],
"created": "2015-04-17T06:51:30.504780Z",
"edited": "2015-12-17T14:31:47.617768Z",
}
Call #6

{
"name": "Luke Skywalker",
"films": [
"The Empire Strikes Back”,
"Revenge of the Sith”,
"Return of the Jedi”,
"A New Hope",
"The Force Awakens”
]
}
6 Calls provides the data to create:

Swift @ IBM
GATEWAY
PUBLIC NETWORK CLOUD NETWORK
Client Devices Backend API Hosted Services

Swift @ IBM
GATEWAY
Client Devices Backend API
ROUTING PROXY
Micro-Services Hosted Services

Swift @ IBM
GATEWAY
ROUTING PROXY
API Team

Swift @ IBM
GATEWAY
ROUTING PROXY
Web Team
API Team

Swift @ IBM
GATEWAY
ROUTING PROXY
Android Team
Web Team
API Team

Swift @ IBM
GATEWAY
ROUTING PROXY
iOS Team
Android Team
Web Team
API Team

Server Side Rendering
First Paint Time

First Paint Time
Search Engine Optimisation

First Paint Time
Network Payload Size
Request Frequency

First Paint Time
Network Payload Size
CPU Usage
Request Frequency
Battery Usage
Memory Usage

Swift @ IBM
GATEWAY
Client Devices
ROUTING PROXY
iOS Team
Android Team
Web Team

GATEWAY
Client Devices
ROUTING PROXY
iOS Team
Android Team
Web Team
API Team
BFF API

GATEWAY
Client Devices
ROUTING PROXY
iOS Team
Android Team
Web Team
BFF API

GATEWAY
Client Devices
ROUTING PROXY
Micro-Services Hosted ServicesBFF API

GATEWAY
Client Devices
ROUTING PROXY
iOS Team
Android Team
Web Team
BFF API
UI Engineering Systems Engineering

1/17/17
Client Library B
Client Library A
Client Library C
Client Library D
Client Library E
Client Library F
Route A
Route B
Route C
Route D
Route E
Service A
Service B
Service C
Service D
Service E
Service D
Web Server

1/17/17
TV
iOS
Android
Windows
Browsers

TV
iOS
Android
Windows
Browsers

1/17/17
TV
iOS
Android
Windows
Browsers
UI Engineering

1/17/17
Remote 
Service 
Layer
TV
iOS
Android
Windows
Browsers
UI Engineering

1/17/17
Remote 
Service 
Layer
TV
iOS
Android
Windows
Browsers
UI Engineering
Search
MAP
GPS
Catalog
User
Playback
UI Engineering

1/17/17
Remote 
Service 
Layer
TV
iOS
Android
Windows
Browsers
Search
MAP
GPS
Catalog
User
Playback

“The BFF is tightly coupled to a speciﬁc user experience, and will
typically be maintained by the same team as the user interface,
thereby making it easier to deﬁne and adapt the API as the UI requires,
while also simplifying process of lining up release of both the client and
server components.”
— Sam Newman, ThoughtWorks

{
"films": [
"A New Hope",
]
}

GraphQL is a query language for your API,  
and a server-side runtime for executing queries
by using a type system you deﬁne for your data.

type Query {
hero: Character
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
characters: [Character]
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
{
hero (id: 1) {
name
films {
title
}
}
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
{
hero (id: 1) {
name
films {
title
}
}
}
class Character {
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
{
hero (id: 1) {
name
films {
title
}
}
}
class Character {
int id;
String name;
Planet homeWorld;
Films[] films; 
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
{
hero (id: 1) {
name
films {
title
}
}
}
class Character {
int id;
String name;
Planet homeWorld;
Films[] films; 
String getName() {
return this.name;
} 
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
{
hero (id: 1) {
name
films {
title
}
}
}
class Character {
int id;
String name;
Planet homeWorld;
Films[] films; 
String getName() {
return this.name;
} 
Film[] getFilms() { 
return this.films;
}
}

type Query {
hero: Character
}
type Character {
id: Int
name: String
homeWorld: Planet
films: [Film]
}
type Planet {
id: Int
name: String
climate: String
}
type Film {
id: Int
title: String
openingCrawl: Int
}
class Character {
int id;
String name;
Planet homeWorld;
Films[] films; 
String getName() {
return this.name;
} 
Film[] getFilms() { 
return this.films;
}
}
{
"hero": {
"films": [
"A New Hope",
]
}
}

BFF
Speciﬁc Users
Building Solutions

BFF
Speciﬁc Users
Building Solutions
Very Low Data Usage

BFF
Speciﬁc Users
Building Solutions
Very Low Data Usage
Agility

BFF
Speciﬁc Users
Building Solutions
Very Low Data Usage
Agility
Fullstack

BFF
Speciﬁc Users General Users
Building Solutions
Very Low Data Usage
Agility
Fullstack

BFF
Building Solutions Projecting Capabilities
Very Low Data Usage
Agility
Fullstack

BFF
Very Low Data Usage Low Data Usage
Agility
Fullstack

BFF
Agility Stability
Fullstack

BFF
Agility Stability
Fullstack Flexible

GATEWAY
Client Devices Micro-Services Hosted Services
iOS Team
Android Team
Web Team
BFF API

Index - BFFs vs GraphQL

More Related Content

More from Chris Bailey

Recently uploaded

Index - BFFs vs GraphQL