SlideShare uma empresa Scribd logo
1 de 83
Baixar para ler offline
{
name
web
role
company
}
type User {
id: String!
name: String!
web: Web!
role: Role!
company: String!
}
{
“name”: “Nicola Molinari”,
“web”: {
“twitter”: “emmenko”,
“github”: “emmenko”,
},
“role”: “SOFTWARE_ENGINEER”,
“company”: “commercetools”
}
⇒ ⇒
We should share more
brown field examples.
How We Use GraphQL At Commercetools
How it started
React Europe 2015
Release of GraphQL Spec
Oleg
Reading the GraphQL Spec
‘till late that night.
From there was born
http://sangria-graphql.org/
Scala GraphQL implementation
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
Merchant CenterMerchant Center
UI Application
To manage the data in
the platform.
UI Application
To manage the data in
the platform.
UI Application
To manage the data in
the platform.
UI Application
To manage the data in
the platform.
● Powered by React
● Designed to be User Friendly
● Focus on Enterprise Features
Nowadays building good UI
Applications is hard.
>> JavaScript Fatigue
https://code-cartoons.com - Lin Clark
Data Fetching: underfetching / overfetching
Experience #1
Feature
User can see and explore a category tree.
How categories work in commercetools platform
[
{
// root category
"id": "1",
"key": "shoes",
"parent": null,
"ancestors": []
},
{
// subcategory of `shoes`
"id": "2",
"key": "sport-shoes",
"parent": { "id": "1", "typeId": "category" },
"ancestors": [{ "id": "1", "typeId": "category" }]
}
]
Fetching categories with their children (REST API)
`parent = null`
(root categories)
`parent = “1”`
(subcategories of “1”)
id: “1”
`parent = “2”`
(subcategories of “2”)
id: “2”
3 requests
User can see and explore a category tree,
and see the number of subcategories and the number
of products assigned to the category.
(new) Feature
Fetching categories, # of subcategories, # of products
`parent = null`
(root categories)
`parent = “1”`
(subcategories of “1”)
id: “1”
`parent = “2”`
(subcategories of “2”)
id: “2”
2n+1 requests
# sub.
# prod.
0..n
0..n
# sub.
# prod.
0..n
0..n
“2n + 1” problem
> 100 requests in a project with an average
number of categories
{
categories(parent: “1”) {
id
}
}
{
categories(parent: “1”) {
id
childCount
productCount
children {
id
childCount
productCount
}
}
}
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
We were able to
solve a big problem
with a small effort.
What if we would build it with REST?
What if we would build it with REST?
● Build a new endpoint with the extra fields
What if we would build it with REST?
● Build a new endpoint with the extra fields
Increase maintenance
What if we would build it with REST?
● Build a new endpoint with the extra fields
Increase maintenance
It’s a public API, but just for one case
What if we would build it with REST?
● Build a new endpoint with the extra fields
Increase maintenance
It’s a public API, but just for one case
● Add the extra fields to the existing endpoint
What if we would build it with REST?
● Build a new endpoint with the extra fields
Increase maintenance
It’s a public API, but just for one case
● Add the extra fields to the existing endpoint
Possibly a huge performance hit
What if we would build it with REST?
● Build a new endpoint with the extra fields
Increase maintenance
It’s a public API, but just for one case
● Add the extra fields to the existing endpoint
Possibly a huge performance hit
There were not enough use cases to justify a change in the API
With GraphQL
With GraphQL
● Easy to extend the schema
With GraphQL
● Easy to extend the schema
● Does not affect maintainability (only 1 API / endpoint)
With GraphQL
● Easy to extend the schema
● Does not affect maintainability (only 1 API / endpoint)
● Performance hit on a field level, only when requested
Extend the existing API
without affecting its
performance.
Enable optimizations on a
field level.
Experience #2
Client
HTTP API
/user
/projects
/organizations
/project-settings
Bootstrapping the client application
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
Problems
Problems
● Data was not normalized
Problems
● Data was not normalized
● > 50% of the data was never used
Problems
● Data was not normalized
● > 50% of the data was never used
● Complicated business logic, hard to follow and understand
Problems
● Data was not normalized
● > 50% of the data was never used
● Complicated business logic, hard to follow and understand
● We had some crucial bugs related to that logic
Feature
Show a list of user permissions.
Technical Refactoring + User Story
Don’t work on Tech Debts alone.
Instead always include them in
a User Story if they bring User
Value.
Technical Requirements for the Refactoring
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
Client
HTTP API
/user
/projects
/organizations
/project-settings
Create the GraphQL schema first
Client
HTTP API
/user
/projects
/organizations
/project-settings
Deploy the new endpoint alongside the existing APIs
/graphql
Client
HTTP API
/user
/projects
/organizations
/project-settings
Migrate the client to use Apollo
/graphql
Client
HTTP API
/user
/projects
/organizations
/project-settings
(optional) Remove the old APIs
/graphql
Incrementally migrate your
APIs into a GraphQL
endpoint.
Technical Requirements for the Refactoring
● Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
● The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
✅ The client should only get the data that is asking for
● Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
✅ The client should only get the data that is asking for
✅ Reduce the complexity of the business logic
● Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
✅ The client should only get the data that is asking for
✅ Reduce the complexity of the business logic
✅ Have normalized data + caching
● Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
✅ The client should only get the data that is asking for
✅ Reduce the complexity of the business logic
✅ Have normalized data + caching
✅ Being able to easily extend the model / schema
● Make it easier to gather metrics
Technical Requirements for the Refactoring
✅ Reduce the number of network requests to one when bootstrapping the application
✅ The client should only get the data that is asking for
✅ Reduce the complexity of the business logic
✅ Have normalized data + caching
✅ Being able to easily extend the model / schema
✅ Make it easier to gather metrics
Client
HTTP API
/user
/projects
/organizations
/project-settings
GraphQL Metrics with Apollo Optics
/graphql
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools
Next steps: optimize queries
slow queriesfast queries
Sangria slow-queries
Sangria slow-queries (profiling)
Sangria slow-queries (metrics)
Our Learnings
Our Learnings
● Incrementally adopt GraphQL to
your existing API
Our Learnings
● Incrementally adopt GraphQL to
your existing API
● Incrementally adopt tools like Apollo
/ Relay next to your code, to reduce
boilerplate code and complexity
Our Learnings
● Incrementally adopt GraphQL to
your existing API
● Incrementally adopt tools like Apollo
/ Relay next to your code, to reduce
boilerplate code and complexity
● GraphQL allows to easily extend
your API with small effort
Our Learnings
● Incrementally adopt GraphQL to
your existing API
● Incrementally adopt tools like Apollo
/ Relay next to your code, to reduce
boilerplate code and complexity
● GraphQL allows to easily extend
your API with small effort
● Performance hits are on a field level,
only when requested
Our Learnings
● Incrementally adopt GraphQL to
your existing API
● Incrementally adopt tools like Apollo
/ Relay next to your code, to reduce
boilerplate code and complexity
● GraphQL allows to easily extend
your API with small effort
● Performance hits are on a field level,
only when requested
● Easy to identify bottlenecks on
specific fields and to optimize those
Thanks
Questions?

Mais conteúdo relacionado

Mais procurados

GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL IntroductionSerge Huber
 
An intro to GraphQL
An intro to GraphQLAn intro to GraphQL
An intro to GraphQLvaluebound
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL Josh Price
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Rafael Wilber Kerr
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQLSquareboat
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQLTomasz Bak
 
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
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparReact London Community
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQLRodrigo Prates
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL StackSashko Stubailo
 
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: 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
 
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
 
Performance optimisation with GraphQL
Performance optimisation with GraphQLPerformance optimisation with GraphQL
Performance optimisation with GraphQLyann_s
 
Enterprise graph applications
Enterprise graph applicationsEnterprise graph applications
Enterprise graph applicationsDavid Colebatch
 

Mais procurados (20)

GraphQL Introduction
GraphQL IntroductionGraphQL Introduction
GraphQL Introduction
 
GraphQL
GraphQLGraphQL
GraphQL
 
An intro to GraphQL
An intro to GraphQLAn intro to GraphQL
An intro to GraphQL
 
Better APIs with GraphQL
Better APIs with GraphQL Better APIs with GraphQL
Better APIs with GraphQL
 
Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)Graphql Intro (Tutorial and Example)
Graphql Intro (Tutorial and Example)
 
GraphQL + relay
GraphQL + relayGraphQL + relay
GraphQL + relay
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQL
 
How to GraphQL
How to GraphQLHow to GraphQL
How to GraphQL
 
GraphQL & Relay
GraphQL & RelayGraphQL & Relay
GraphQL & Relay
 
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
 
London React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor CharyparLondon React August - GraphQL at The Financial Times - Viktor Charypar
London React August - GraphQL at The Financial Times - Viktor Charypar
 
Introduction to GraphQL
Introduction to GraphQLIntroduction to GraphQL
Introduction to GraphQL
 
The Apollo and GraphQL Stack
The Apollo and GraphQL StackThe Apollo and GraphQL Stack
The Apollo and GraphQL Stack
 
GraphQL
GraphQLGraphQL
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)
 
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
 
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
 
Performance optimisation with GraphQL
Performance optimisation with GraphQLPerformance optimisation with GraphQL
Performance optimisation with GraphQL
 
Graphql
GraphqlGraphql
Graphql
 
Enterprise graph applications
Enterprise graph applicationsEnterprise graph applications
Enterprise graph applications
 

Semelhante a GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools

(ATS6-DEV02) Web Application Strategies
(ATS6-DEV02) Web Application Strategies(ATS6-DEV02) Web Application Strategies
(ATS6-DEV02) Web Application StrategiesBIOVIA
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraLINAGORA
 
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)Ido Green
 
Streamlining Workflows: Unleashing Automation with Azure and Power Automate
Streamlining Workflows: Unleashing Automation with Azure and Power AutomateStreamlining Workflows: Unleashing Automation with Azure and Power Automate
Streamlining Workflows: Unleashing Automation with Azure and Power AutomateHamida Rebai Trabelsi
 
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...MysoreMuleSoftMeetup
 
Salesforce Developer Workshop for GDF Suez Hackathon
Salesforce Developer Workshop for GDF Suez HackathonSalesforce Developer Workshop for GDF Suez Hackathon
Salesforce Developer Workshop for GDF Suez HackathonPeter Chittum
 
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...SAP Cloud Platform
 
Your Roadmap for An Enterprise Graph Strategy
Your Roadmap for An Enterprise Graph Strategy Your Roadmap for An Enterprise Graph Strategy
Your Roadmap for An Enterprise Graph Strategy Neo4j
 
Scaling Ride-Hailing with Machine Learning on MLflow
Scaling Ride-Hailing with Machine Learning on MLflowScaling Ride-Hailing with Machine Learning on MLflow
Scaling Ride-Hailing with Machine Learning on MLflowDatabricks
 
Supercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the EdgeSupercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the EdgeOptimizely
 
Datadog APM Product Launch
Datadog APM Product LaunchDatadog APM Product Launch
Datadog APM Product LaunchBrett Sheppard
 
PyCon Korea - Real World Graphene
PyCon Korea - Real World GraphenePyCon Korea - Real World Graphene
PyCon Korea - Real World GrapheneMarcin Gębala
 
Partner Connect APAC - 2022 - April
Partner Connect APAC - 2022 - AprilPartner Connect APAC - 2022 - April
Partner Connect APAC - 2022 - Aprilconfluent
 
APIfying an ERP - ongoing saga
APIfying an ERP - ongoing sagaAPIfying an ERP - ongoing saga
APIfying an ERP - ongoing sagaMarjukka Niinioja
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQLWSO2
 
Engage 2013 - Flexible Data Access with APIs
Engage 2013 - Flexible Data Access with APIsEngage 2013 - Flexible Data Access with APIs
Engage 2013 - Flexible Data Access with APIsWebtrends
 
Next-Generation Kubernetes Optimization: Optimize Live 2.0
Next-Generation Kubernetes Optimization: Optimize Live 2.0Next-Generation Kubernetes Optimization: Optimize Live 2.0
Next-Generation Kubernetes Optimization: Optimize Live 2.0StormForge .io
 
Product Keynote: Server and Data Center
Product Keynote: Server and Data CenterProduct Keynote: Server and Data Center
Product Keynote: Server and Data CenterAtlassian
 
Impact2014: Practical Performance Troubleshooting
Impact2014: Practical Performance TroubleshootingImpact2014: Practical Performance Troubleshooting
Impact2014: Practical Performance TroubleshootingChris Bailey
 

Semelhante a GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools (20)

(ATS6-DEV02) Web Application Strategies
(ATS6-DEV02) Web Application Strategies(ATS6-DEV02) Web Application Strategies
(ATS6-DEV02) Web Application Strategies
 
Angular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - LinagoraAngular (v2 and up) - Morning to understand - Linagora
Angular (v2 and up) - Morning to understand - Linagora
 
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)
Entrepreneurship Tips With HTML5 & App Engine Startup Weekend (June 2012)
 
Streamlining Workflows: Unleashing Automation with Azure and Power Automate
Streamlining Workflows: Unleashing Automation with Azure and Power AutomateStreamlining Workflows: Unleashing Automation with Azure and Power Automate
Streamlining Workflows: Unleashing Automation with Azure and Power Automate
 
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...
Anypoint DataGraph - Consume & Re-use your APIs faster | MuleSoft Mysore Meet...
 
Salesforce Developer Workshop for GDF Suez Hackathon
Salesforce Developer Workshop for GDF Suez HackathonSalesforce Developer Workshop for GDF Suez Hackathon
Salesforce Developer Workshop for GDF Suez Hackathon
 
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
Overview and Walkthrough of the Application Programming Model with SAP Cloud ...
 
Your Roadmap for An Enterprise Graph Strategy
Your Roadmap for An Enterprise Graph Strategy Your Roadmap for An Enterprise Graph Strategy
Your Roadmap for An Enterprise Graph Strategy
 
Anypoint Data Graphs
Anypoint Data GraphsAnypoint Data Graphs
Anypoint Data Graphs
 
Scaling Ride-Hailing with Machine Learning on MLflow
Scaling Ride-Hailing with Machine Learning on MLflowScaling Ride-Hailing with Machine Learning on MLflow
Scaling Ride-Hailing with Machine Learning on MLflow
 
Supercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the EdgeSupercharging Optimizely Performance by Moving Decisions to the Edge
Supercharging Optimizely Performance by Moving Decisions to the Edge
 
Datadog APM Product Launch
Datadog APM Product LaunchDatadog APM Product Launch
Datadog APM Product Launch
 
PyCon Korea - Real World Graphene
PyCon Korea - Real World GraphenePyCon Korea - Real World Graphene
PyCon Korea - Real World Graphene
 
Partner Connect APAC - 2022 - April
Partner Connect APAC - 2022 - AprilPartner Connect APAC - 2022 - April
Partner Connect APAC - 2022 - April
 
APIfying an ERP - ongoing saga
APIfying an ERP - ongoing sagaAPIfying an ERP - ongoing saga
APIfying an ERP - ongoing saga
 
API Management for GraphQL
API Management for GraphQLAPI Management for GraphQL
API Management for GraphQL
 
Engage 2013 - Flexible Data Access with APIs
Engage 2013 - Flexible Data Access with APIsEngage 2013 - Flexible Data Access with APIs
Engage 2013 - Flexible Data Access with APIs
 
Next-Generation Kubernetes Optimization: Optimize Live 2.0
Next-Generation Kubernetes Optimization: Optimize Live 2.0Next-Generation Kubernetes Optimization: Optimize Live 2.0
Next-Generation Kubernetes Optimization: Optimize Live 2.0
 
Product Keynote: Server and Data Center
Product Keynote: Server and Data CenterProduct Keynote: Server and Data Center
Product Keynote: Server and Data Center
 
Impact2014: Practical Performance Troubleshooting
Impact2014: Practical Performance TroubleshootingImpact2014: Practical Performance Troubleshooting
Impact2014: Practical Performance Troubleshooting
 

Último

Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native BuildpacksVish Abrams
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampVICTOR MAESTRE RAMIREZ
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...OnePlan Solutions
 
Vectors are the new JSON in PostgreSQL (SCaLE 21x)
Vectors are the new JSON in PostgreSQL (SCaLE 21x)Vectors are the new JSON in PostgreSQL (SCaLE 21x)
Vectors are the new JSON in PostgreSQL (SCaLE 21x)Jonathan Katz
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentBOSC Tech Labs
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadIvo Andreev
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Incrobinwilliams8624
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptkinjal48
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024ThousandEyes
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App DevelopmentMobulous Technologies
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxJoão Esperancinha
 

Último (20)

Streamlining Your Application Builds with Cloud Native Buildpacks
Streamlining Your Application Builds  with Cloud Native BuildpacksStreamlining Your Application Builds  with Cloud Native Buildpacks
Streamlining Your Application Builds with Cloud Native Buildpacks
 
Salesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptxSalesforce AI Associate Certification.pptx
Salesforce AI Associate Certification.pptx
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Deep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - DatacampDeep Learning for Images with PyTorch - Datacamp
Deep Learning for Images with PyTorch - Datacamp
 
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
Transforming PMO Success with AI - Discover OnePlan Strategic Portfolio Work ...
 
Vectors are the new JSON in PostgreSQL (SCaLE 21x)
Vectors are the new JSON in PostgreSQL (SCaLE 21x)Vectors are the new JSON in PostgreSQL (SCaLE 21x)
Vectors are the new JSON in PostgreSQL (SCaLE 21x)
 
React 19: Revolutionizing Web Development
React 19: Revolutionizing Web DevelopmentReact 19: Revolutionizing Web Development
React 19: Revolutionizing Web Development
 
Kawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in TrivandrumKawika Technologies pvt ltd Software Development Company in Trivandrum
Kawika Technologies pvt ltd Software Development Company in Trivandrum
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
Cybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and BadCybersecurity Challenges with Generative AI - for Good and Bad
Cybersecurity Challenges with Generative AI - for Good and Bad
 
Enterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze IncEnterprise Document Management System - Qualityze Inc
Enterprise Document Management System - Qualityze Inc
 
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Webinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.pptWebinar_050417_LeClair12345666777889.ppt
Webinar_050417_LeClair12345666777889.ppt
 
New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024New ThousandEyes Product Features and Release Highlights: March 2024
New ThousandEyes Product Features and Release Highlights: March 2024
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 
Understanding Native Mobile App Development
Understanding Native Mobile App DevelopmentUnderstanding Native Mobile App Development
Understanding Native Mobile App Development
 
Fields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptxFields in Java and Kotlin and what to expect.pptx
Fields in Java and Kotlin and what to expect.pptx
 

GraphQL Munich Meetup #1 - How We Use GraphQL At Commercetools

  • 1. { name web role company } type User { id: String! name: String! web: Web! role: Role! company: String! } { “name”: “Nicola Molinari”, “web”: { “twitter”: “emmenko”, “github”: “emmenko”, }, “role”: “SOFTWARE_ENGINEER”, “company”: “commercetools” } ⇒ ⇒
  • 2. We should share more brown field examples.
  • 3. How We Use GraphQL At Commercetools
  • 5. React Europe 2015 Release of GraphQL Spec
  • 6. Oleg Reading the GraphQL Spec ‘till late that night.
  • 7. From there was born http://sangria-graphql.org/ Scala GraphQL implementation
  • 10. UI Application To manage the data in the platform. UI Application To manage the data in the platform.
  • 11. UI Application To manage the data in the platform. UI Application To manage the data in the platform. ● Powered by React ● Designed to be User Friendly ● Focus on Enterprise Features
  • 12. Nowadays building good UI Applications is hard. >> JavaScript Fatigue
  • 13. https://code-cartoons.com - Lin Clark Data Fetching: underfetching / overfetching
  • 15. Feature User can see and explore a category tree.
  • 16. How categories work in commercetools platform [ { // root category "id": "1", "key": "shoes", "parent": null, "ancestors": [] }, { // subcategory of `shoes` "id": "2", "key": "sport-shoes", "parent": { "id": "1", "typeId": "category" }, "ancestors": [{ "id": "1", "typeId": "category" }] } ]
  • 17. Fetching categories with their children (REST API) `parent = null` (root categories) `parent = “1”` (subcategories of “1”) id: “1” `parent = “2”` (subcategories of “2”) id: “2” 3 requests
  • 18. User can see and explore a category tree, and see the number of subcategories and the number of products assigned to the category. (new) Feature
  • 19. Fetching categories, # of subcategories, # of products `parent = null` (root categories) `parent = “1”` (subcategories of “1”) id: “1” `parent = “2”` (subcategories of “2”) id: “2” 2n+1 requests # sub. # prod. 0..n 0..n # sub. # prod. 0..n 0..n
  • 20. “2n + 1” problem
  • 21. > 100 requests in a project with an average number of categories
  • 25. We were able to solve a big problem with a small effort.
  • 26. What if we would build it with REST?
  • 27. What if we would build it with REST? ● Build a new endpoint with the extra fields
  • 28. What if we would build it with REST? ● Build a new endpoint with the extra fields Increase maintenance
  • 29. What if we would build it with REST? ● Build a new endpoint with the extra fields Increase maintenance It’s a public API, but just for one case
  • 30. What if we would build it with REST? ● Build a new endpoint with the extra fields Increase maintenance It’s a public API, but just for one case ● Add the extra fields to the existing endpoint
  • 31. What if we would build it with REST? ● Build a new endpoint with the extra fields Increase maintenance It’s a public API, but just for one case ● Add the extra fields to the existing endpoint Possibly a huge performance hit
  • 32. What if we would build it with REST? ● Build a new endpoint with the extra fields Increase maintenance It’s a public API, but just for one case ● Add the extra fields to the existing endpoint Possibly a huge performance hit There were not enough use cases to justify a change in the API
  • 34. With GraphQL ● Easy to extend the schema
  • 35. With GraphQL ● Easy to extend the schema ● Does not affect maintainability (only 1 API / endpoint)
  • 36. With GraphQL ● Easy to extend the schema ● Does not affect maintainability (only 1 API / endpoint) ● Performance hit on a field level, only when requested
  • 37. Extend the existing API without affecting its performance.
  • 38. Enable optimizations on a field level.
  • 43. Problems ● Data was not normalized
  • 44. Problems ● Data was not normalized ● > 50% of the data was never used
  • 45. Problems ● Data was not normalized ● > 50% of the data was never used ● Complicated business logic, hard to follow and understand
  • 46. Problems ● Data was not normalized ● > 50% of the data was never used ● Complicated business logic, hard to follow and understand ● We had some crucial bugs related to that logic
  • 47. Feature Show a list of user permissions.
  • 49. Don’t work on Tech Debts alone. Instead always include them in a User Story if they bring User Value.
  • 50. Technical Requirements for the Refactoring
  • 51. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application
  • 52. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for
  • 53. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic
  • 54. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching
  • 55. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema
  • 56. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 59. Client HTTP API /user /projects /organizations /project-settings Deploy the new endpoint alongside the existing APIs /graphql
  • 62. Incrementally migrate your APIs into a GraphQL endpoint.
  • 63. Technical Requirements for the Refactoring ● Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 64. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ● The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 65. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ✅ The client should only get the data that is asking for ● Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 66. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ✅ The client should only get the data that is asking for ✅ Reduce the complexity of the business logic ● Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 67. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ✅ The client should only get the data that is asking for ✅ Reduce the complexity of the business logic ✅ Have normalized data + caching ● Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 68. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ✅ The client should only get the data that is asking for ✅ Reduce the complexity of the business logic ✅ Have normalized data + caching ✅ Being able to easily extend the model / schema ● Make it easier to gather metrics
  • 69. Technical Requirements for the Refactoring ✅ Reduce the number of network requests to one when bootstrapping the application ✅ The client should only get the data that is asking for ✅ Reduce the complexity of the business logic ✅ Have normalized data + caching ✅ Being able to easily extend the model / schema ✅ Make it easier to gather metrics
  • 73. Next steps: optimize queries slow queriesfast queries
  • 78. Our Learnings ● Incrementally adopt GraphQL to your existing API
  • 79. Our Learnings ● Incrementally adopt GraphQL to your existing API ● Incrementally adopt tools like Apollo / Relay next to your code, to reduce boilerplate code and complexity
  • 80. Our Learnings ● Incrementally adopt GraphQL to your existing API ● Incrementally adopt tools like Apollo / Relay next to your code, to reduce boilerplate code and complexity ● GraphQL allows to easily extend your API with small effort
  • 81. Our Learnings ● Incrementally adopt GraphQL to your existing API ● Incrementally adopt tools like Apollo / Relay next to your code, to reduce boilerplate code and complexity ● GraphQL allows to easily extend your API with small effort ● Performance hits are on a field level, only when requested
  • 82. Our Learnings ● Incrementally adopt GraphQL to your existing API ● Incrementally adopt tools like Apollo / Relay next to your code, to reduce boilerplate code and complexity ● GraphQL allows to easily extend your API with small effort ● Performance hits are on a field level, only when requested ● Easy to identify bottlenecks on specific fields and to optimize those