SlideShare a Scribd company logo
1 of 41
Download to read offline
The Apollo and
GraphQL stack
How everything fits together
Sashko Stubailo
Open Source Lead, Apollo
@stubailo
The goal of the Apollo team and community:
Make building great
applications simpler and more
straightforward, with GraphQL.
Today's apps can be complex:
● Multiple frontends for different platforms
● Multiple backends where data lives
● Need for team coordination across different
languages, technologies, and contexts
In this presentation, I'd like to show you how Apollo
and GraphQL can address these concerns.
Let's set the stage...
React
Android
iOS
Angular
MongoDB
Oracle
Salesforce
PostgreSQL
Microservice
What is GraphQL?
Schema definition Query language Community of tools
Why does GraphQL have so many benefits?
GraphQL organizes the mess of
ad-hoc, underspecified
endpoints.
What is Apollo?
A set of projects designed to leverage GraphQL and work together
to create a great workflow.
Client-side tooling
● Apollo Client
● Apollo iOS
● Apollo Android
● Dev tools
● apollo-codegen
● eslint-plugin-graphql
Server-side tooling
● Apollo Server
● Graphql-tools
○ Schema creation
○ Mocking
○ Stitching
● Apollo Optics
Core benefits from Apollo + GraphQL
1. Easy, fast, and simple development
2. Better maintenance, security, and coordination, especially
between teams
3. Ultimate understanding into how your app data works
Let's look at them one by one.
1. Easy, fast, and simple
development
GraphQL is easier than ever before
Apollo Client
Apollo Server
BackendBackend Backend
React
Existing REST API
● Today, it's just as fast and easy to
build with GraphQL as any other
API technology.
● Huge benefits from a flexible and
declarative approach to data.
● Save time by describing what you
need, not how to get it
A GraphQL API in just a few lines of code
https://launchpad.graphql.com/v7mnw3m03
Easily attach GraphQL data to React
https://codesandbox.io/s/jvlrl98xw3
Adding new features to your app
● This is where GraphQL really shines
● In the UI, just add a new component
● Use the existing fields in a new way, or add a few,
but no need to create an entire new endpoint
● You can build on the work you've already done
● GraphQL is like a component-based API
Migrating an existing app
Spend less time managing data
● Less time worrying about data:
○ Loading state tracking
○ Normalizing and storing data
○ Error handling
○ Async request management
● Less time building new endpoints:
○ Just build the types and fields you need
What's the Apollo team's goal here?
● We want to make sure the best option is also the easiest
● You shouldn't have to decide between simple and complicated
● Huge focus on documentation to make things easy
● Constant improvement: Apollo Client 2.0 is 5x faster and 2x smaller
2. Safety and coordination
Check your API calls ahead of time
+
Use the interaction between GraphQL schema and queries.
Great article by Zach Silviera: https://zach.codes/supercharging-react-app-development/
eslint-plugin-graphql
apollo-codegen
Validating code across the stack
● Validate your frontend code is correct as you write it, using
eslint-plugin-graphql and static type generation with apollo-codegen
● Use a CI setup to check against newly deployed schemas to ensure
your frontend remains valid
● Find breaking changes in the schema with
@entria/graphql-findbreakingchanges. Extra useful when you don't
have the frontend code.
Mocking and Schema Stitching in graphql-tools
https://dev-blog.apollodata.com/graphql-tools-2-0-with-s
chema-stitching-8944064904a5
New workflows
● "GraphQL-First" - develop the schema in parallel with the frontend
using mocking, then connect them
● Using schema stitching, develop different parts of your API in isolation,
and combine with mocking to achieve a hybrid mocked/real API
● Eliminate unneeded blockers across teams
Why GraphQL?
● GraphQL is the only technology that combines a strongly-typed static
schema with a specific query language
● No "select * from users"
● Queries more often live next to UI code, not somewhere in a totally
different place, making it easier to connect UI+queries
3. Understanding your data
Understand the data available
● Same system for building and
validating the API makes it complete
reliable
● Opt-in systems like Swagger, or
manually maintained API docs, are
often incomplete or out of date
Query language
● No way to select * in GraphQL
● You know exactly which fields are
being accessed
● GraphQL is the only tech I know of that
combines a description of the API with
a requirement to ask for specific fields
Track API field usage with Optics
What to do with this information?
● Know which fields to target for deprecation
● Know where to start optimizing
● Move from fields to operations to see what is affected
Fine-grained data
requirements
● Without GraphQL, all similar requests
for data blend together
● It's hard to trace back to UI
performance
● You want to see information per query,
not per endpoint
Optics and devtools
Similar information, across the stack: The future of Apollo
Per-field performance
Easy to know where to fix the problem
● Client side: Avoid fetching fields, split up queries, @defer
● Server side: Make the server faster, do better caching
So what's the next step for GraphQL insights?
Apollo Tracing
Broad server support
● Node
● Ruby
● Scala (Sangria)
● Java
● Elixir
● OCaml
● Even Wordpress →
My hopes for the Apollo Tracing standard
● Performance data built into every GraphQL server
● Visualize data in more places, such as GraphiQL or Apollo
Client Devtools
● Support more kinds of information, for example underlying
backend timing
● Support for schema stitching
Let's work together on it!
Zooming out
The "Apollo Platform"
Apollo Optics
Apollo Client
Apollo Server
Backend Backend Backend
React, etc
Developer tools, code
analysis, and more
Apollo iOS/Android
Swift, Java
The future of the Apollo platform
● Continue to prioritize incremental adoption and integrate
with every technology imaginable
● More tools and features that take advantage of GraphQL
across the whole stack
● Build on more community-driven standards, like Tracing
Core benefits from Apollo + GraphQL
1. Easy, fast, and simple development
2. Better maintenance, security, and coordination, especially
between teams
3. Ultimate understanding into how your app data works
Now we see how using all of the tools together gets us these
benefits.
Important: We can choose which ones we want.
Let's help people
use GraphQL,
together!
Talk to me if you have ideas about
Apollo or GraphQL.
Sashko Stubailo
@stubailo
sashko@apollodata.com
summit.graphql.com
REACTBRAZIL for 25% off

More Related Content

What's hot

GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL IntroductionSerge Huber
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
Apollo GraphQL Federation
Apollo GraphQL FederationApollo GraphQL Federation
Apollo GraphQL FederationVitebsk Miniq
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Rafael Wilber Kerr
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQLAmazon Web Services
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL Josh Price
 
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 Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL AdvancedLeanIX GmbH
 
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
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQLAppier
 

What's hot (20)

Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Intro to GraphQL
 Intro to GraphQL Intro to GraphQL
Intro to GraphQL
 
GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
Intro GraphQL
Intro GraphQLIntro GraphQL
Intro GraphQL
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
React & GraphQL
React & GraphQLReact & GraphQL
React & GraphQL
 
Graphql
GraphqlGraphql
Graphql
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
Apollo GraphQL Federation
Apollo GraphQL FederationApollo GraphQL Federation
Apollo GraphQL Federation
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)
 
Building Modern APIs with GraphQL
Building Modern APIs with GraphQLBuilding Modern APIs with GraphQL
Building Modern APIs with GraphQL
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
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 Advanced
GraphQL AdvancedGraphQL Advanced
GraphQL Advanced
 
GraphQL
GraphQLGraphQL
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
GraphQLGraphQL
GraphQL
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 

Viewers also liked

Why UI developers love GraphQL
Why UI developers love GraphQLWhy UI developers love GraphQL
Why UI developers love GraphQLSashko 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
 
Adding GraphQL to your existing architecture
Adding GraphQL to your existing architectureAdding GraphQL to your existing architecture
Adding GraphQL to your existing architectureSashko 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
 
Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingSashko 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
 
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
 

Viewers also liked (7)

Why UI developers love GraphQL
Why UI developers love GraphQLWhy UI developers love GraphQL
Why UI developers love GraphQL
 
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
 
Adding GraphQL to your existing architecture
Adding GraphQL to your existing architectureAdding GraphQL to your existing architecture
Adding GraphQL to your existing architecture
 
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
 
Modular GraphQL with Schema Stitching
Modular GraphQL with Schema StitchingModular GraphQL with Schema Stitching
Modular GraphQL with Schema Stitching
 
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
 
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
 

Similar to The Apollo and GraphQL Stack

Create GraphQL server with apolloJS
Create GraphQL server with apolloJSCreate GraphQL server with apolloJS
Create GraphQL server with apolloJSJonathan Jalouzot
 
How easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performanceHow easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performanceLuca Mattia Ferrari
 
React and GraphQL at Stripe
React and GraphQL at StripeReact and GraphQL at Stripe
React and GraphQL at StripeSashko Stubailo
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersSashko Stubailo
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentationSudheer J
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018Sashko Stubailo
 
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
 
Kotlin REST & GraphQL API
Kotlin REST & GraphQL APIKotlin REST & GraphQL API
Kotlin REST & GraphQL APISean O'Brien
 
GraphQL-ify your APIs - Devoxx UK 2021
 GraphQL-ify your APIs - Devoxx UK 2021 GraphQL-ify your APIs - Devoxx UK 2021
GraphQL-ify your APIs - Devoxx UK 2021Soham Dasgupta
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQLWSO2
 
GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0Tobias Meixner
 
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 @ Manc.JS (March 2018)
GraphQL @ Manc.JS (March 2018)GraphQL @ Manc.JS (March 2018)
GraphQL @ Manc.JS (March 2018)Chris Grice
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?Jonathan Jalouzot
 
Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryNeo4j
 
Interactive workflow management using Azkaban
Interactive workflow management using AzkabanInteractive workflow management using Azkaban
Interactive workflow management using Azkabandatamantra
 
apidays LIVE Paris - GraphQL meshes by Jens Neuse
apidays LIVE Paris - GraphQL meshes by Jens Neuseapidays LIVE Paris - GraphQL meshes by Jens Neuse
apidays LIVE Paris - GraphQL meshes by Jens Neuseapidays
 

Similar to The Apollo and GraphQL Stack (20)

Create GraphQL server with apolloJS
Create GraphQL server with apolloJSCreate GraphQL server with apolloJS
Create GraphQL server with apolloJS
 
How easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performanceHow easy (or hard) it is to monitor your graph ql service performance
How easy (or hard) it is to monitor your graph ql service performance
 
React and GraphQL at Stripe
React and GraphQL at StripeReact and GraphQL at Stripe
React and GraphQL at Stripe
 
Serverless GraphQL for Product Developers
Serverless GraphQL for Product DevelopersServerless GraphQL for Product Developers
Serverless GraphQL for Product Developers
 
GraphQL API Crafts presentation
GraphQL API Crafts presentationGraphQL API Crafts presentation
GraphQL API Crafts presentation
 
GraphQL for Native Apps
GraphQL for Native AppsGraphQL for Native Apps
GraphQL for Native Apps
 
GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018GraphQL over REST at Reactathon 2018
GraphQL over REST at Reactathon 2018
 
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...
 
Kotlin REST & GraphQL API
Kotlin REST & GraphQL APIKotlin REST & GraphQL API
Kotlin REST & GraphQL API
 
GraphQL-ify your APIs - Devoxx UK 2021
 GraphQL-ify your APIs - Devoxx UK 2021 GraphQL-ify your APIs - Devoxx UK 2021
GraphQL-ify your APIs - Devoxx UK 2021
 
Graphql usage
Graphql usageGraphql usage
Graphql usage
 
React Flux to GraphQL
React Flux to GraphQLReact Flux to GraphQL
React Flux to GraphQL
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQL
 
GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0GraphQL Bangkok meetup 5.0
GraphQL Bangkok meetup 5.0
 
Getting Started with Spring for GraphQL
Getting Started with Spring for GraphQLGetting Started with Spring for GraphQL
Getting Started with Spring for GraphQL
 
GraphQL @ Manc.JS (March 2018)
GraphQL @ Manc.JS (March 2018)GraphQL @ Manc.JS (March 2018)
GraphQL @ Manc.JS (March 2018)
 
How to use apolloJS on React ?
How to use apolloJS on React ?How to use apolloJS on React ?
How to use apolloJS on React ?
 
Training Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL LibraryTraining Series: Build APIs with Neo4j GraphQL Library
Training Series: Build APIs with Neo4j GraphQL Library
 
Interactive workflow management using Azkaban
Interactive workflow management using AzkabanInteractive workflow management using Azkaban
Interactive workflow management using Azkaban
 
apidays LIVE Paris - GraphQL meshes by Jens Neuse
apidays LIVE Paris - GraphQL meshes by Jens Neuseapidays LIVE Paris - GraphQL meshes by Jens Neuse
apidays LIVE Paris - GraphQL meshes by Jens Neuse
 

Recently uploaded

Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Inc
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.Ritesh Kanjee
 
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurPriyadarshini T
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsUniversity of Antwerp
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfCloudMetic
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...jackiepotts6
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements SolutionsIQBG inc
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfMind IT Systems
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityRandy Shoup
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energyjeyasrig
 

Recently uploaded (20)

20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
Splashtop Enterprise Brochure - Remote Computer Access and Remote Support Sof...
 
8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.8 Steps to Build a LangChain RAG Chatbot.
8 Steps to Build a LangChain RAG Chatbot.
 
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young EntrepreneurMinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
MinionLabs_Mr. Gokul Srinivas_Young Entrepreneur
 
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow ModelsMUT4SLX: Extensions for Mutation Testing of Stateflow Models
MUT4SLX: Extensions for Mutation Testing of Stateflow Models
 
Einstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdfEinstein Copilot Conversational AI for your CRM.pdf
Einstein Copilot Conversational AI for your CRM.pdf
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
03.2024_North America VMUG Optimizing RevOps using the power of ChatGPT in Ma...
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
Enterprise Content Managements Solutions
Enterprise Content Managements SolutionsEnterprise Content Managements Solutions
Enterprise Content Managements Solutions
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdfFlutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
Flutter the Future of Mobile App Development - 5 Crucial Reasons.pdf
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energy
 

The Apollo and GraphQL Stack

  • 1. The Apollo and GraphQL stack How everything fits together Sashko Stubailo Open Source Lead, Apollo @stubailo
  • 2. The goal of the Apollo team and community: Make building great applications simpler and more straightforward, with GraphQL.
  • 3. Today's apps can be complex: ● Multiple frontends for different platforms ● Multiple backends where data lives ● Need for team coordination across different languages, technologies, and contexts In this presentation, I'd like to show you how Apollo and GraphQL can address these concerns. Let's set the stage... React Android iOS Angular MongoDB Oracle Salesforce PostgreSQL Microservice
  • 4. What is GraphQL? Schema definition Query language Community of tools
  • 5. Why does GraphQL have so many benefits? GraphQL organizes the mess of ad-hoc, underspecified endpoints.
  • 6. What is Apollo? A set of projects designed to leverage GraphQL and work together to create a great workflow. Client-side tooling ● Apollo Client ● Apollo iOS ● Apollo Android ● Dev tools ● apollo-codegen ● eslint-plugin-graphql Server-side tooling ● Apollo Server ● Graphql-tools ○ Schema creation ○ Mocking ○ Stitching ● Apollo Optics
  • 7. Core benefits from Apollo + GraphQL 1. Easy, fast, and simple development 2. Better maintenance, security, and coordination, especially between teams 3. Ultimate understanding into how your app data works Let's look at them one by one.
  • 8. 1. Easy, fast, and simple development
  • 9. GraphQL is easier than ever before Apollo Client Apollo Server BackendBackend Backend React Existing REST API ● Today, it's just as fast and easy to build with GraphQL as any other API technology. ● Huge benefits from a flexible and declarative approach to data. ● Save time by describing what you need, not how to get it
  • 10. A GraphQL API in just a few lines of code https://launchpad.graphql.com/v7mnw3m03
  • 11. Easily attach GraphQL data to React https://codesandbox.io/s/jvlrl98xw3
  • 12. Adding new features to your app ● This is where GraphQL really shines ● In the UI, just add a new component ● Use the existing fields in a new way, or add a few, but no need to create an entire new endpoint ● You can build on the work you've already done ● GraphQL is like a component-based API
  • 14. Spend less time managing data ● Less time worrying about data: ○ Loading state tracking ○ Normalizing and storing data ○ Error handling ○ Async request management ● Less time building new endpoints: ○ Just build the types and fields you need
  • 15. What's the Apollo team's goal here? ● We want to make sure the best option is also the easiest ● You shouldn't have to decide between simple and complicated ● Huge focus on documentation to make things easy ● Constant improvement: Apollo Client 2.0 is 5x faster and 2x smaller
  • 16. 2. Safety and coordination
  • 17. Check your API calls ahead of time + Use the interaction between GraphQL schema and queries.
  • 18. Great article by Zach Silviera: https://zach.codes/supercharging-react-app-development/
  • 21. Validating code across the stack ● Validate your frontend code is correct as you write it, using eslint-plugin-graphql and static type generation with apollo-codegen ● Use a CI setup to check against newly deployed schemas to ensure your frontend remains valid ● Find breaking changes in the schema with @entria/graphql-findbreakingchanges. Extra useful when you don't have the frontend code.
  • 22. Mocking and Schema Stitching in graphql-tools https://dev-blog.apollodata.com/graphql-tools-2-0-with-s chema-stitching-8944064904a5
  • 23. New workflows ● "GraphQL-First" - develop the schema in parallel with the frontend using mocking, then connect them ● Using schema stitching, develop different parts of your API in isolation, and combine with mocking to achieve a hybrid mocked/real API ● Eliminate unneeded blockers across teams
  • 24. Why GraphQL? ● GraphQL is the only technology that combines a strongly-typed static schema with a specific query language ● No "select * from users" ● Queries more often live next to UI code, not somewhere in a totally different place, making it easier to connect UI+queries
  • 26. Understand the data available ● Same system for building and validating the API makes it complete reliable ● Opt-in systems like Swagger, or manually maintained API docs, are often incomplete or out of date
  • 27. Query language ● No way to select * in GraphQL ● You know exactly which fields are being accessed ● GraphQL is the only tech I know of that combines a description of the API with a requirement to ask for specific fields
  • 28. Track API field usage with Optics
  • 29. What to do with this information? ● Know which fields to target for deprecation ● Know where to start optimizing ● Move from fields to operations to see what is affected
  • 30. Fine-grained data requirements ● Without GraphQL, all similar requests for data blend together ● It's hard to trace back to UI performance ● You want to see information per query, not per endpoint
  • 31. Optics and devtools Similar information, across the stack: The future of Apollo
  • 33. Easy to know where to fix the problem ● Client side: Avoid fetching fields, split up queries, @defer ● Server side: Make the server faster, do better caching So what's the next step for GraphQL insights?
  • 35. Broad server support ● Node ● Ruby ● Scala (Sangria) ● Java ● Elixir ● OCaml ● Even Wordpress →
  • 36. My hopes for the Apollo Tracing standard ● Performance data built into every GraphQL server ● Visualize data in more places, such as GraphiQL or Apollo Client Devtools ● Support more kinds of information, for example underlying backend timing ● Support for schema stitching Let's work together on it!
  • 38. The "Apollo Platform" Apollo Optics Apollo Client Apollo Server Backend Backend Backend React, etc Developer tools, code analysis, and more Apollo iOS/Android Swift, Java
  • 39. The future of the Apollo platform ● Continue to prioritize incremental adoption and integrate with every technology imaginable ● More tools and features that take advantage of GraphQL across the whole stack ● Build on more community-driven standards, like Tracing
  • 40. Core benefits from Apollo + GraphQL 1. Easy, fast, and simple development 2. Better maintenance, security, and coordination, especially between teams 3. Ultimate understanding into how your app data works Now we see how using all of the tools together gets us these benefits. Important: We can choose which ones we want.
  • 41. Let's help people use GraphQL, together! Talk to me if you have ideas about Apollo or GraphQL. Sashko Stubailo @stubailo sashko@apollodata.com summit.graphql.com REACTBRAZIL for 25% off