SlideShare a Scribd company logo
1 of 35
Download to read offline
Enabling a new generation of API developer tools
GraphQL
Sashko Stubailo
@stubailo
Apollo Open Source 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
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
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
Best of both worlds?
Let’s look at 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
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
A better API experience
T O O L S
GraphiQL query editor
GraphQL APIs are inherently self-documenting
Static query analysis inside your code
Without running the code, find:
• Typos in fields
• Wrong arguments
• Deprecated fields
• Identify field usage
apollostack/eslint-plugin-graphql
Query autocompletion in your editor
We’re collaborating
with Facebook and
others on a new
language service to
power GraphQL
features across editors
and IDEs.
jimkyndemeyer/js-
graphql-intellij-plugin
Typed code generation: Swift, Java, TS, Flow
The above query combined with schema
information outputs the type definitions on
the right.
apollostack/apollo-codegen
GraphQL: Enabling a new generation of API developer tools
Static queries for perf and security
• Use fragments for static composition.
• Queries sent to the server are predictable,
and can be optimized.
• Data requirements of app can be fully
analyzed at build time.
• Better security with persisted queries.
Write your data requirements so that
tooling can separate them from your UI
code
C L I E N T S
Plain fetch
Simple
Predictable
No UI consistency and performance
features
Caching client
Some work required to set up and learn
Easy to update the UI
Manage data in one place
Great dev tools
GET
GraphQL clients
Easy to bind data to your UI
Visit dev.apollodata.com for more
code snippets.
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
Chrome dev tools for Apollo
Another benefit of using a sophisticated client is
integrated tooling to understand your app.
P R O D U C T I O N
I N S I G H T S
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
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 Built entirely with Apollo
and GraphQL!
A tool for GraphQL devs to understand their APIOptics
Conclusion
• GraphQL provides a shared language to
talk about data and queries
• A wealth of tools can make UI devs more
efficient than ever before
• UI developers get insights into
performance and caching
• API devs know who is using the data and
what to optimize for
Enabling a new generation of API
developer tools
GraphQL
Sashko Stubailo
@stubailo
Open Source Lead, Meteor
Want to work on GraphQL and
open source technology full time?
Email me at sashko@meteor.com!
Community docs and general information:
graphql.org
Our Medium publication, with tips and in-depth
articles about GraphQL:
dev-blog.apollodata.com
Apollo OSS and production tools: apollodata.com

More Related Content

What's hot

Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQLMuhilvarnan V
 
Introduction to GraphQL: Mobile Week SF
Introduction to GraphQL: Mobile Week SFIntroduction to GraphQL: Mobile Week SF
Introduction to GraphQL: Mobile Week SFAmazon Web Services
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Rafael Wilber Kerr
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...luisw19
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL IntroductionSerge Huber
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQLRodrigo Prates
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentationVibhor Grover
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQLAmazon Web Services
 
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Hafiz Ismail
 
GraphQL Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL AdvancedLeanIX GmbH
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL StackSashko Stubailo
 
Getting Started with Spring for GraphQL
Getting Started with Spring for GraphQLGetting Started with Spring for GraphQL
Getting Started with Spring for GraphQLVMware Tanzu
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs RESTGreeceJS
 

What's hot (20)

Introduction to graphQL
Introduction to graphQLIntroduction to graphQL
Introduction to graphQL
 
Introduction to GraphQL: Mobile Week SF
Introduction to GraphQL: Mobile Week SFIntroduction to GraphQL: Mobile Week SF
Introduction to GraphQL: Mobile Week SF
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)
 
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
GraphQL as an alternative approach to REST (as presented at Java2Days/CodeMon...
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Graphql presentation
Graphql presentationGraphql presentation
Graphql presentation
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
Introduction to GraphQL (or How I Learned to Stop Worrying about REST APIs)
 
Intro GraphQL
Intro GraphQLIntro GraphQL
Intro GraphQL
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
 
GraphQL Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL Advanced
 
GraphQL
GraphQLGraphQL
GraphQL
 
React & GraphQL
React & GraphQLReact & GraphQL
React & GraphQL
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL Stack
 
Graphql
GraphqlGraphql
Graphql
 
Getting Started with Spring for GraphQL
Getting Started with Spring for GraphQLGetting Started with Spring for GraphQL
Getting Started with Spring for GraphQL
 
GraphQL vs REST
GraphQL vs RESTGraphQL vs REST
GraphQL vs REST
 

Viewers also liked

Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingSashko Stubailo
 
GraphQL across the stack: How everything fits together
GraphQL across the stack: How everything fits togetherGraphQL across the stack: How everything fits together
GraphQL across the stack: How everything fits togetherSashko Stubailo
 
GraphQL: The Missing Link Between Frontend and Backend Devs
GraphQL: The Missing Link Between Frontend and Backend DevsGraphQL: The Missing Link Between Frontend and Backend Devs
GraphQL: The Missing Link Between Frontend and Backend DevsSashko Stubailo
 
Standing out as a new grad candidate
Standing out as a new grad candidateStanding out as a new grad candidate
Standing out as a new grad candidateSashko Stubailo
 
Why UI developers love GraphQL
Why UI developers love GraphQLWhy UI developers love GraphQL
Why UI developers love GraphQLSashko Stubailo
 
Adding GraphQL to your existing architecture
Adding GraphQL to your existing architectureAdding GraphQL to your existing architecture
Adding GraphQL to your existing architectureSashko Stubailo
 
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern Apps
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern AppsMeteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern Apps
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern AppsSashko Stubailo
 

Viewers also liked (7)

Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema Stitching
 
GraphQL across the stack: How everything fits together
GraphQL across the stack: How everything fits togetherGraphQL across the stack: How everything fits together
GraphQL across the stack: How everything fits together
 
GraphQL: The Missing Link Between Frontend and Backend Devs
GraphQL: The Missing Link Between Frontend and Backend DevsGraphQL: The Missing Link Between Frontend and Backend Devs
GraphQL: The Missing Link Between Frontend and Backend Devs
 
Standing out as a new grad candidate
Standing out as a new grad candidateStanding out as a new grad candidate
Standing out as a new grad candidate
 
Why UI developers love GraphQL
Why UI developers love GraphQLWhy UI developers love GraphQL
Why UI developers love GraphQL
 
Adding GraphQL to your existing architecture
Adding GraphQL to your existing architectureAdding GraphQL to your existing architecture
Adding GraphQL to your existing architecture
 
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern Apps
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern AppsMeteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern Apps
Meteor MIT Tech Talk 9/18/14: Designing a New Platform For Modern Apps
 

Similar to GraphQL: Enabling a new generation of API developer tools

Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersSashko Stubailo
 
Implementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCImplementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCTim Burks
 
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...apidays
 
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
 
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
 
SETCON'18 - Ilya labacheuski - GraphQL adventures
SETCON'18 - Ilya labacheuski - GraphQL adventuresSETCON'18 - Ilya labacheuski - GraphQL adventures
SETCON'18 - Ilya labacheuski - GraphQL adventuresNadzeya Pus
 
Real Time Serverless Polling App
Real Time Serverless Polling AppReal Time Serverless Polling App
Real Time Serverless Polling AppSrushith Repakula
 
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...apidays
 
Vinay Kumar [InfluxData] | InfluxDB API Overview | InfluxDays 2022
Vinay Kumar [InfluxData] | InfluxDB API Overview  | InfluxDays 2022Vinay Kumar [InfluxData] | InfluxDB API Overview  | InfluxDays 2022
Vinay Kumar [InfluxData] | InfluxDB API Overview | InfluxDays 2022InfluxData
 
React and GraphQL at Stripe
React and GraphQL at StripeReact and GraphQL at Stripe
React and GraphQL at StripeSashko Stubailo
 
Delivering Developer Tools at Scale
Delivering Developer Tools at ScaleDelivering Developer Tools at Scale
Delivering Developer Tools at ScaleOracle Developers
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPAndrew Rota
 
Ibm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopIbm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopShubhra Kar
 
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
 
Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Peter Hendriks
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIsNLJUG
 
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopJimmy Guerrero
 

Similar to GraphQL: Enabling a new generation of API developer tools (20)

Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product Developers
 
Implementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPCImplementing OpenAPI and GraphQL services with gRPC
Implementing OpenAPI and GraphQL services with gRPC
 
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...
apidays LIVE Hong Kong 2021 - GraphQL : Beyond APIs, graph your enterprise by...
 
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)
 
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...
 
SETCON'18 - Ilya labacheuski - GraphQL adventures
SETCON'18 - Ilya labacheuski - GraphQL adventuresSETCON'18 - Ilya labacheuski - GraphQL adventures
SETCON'18 - Ilya labacheuski - GraphQL adventures
 
Real Time Serverless Polling App
Real Time Serverless Polling AppReal Time Serverless Polling App
Real Time Serverless Polling App
 
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...
APIdays Paris 2019 - Delivering Exceptional User Experience with REST and Gra...
 
Vinay Kumar [InfluxData] | InfluxDB API Overview | InfluxDays 2022
Vinay Kumar [InfluxData] | InfluxDB API Overview  | InfluxDays 2022Vinay Kumar [InfluxData] | InfluxDB API Overview  | InfluxDays 2022
Vinay Kumar [InfluxData] | InfluxDB API Overview | InfluxDays 2022
 
React and GraphQL at Stripe
React and GraphQL at StripeReact and GraphQL at Stripe
React and GraphQL at Stripe
 
Delivering Developer Tools at Scale
Delivering Developer Tools at ScaleDelivering Developer Tools at Scale
Delivering Developer Tools at Scale
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
 
Web Dev 21-01-2024.pptx
Web Dev 21-01-2024.pptxWeb Dev 21-01-2024.pptx
Web Dev 21-01-2024.pptx
 
Ibm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshopIbm_interconnect_restapi_workshop
Ibm_interconnect_restapi_workshop
 
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
 
Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)Practices and tools for building better API (JFall 2013)
Practices and tools for building better API (JFall 2013)
 
Practices and tools for building better APIs
Practices and tools for building better APIsPractices and tools for building better APIs
Practices and tools for building better APIs
 
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
apidays LIVE Helsinki - Implementing OpenAPI and GraphQL Services with gRPC b...
 
Seattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js WorkshopSeattle StrongLoop Node.js Workshop
Seattle StrongLoop Node.js Workshop
 

Recently uploaded

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
 
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
 
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
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
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
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
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
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
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
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
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
 

Recently uploaded (20)

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
 
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...
 
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
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
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)
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
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
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
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
 
CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
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)
 

GraphQL: Enabling a new generation of API developer tools

  • 1. Enabling a new generation of API developer tools GraphQL Sashko Stubailo @stubailo Apollo Open Source 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. 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
  • 8. 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
  • 9. Best of both worlds? Let’s look at the benefits…
  • 10. 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
  • 11. 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 } } }
  • 12. 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
  • 13. Think carefully about API needs Hardcode special endpoints User Interface Backend W I T H R E S T
  • 14. Ask for data Get the data User Interface Backend W I T H G R A P H Q L
  • 15. A better API experience
  • 16. T O O L S
  • 17. GraphiQL query editor GraphQL APIs are inherently self-documenting
  • 18. Static query analysis inside your code Without running the code, find: • Typos in fields • Wrong arguments • Deprecated fields • Identify field usage apollostack/eslint-plugin-graphql
  • 19. Query autocompletion in your editor We’re collaborating with Facebook and others on a new language service to power GraphQL features across editors and IDEs. jimkyndemeyer/js- graphql-intellij-plugin
  • 20. Typed code generation: Swift, Java, TS, Flow The above query combined with schema information outputs the type definitions on the right. apollostack/apollo-codegen
  • 22. Static queries for perf and security • Use fragments for static composition. • Queries sent to the server are predictable, and can be optimized. • Data requirements of app can be fully analyzed at build time. • Better security with persisted queries. Write your data requirements so that tooling can separate them from your UI code
  • 23. C L I E N T S
  • 24. Plain fetch Simple Predictable No UI consistency and performance features Caching client Some work required to set up and learn Easy to update the UI Manage data in one place Great dev tools GET GraphQL clients
  • 25. Easy to bind data to your UI Visit dev.apollodata.com for more code snippets.
  • 26. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
  • 27. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
  • 28. Chrome dev tools for Apollo Another benefit of using a sophisticated client is integrated tooling to understand your app.
  • 29. P R O D U C T I O N I N S I G H T S
  • 30. 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
  • 31. 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
  • 32. Optics Built entirely with Apollo and GraphQL!
  • 33. A tool for GraphQL devs to understand their APIOptics
  • 34. Conclusion • GraphQL provides a shared language to talk about data and queries • A wealth of tools can make UI devs more efficient than ever before • UI developers get insights into performance and caching • API devs know who is using the data and what to optimize for
  • 35. Enabling a new generation of API developer tools GraphQL Sashko Stubailo @stubailo Open Source Lead, Meteor Want to work on GraphQL and open source technology full time? Email me at sashko@meteor.com! Community docs and general information: graphql.org Our Medium publication, with tips and in-depth articles about GraphQL: dev-blog.apollodata.com Apollo OSS and production tools: apollodata.com