SlideShare a Scribd company logo
1 of 34
Download to read offline
The Missing Link Between Frontend and Backend Devs
GraphQL
Sashko Stubailo
@stubailo
Apollo Tech Lead, Meteor
Browser
Web Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F W E B A P P S
<HTML />
Sending HTML from a web
server to a browser
JavaScript UI
API Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F W E B A P P S
{ data }
Sending data from an API
server to a single-page app,
for better performance
JavaScript UI
API Server
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F A P P S
{ data }
Sending data from an API
server to multiple clients in
different environments
Native iOS app
CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F A P P S
Splitting into microservices,
waterfall loading and
multiple APIs
CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
A B R I E F H I S T O R Y O F A P P S
Add an API gateway, now there’s
a development bottleneck
API gateway
CordovaBrowser Native
Microservice Microservice Microservice
C L I E N T
S E R V E R
T H E F U T U R E O F A P P S
The solution: GraphQL as the
translation layer between
frontend and backend
GraphQL API gateway
• Full-stack developers, where frontend
teams build the API
• Separate API team
• Backend services team owns their API
• Feature-oriented teams
T E A M S T R U C T U R E S
Too many API
endpoints, one per UI
feature
API endpoints don’t
meet UI needs
Possible performance
or security issues to
ship faster
Takes too long to build
the API for a new
feature
Frontend team
develops API
Backend team
develops API
Best of both worlds?
The benefits
Flexible: “Make your own endpoints”
query Human {
human(id: "1000") {
name
height(unit: FOOT)
}
}
{
"human": {
"name": "Luke Skywalker",
"height": 5.6430448
}
}
• Choose from your API’s schema of types, fields, and arguments
• Computed fields, parameters, type conditions, and more
• Validates queries for you
Performance: Get what you need
• No need to hit multiple endpoints to
render one page
• Select only the fields that are needed
• Batch across all data requirements
• Eliminate unnecessary fetching with
fancy clients, such as Apollo and Relay
query Human {
human(id: "1000") {
name
avatar(size: SMALL)
friends {
name
}
}
}
Not just a tool: An open source spec
S E R V E R S
• Plain HTTP request
• React
• Angular
• Vue
• Polymer
• Native iOS/Android
C L I E N T S
• Node.js
• Ruby
• Python
• Scala
• Java
• Erlang
T O O L S
• API explorer (GraphiQL)
• Editor autocomplete
• Query validation
• Mocking
• Performance analysis
• Code generation
…and more
Constantly improving
subscription {
newComments(postId: 5) {
content
author {
name
}
}
}
S U B S C R I P T I O N S
query {
newsFeedPosts {
title
image
comments @defer {
content
}
}
}
D E F E R
Think carefully about API needs
Hardcode special endpoints
User Interface Backend
W I T H R E S T
Ask for data
Get the data
User Interface Backend
W I T H G R A P H Q L
C O M M U N I C A T I O N
Backend point of view
const HumanQuery = gql`
query Human {
human(id: "1000") {
name
height(unit: FOOT)
}
}
`;
Know exactly which parts of the code are using the fields and endpoints in the API,
at runtime and statically, to evaluate backend changes and ask UI devs
Query
human
Human
name
height
friends
A tool for GraphQL devs to understand their APIOptics
Backend point of view
Don’t need to worry about maintaining UI-specific endpoints to
reduce roundtrips
api.example.com/posts/1.json
api.example.com/posts/1/detailed.json
api.example.com/posts/1/mobile-preview.json
api.example.com/v3/posts/1/android-feed.jsonX
Backend point of view
No need to version API to change the data available, just add new fields
Frontend point of view
More flexibility to prototype, try different ideas, and act independently
Frontend point of view
query Human {
human {
name
weather
friends {
name
}
}
}
Get insight into query performance to fix loading problems without
diving into the backend, or have information to give backend team
query Human
Optics
Frontend point of view
Self-documenting API means the UI developer doesn’t
need to hunt around to figure out the parameters or data format
A better API experience for both
A P I W O R K F L O W
• Database schema is not
always relevant to frontend
developers
• These days, not all of your
data is in a database!
D B S C H E M A
• Represents contract
between frontend and
backend
• Has declared relationships
• Can be used directly to
implement the server and
mock data
# A comment submitted by a user
type Comment {
# The SQL ID of this comment
id: Int!
# The GitHub user who posted the comment
postedBy: User!
# The text of the comment
content: String!
# The repository which this comment is about
repoName: String!
}
G R A P H Q L S C H E M A
Enables new dev workflow
1. UI and API developers agree on schema
2. UI developer mocks data based on schema,
starts implementing UI components and
views independently
3. API developer builds out schema, informs UI
dev of any necessary changes
4. UI and API connected together, queries test
for performance
5. Feature shipped!
Schema
UI API
Product
Conclusion: Developer happiness
B A C K E N D
• Clear and concise API to maintain
• Know how people are actually
using the data
• No need for frequent endpoint
code changes
• Smaller security surface area
F R O N T E N D
• Easy to find, understand and
consume data
• Many client-side developer tools
for caching, validation, and
more
• Make your own endpoints
Conclusion: Communication
• Shared type language
• Clear API design process
• Self-documenting API layer
• UI developers get insights into performance
• API devs know who is using the data, why,
and what to optimize for
The Missing Link Between Frontend and
Backend Devs
GraphQL
Sashko Stubailo
@stubailo
Apollo Tech Lead, Meteor
Community docs and general information:
graphql.org
Our Medium publication, with tips and in-depth
articles about GraphQL
medium.com/apollo-stack
Apollo GraphQL clients and tools:
dev.apollodata.com

More Related Content

What's hot

Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/Meteor
Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/MeteorWhy UI Developers Love GraphQL - Sashko Stubailo, Apollo/Meteor
Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/MeteorJon Wong
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018Sashko Stubailo
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL StackSashko Stubailo
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQLRodrigo Prates
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQLSquareboat
 
GraphQL in an Age of REST
GraphQL in an Age of RESTGraphQL in an Age of REST
GraphQL in an Age of RESTYos Riady
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL IntroductionSerge Huber
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL Josh Price
 
Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQLMuhilvarnan V
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentationVibhor Grover
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersSashko Stubailo
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
GraphQL With Relay Part Deux
GraphQL With Relay Part DeuxGraphQL With Relay Part Deux
GraphQL With Relay Part DeuxBrad Pillow
 

What's hot (20)

Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/Meteor
Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/MeteorWhy UI Developers Love GraphQL - Sashko Stubailo, Apollo/Meteor
Why UI Developers Love GraphQL - Sashko Stubailo, Apollo/Meteor
 
GraphQL
GraphQLGraphQL
GraphQL
 
GraphQL + relay
GraphQL + relayGraphQL + relay
GraphQL + relay
 
GraphQL
GraphQLGraphQL
GraphQL
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL Stack
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Intro to GraphQL
 Intro to GraphQL Intro to GraphQL
Intro to GraphQL
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQL
 
Graphql
GraphqlGraphql
Graphql
 
GraphQL & Relay
GraphQL & RelayGraphQL & Relay
GraphQL & Relay
 
GraphQL in an Age of REST
GraphQL in an Age of RESTGraphQL in an Age of REST
GraphQL in an Age of REST
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQL
 
Graphql
GraphqlGraphql
Graphql
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentation
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product Developers
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
GraphQL With Relay Part Deux
GraphQL With Relay Part DeuxGraphQL With Relay Part Deux
GraphQL With Relay Part Deux
 

Similar to GraphQL: The Missing Link Between Frontend and Backend Devs

API workshop: Introduction to APIs (TC Camp)
API workshop: Introduction to APIs (TC Camp)API workshop: Introduction to APIs (TC Camp)
API workshop: Introduction to APIs (TC Camp)Tom Johnson
 
Frontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsFrontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsKarthik Ramgopal
 
Developing Apps with Azure AD
Developing Apps with Azure ADDeveloping Apps with Azure AD
Developing Apps with Azure ADSharePointRadi
 
API Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIsAPI Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIsTom Johnson
 
Connecticut Salesforce Developer Group - Jan 2017
Connecticut Salesforce Developer Group - Jan 2017Connecticut Salesforce Developer Group - Jan 2017
Connecticut Salesforce Developer Group - Jan 2017Jitendra Zaa
 
Slaying Monoliths with Node and Docker
Slaying Monoliths with Node and DockerSlaying Monoliths with Node and Docker
Slaying Monoliths with Node and DockerYunong Xiao
 
apidays LIVE Australia - Contract-first API development with Spot by Francois...
apidays LIVE Australia - Contract-first API development with Spot by Francois...apidays LIVE Australia - Contract-first API development with Spot by Francois...
apidays LIVE Australia - Contract-first API development with Spot by Francois...apidays
 
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...apidays
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopJimmy Guerrero
 
Test-Driven Documentation for your REST(ful) service
Test-Driven Documentation for your REST(ful) serviceTest-Driven Documentation for your REST(ful) service
Test-Driven Documentation for your REST(ful) serviceJeroen Reijn
 
Next Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy MobileNext Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy MobileC4Media
 
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.ai
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.aiapidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.ai
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.aiapidays
 
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...apidays
 
Api clarity webinar
Api clarity webinarApi clarity webinar
Api clarity webinarLibbySchulze
 
Content Strategy and Developer Engagement for DevPortals
Content Strategy and Developer Engagement for DevPortalsContent Strategy and Developer Engagement for DevPortals
Content Strategy and Developer Engagement for DevPortalsAxway
 
Ibm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopIbm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopShubhra Kar
 

Similar to GraphQL: The Missing Link Between Frontend and Backend Devs (20)

API workshop: Introduction to APIs (TC Camp)
API workshop: Introduction to APIs (TC Camp)API workshop: Introduction to APIs (TC Camp)
API workshop: Introduction to APIs (TC Camp)
 
Frontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterationsFrontend APIs powering fast paced product iterations
Frontend APIs powering fast paced product iterations
 
Cqrs api
Cqrs apiCqrs api
Cqrs api
 
Developing Apps with Azure AD
Developing Apps with Azure ADDeveloping Apps with Azure AD
Developing Apps with Azure AD
 
API Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIsAPI Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIs
 
Api design part 1
Api design part 1Api design part 1
Api design part 1
 
Connecticut Salesforce Developer Group - Jan 2017
Connecticut Salesforce Developer Group - Jan 2017Connecticut Salesforce Developer Group - Jan 2017
Connecticut Salesforce Developer Group - Jan 2017
 
Slaying Monoliths with Node and Docker
Slaying Monoliths with Node and DockerSlaying Monoliths with Node and Docker
Slaying Monoliths with Node and Docker
 
apidays LIVE Australia - Contract-first API development with Spot by Francois...
apidays LIVE Australia - Contract-first API development with Spot by Francois...apidays LIVE Australia - Contract-first API development with Spot by Francois...
apidays LIVE Australia - Contract-first API development with Spot by Francois...
 
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...
apidays LIVE Australia - Have your cake and eat it too: GraphQL? REST? Why no...
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js Workshop
 
Test-Driven Documentation for your REST(ful) service
Test-Driven Documentation for your REST(ful) serviceTest-Driven Documentation for your REST(ful) service
Test-Driven Documentation for your REST(ful) service
 
Next Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy MobileNext Generation Client APIs in Envoy Mobile
Next Generation Client APIs in Envoy Mobile
 
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.ai
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.aiapidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.ai
apidays London 2023 - Autonomous Agents, Zdenek Nemec, superface.ai
 
PPT for Seminar.pptx
PPT for Seminar.pptxPPT for Seminar.pptx
PPT for Seminar.pptx
 
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...
apidays LIVE LONDON - Discovering API Version differences with ease by Jaap B...
 
Api clarity webinar
Api clarity webinarApi clarity webinar
Api clarity webinar
 
Content Strategy and Developer Engagement for DevPortals
Content Strategy and Developer Engagement for DevPortalsContent Strategy and Developer Engagement for DevPortals
Content Strategy and Developer Engagement for DevPortals
 
Akash Damniya
Akash DamniyaAkash Damniya
Akash Damniya
 
Ibm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopIbm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshop
 

Recently uploaded

Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)IES VE
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 

Recently uploaded (20)

Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)The Importance of Indoor Air Quality (English)
The Importance of Indoor Air Quality (English)
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 

GraphQL: The Missing Link Between Frontend and Backend Devs

  • 1. The Missing Link Between Frontend and Backend Devs GraphQL Sashko Stubailo @stubailo Apollo Tech Lead, Meteor
  • 2. Browser Web Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F W E B A P P S <HTML /> Sending HTML from a web server to a browser
  • 3. JavaScript UI API Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F W E B A P P S { data } Sending data from an API server to a single-page app, for better performance
  • 4. JavaScript UI API Server C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S { data } Sending data from an API server to multiple clients in different environments Native iOS app
  • 5. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S Splitting into microservices, waterfall loading and multiple APIs
  • 6. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R A B R I E F H I S T O R Y O F A P P S Add an API gateway, now there’s a development bottleneck API gateway
  • 7. CordovaBrowser Native Microservice Microservice Microservice C L I E N T S E R V E R T H E F U T U R E O F A P P S The solution: GraphQL as the translation layer between frontend and backend GraphQL API gateway
  • 8. • Full-stack developers, where frontend teams build the API • Separate API team • Backend services team owns their API • Feature-oriented teams T E A M S T R U C T U R E S
  • 9. Too many API endpoints, one per UI feature API endpoints don’t meet UI needs Possible performance or security issues to ship faster Takes too long to build the API for a new feature Frontend team develops API Backend team develops API
  • 10. Best of both worlds?
  • 12. Flexible: “Make your own endpoints” query Human { human(id: "1000") { name height(unit: FOOT) } } { "human": { "name": "Luke Skywalker", "height": 5.6430448 } } • Choose from your API’s schema of types, fields, and arguments • Computed fields, parameters, type conditions, and more • Validates queries for you
  • 13. Performance: Get what you need • No need to hit multiple endpoints to render one page • Select only the fields that are needed • Batch across all data requirements • Eliminate unnecessary fetching with fancy clients, such as Apollo and Relay query Human { human(id: "1000") { name avatar(size: SMALL) friends { name } } }
  • 14. Not just a tool: An open source spec S E R V E R S • Plain HTTP request • React • Angular • Vue • Polymer • Native iOS/Android C L I E N T S • Node.js • Ruby • Python • Scala • Java • Erlang T O O L S • API explorer (GraphiQL) • Editor autocomplete • Query validation • Mocking • Performance analysis • Code generation …and more
  • 15. Constantly improving subscription { newComments(postId: 5) { content author { name } } } S U B S C R I P T I O N S query { newsFeedPosts { title image comments @defer { content } } } D E F E R
  • 16. Think carefully about API needs Hardcode special endpoints User Interface Backend W I T H R E S T
  • 17. Ask for data Get the data User Interface Backend W I T H G R A P H Q L
  • 18. C O M M U N I C A T I O N
  • 19. Backend point of view const HumanQuery = gql` query Human { human(id: "1000") { name height(unit: FOOT) } } `; Know exactly which parts of the code are using the fields and endpoints in the API, at runtime and statically, to evaluate backend changes and ask UI devs Query human Human name height friends
  • 20. A tool for GraphQL devs to understand their APIOptics
  • 21. Backend point of view Don’t need to worry about maintaining UI-specific endpoints to reduce roundtrips api.example.com/posts/1.json api.example.com/posts/1/detailed.json api.example.com/posts/1/mobile-preview.json api.example.com/v3/posts/1/android-feed.jsonX
  • 22. Backend point of view No need to version API to change the data available, just add new fields
  • 23. Frontend point of view More flexibility to prototype, try different ideas, and act independently
  • 24. Frontend point of view query Human { human { name weather friends { name } } } Get insight into query performance to fix loading problems without diving into the backend, or have information to give backend team query Human
  • 26. Frontend point of view Self-documenting API means the UI developer doesn’t need to hunt around to figure out the parameters or data format
  • 27. A better API experience for both
  • 28. A P I W O R K F L O W
  • 29. • Database schema is not always relevant to frontend developers • These days, not all of your data is in a database! D B S C H E M A
  • 30. • Represents contract between frontend and backend • Has declared relationships • Can be used directly to implement the server and mock data # A comment submitted by a user type Comment { # The SQL ID of this comment id: Int! # The GitHub user who posted the comment postedBy: User! # The text of the comment content: String! # The repository which this comment is about repoName: String! } G R A P H Q L S C H E M A
  • 31. Enables new dev workflow 1. UI and API developers agree on schema 2. UI developer mocks data based on schema, starts implementing UI components and views independently 3. API developer builds out schema, informs UI dev of any necessary changes 4. UI and API connected together, queries test for performance 5. Feature shipped! Schema UI API Product
  • 32. Conclusion: Developer happiness B A C K E N D • Clear and concise API to maintain • Know how people are actually using the data • No need for frequent endpoint code changes • Smaller security surface area F R O N T E N D • Easy to find, understand and consume data • Many client-side developer tools for caching, validation, and more • Make your own endpoints
  • 33. Conclusion: Communication • Shared type language • Clear API design process • Self-documenting API layer • UI developers get insights into performance • API devs know who is using the data, why, and what to optimize for
  • 34. The Missing Link Between Frontend and Backend Devs GraphQL Sashko Stubailo @stubailo Apollo Tech Lead, Meteor Community docs and general information: graphql.org Our Medium publication, with tips and in-depth articles about GraphQL medium.com/apollo-stack Apollo GraphQL clients and tools: dev.apollodata.com