SlideShare una empresa de Scribd logo
1 de 55
Build Scalable APIs
using GraphQL and
Serverless
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
–-Lee Byron
a data-fetching API powerful
enough to describe all of
Facebook
@simona_cotin
@simona_cotin
https://facebook.com/user/id
https://facebook.com/user/id/events
https://facebook.com/user/id/friends-suggestions
https://facebook.com/user/id/friends-birthdays
@simona_cotin@simona_cotin
https://facebook.com/user/id/events
{
"name": “Webunleashed",
"location": "Toronto",
"organiser": "FITC",
"speakers": [
{
"name": “Jen Looper",
"company": " ",
"role": “Vue Vixens Founder”
}
]
}
@simona_cotin
@simona_cotin
Overfetch
Or
New endpoint
@simona_cotin
@simona_cotin
https://facebook.com/user/id/friends-suggestions
@simona_cotin
https://facebook.com/user/id/friends-suggestions/id/mutual
@simona_cotin
Underfetch
Or
New endpoint
@simona_cotin
Delay User Perception
0-100 ms Instant
100-300 ms Small perceptible delay
300-1000 ms Machine is working
1000+ ms Likely context switch
10000+ ms Task is abandoned
High performance Browser Networking
https://hpbn.co
@simona_cotin
–-Ilya Grigorik
The fastest network request is a
request not made
@simona_cotin
@simona_cotin
Schema driven
development
@simona_cotin
Strongly typed
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
✓ Performance
✓ Flexibility
✓ Tooling
GraphQL
@simona_cotin
Serverless
@simona_cotin
–-Steve Jobs
The line of code that’s the
fastest to write,that never breaks,
that doesn’t need maintenance,
is the line you never had to write.
@simona_cotin
API using Serverless
@simona_cotin
@simona_cotin
API using Serverless
@simona_cotin
API using Serverless and GraphQL
@simona_cotin
In practice
GraphQL endpoint GraphiQL UI
@simona_cotin
GraphQL
endpoint
@simona_cotin
GraphiQL
UI
@simona_cotin
✓ Reusable API
✓ Autoscaling
✓ Easy Integration
Datasources
@simona_cotin
No servers
to
manage
@simona_cotin
Serverless
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
@simona_cotin
Easy Integration of Datasources
Autoscalability
Less code
Easy Abstraction of Datasources
Single Endpoint
Smaller no requests
Serverless GraphQL
@simona_cotin
Easy Integration of Datasources
Easy Abstraction of Datasources
Autoscalability
Single Endpoint
Less code
Smaller no requests
Dev productivity
@simona_cotin
Achieve more
by
doing less
@simona_cotin
Azure Account
Azure CLI
Azure Functions
Azure Functions Premium
Azure Static Websites
Create-graphless
Workshop
https://aka.ms/sc-build-free
https://aka.ms/sc-build-cli
https://aka.ms/sc-build-functions
https://aka.ms/sc-build-premium
https://aka.ms/sc-build-static
https://aka.ms/create-graphless
https://github.com/simonaco/serverless
-graphql-workshop
Resources

Más contenido relacionado

Más de Simona Cotin

Más de Simona Cotin (12)

Doppelganger - ng-conf
Doppelganger - ng-confDoppelganger - ng-conf
Doppelganger - ng-conf
 
Build a look alike engine with machine learning and Angular
Build a look alike engine with machine learning and AngularBuild a look alike engine with machine learning and Angular
Build a look alike engine with machine learning and Angular
 
Hop on the serverless adventure - International Javascript London
Hop on the serverless adventure - International Javascript LondonHop on the serverless adventure - International Javascript London
Hop on the serverless adventure - International Javascript London
 
Build progressive web apps with Angular
Build progressive web apps with AngularBuild progressive web apps with Angular
Build progressive web apps with Angular
 
State management with ngRX
State management with ngRXState management with ngRX
State management with ngRX
 
Deploy Angular to the Cloud (ngBucharest)
Deploy Angular to the Cloud (ngBucharest)Deploy Angular to the Cloud (ngBucharest)
Deploy Angular to the Cloud (ngBucharest)
 
Build and Deploy Angular to the Cloud
Build and Deploy Angular to the CloudBuild and Deploy Angular to the Cloud
Build and Deploy Angular to the Cloud
 
Serverless adventure tooling
Serverless adventure toolingServerless adventure tooling
Serverless adventure tooling
 
Code and Deploy Angular to the Cloud
Code and Deploy Angular to the CloudCode and Deploy Angular to the Cloud
Code and Deploy Angular to the Cloud
 
Deploy Angular to the Cloud
Deploy Angular to the CloudDeploy Angular to the Cloud
Deploy Angular to the Cloud
 
From Angular to React and back again
From Angular to React and back againFrom Angular to React and back again
From Angular to React and back again
 
Music Finder
Music FinderMusic Finder
Music Finder
 

Último

%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
masabamasaba
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 

Último (20)

Exploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdfExploring the Best Video Editing App.pdf
Exploring the Best Video Editing App.pdf
 
Define the academic and professional writing..pdf
Define the academic and professional writing..pdfDefine the academic and professional writing..pdf
Define the academic and professional writing..pdf
 
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
Reassessing the Bedrock of Clinical Function Models: An Examination of Large ...
 
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112  Starting From 5K to 15K High Profile Escorts ...Chinsurah Escorts ☎️8617697112  Starting From 5K to 15K High Profile Escorts ...
Chinsurah Escorts ☎️8617697112 Starting From 5K to 15K High Profile Escorts ...
 
SHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions PresentationSHRMPro HRMS Software Solutions Presentation
SHRMPro HRMS Software Solutions Presentation
 
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
 
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
 
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
%+27788225528 love spells in Atlanta Psychic Readings, Attraction spells,Brin...
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
%in Lydenburg+277-882-255-28 abortion pills for sale in Lydenburg
 
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
 
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdfThe Top App Development Trends Shaping the Industry in 2024-25 .pdf
The Top App Development Trends Shaping the Industry in 2024-25 .pdf
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 
Unlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language ModelsUnlocking the Future of AI Agents with Large Language Models
Unlocking the Future of AI Agents with Large Language Models
 
8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students8257 interfacing 2 in microprocessor for btech students
8257 interfacing 2 in microprocessor for btech students
 
Architecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the pastArchitecture decision records - How not to get lost in the past
Architecture decision records - How not to get lost in the past
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
%in Durban+277-882-255-28 abortion pills for sale in Durban
%in Durban+277-882-255-28 abortion pills for sale in Durban%in Durban+277-882-255-28 abortion pills for sale in Durban
%in Durban+277-882-255-28 abortion pills for sale in Durban
 
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
call girls in Vaishali (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝✔️✔️
 

Build Scalable APIs Using GraphQL and Serverless

Notas del editor

  1. Turns out they do have a couple of things in common, they’re both on the hype train. Both GraphQL and Serverless are probably at the peak of their popularity where there’s literally a new community library probably created at this very moment.
  2. Another thing that they have in common is that they’re both extremely appealing to js developers. That’s not to say that they’re not being used by other types of developer, but in particular js developers ted to be excited about graphql because it changes the balance and empowers frontend developers to define their data needs without having to rely on the backend team. At the same time, serverless is also of great help to front end developers because it enables us to create small, reusable APIs for our static websites.
  3. Funnily enough, they both Both emerging at around the same time. Graphql was open sources as a specification in early 2015 and serverless late 2014.
  4. But there still one thing that connects them very strongly and this is what we’re going to spend time on discovering today
  5. You are probably familiar with the n+1 problem:when a request to load one item turns into n+1 requests since the item has n associated items. The term has been mainly described in the context of databases, specifically ORM where we lazy load child records, but it is in fact not confined to that. This is also known as a Chatty API which is one of the UGLY aspects of REST APIs. A chatty API, is any API that requires consumer to do more than a single call to perform a single, common operation
  6. Why do we care about overfetching & under fetching so much? Well because they introduce a delay in our application. And our users perceive this delay in different ways depending on its length. Anything taking more than a second will prolly make our user context switch and more than 10 seconds abandon the task. And many roundtrips to the server add delay to our application, same as parsing data to filter out fields.
  7. https://hpbn.co/
  8. https://hpbn.co/
  9. Front end and backend teams sit together and define a contract that they’re going to communicate through; an interface between the two teams
  10. A strongly typed definition of all the operations that can be run against the API and their types
  11. A graphical interactive in-browser GraphQL IDE. Syntax highlighting Intelligent type ahead of fields, arguments, types, and more. Real-time error highlighting and reporting. Automatic query completion. Run and inspect query results.
  12. You only get the data you asked for. No more, no less. Single round trip. You can query as part of a mutation too! Clients determine the size and shape of data, not servers.
  13. Codeless Because these services are created and managed by a third party, the services require you for the most part to write no back end code meaning your application has less code. Less code leads to less bugs and your application becomes that much more easy to maintain. When a new developer comes onto your team or you hand off your project to someone else in your organization, on-boarding becomes easier because the mental overhead is also decreased (there is simply less to understand). https://medium.com/@dabit3/full-stack-development-in-the-era-of-serverless-computing-c1e49bba8580?hss_channel=tw-740920470
  14. To create a GraphQL backend for our API we use the graphql-js module that exports a core subset of GraphQL functionality for creation of type systems and servers. Our entry point is the graphql function which is capable of parsing, validating and executing a graphql request. It requires a schema and a request string but we can also send query variables and operation names as well as context object
  15. Queries side by side
  16. Developer productivity