Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Zensations Drupal 8 GraphQL Presentation 2015

1,495 views

Published on

Presentation from Sebastian Siemssen at the Drupal Camp 2015 in Vienna relating to modern web development and integration of GraphQL in Drupal 8.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Zensations Drupal 8 GraphQL Presentation 2015

  1. 1. GRAPHQL Sebastian Siemssen @thefubhy
  2. 2. A LITTLE STORY …
  3. 3. ‣ Requires multiple round trips for fetching complex object graphs ‣ Over fetching — As the model grows, so does the payload ‣ High potential for breaking API changes ‣ Structure of the response dictated by the server ‣ Potentially a huge amount of different endpoints and thus complexity ‣ No formal specification resulting in various other shortcomings PROBLEMS WITH REST
  4. 4. DEAR REST, I STILL LOVE YOU !
  5. 5. Multiple round trips When fetching complex, relational data structures: In order to descent further into the object graph, multiple round trips to the server are required.
  6. 6. Over fetching Unless specifically designed for a given purpose, you often have to deal with needlessly large and bloated responses.
  7. 7. Compatibility and versioning By changing your model you are very likely to break your APIs. API versioning can mitigate that potential damage at the cost of exponentially increasing complexity.
  8. 8. Endpoints galore Attempting to circumvent the aforementioned problems often leads to a huge amount of bespoke/ ad-hoc endpoints. This, in turn, inevitably increases the complexity of your application.
  9. 9. Your API is usually composed of a spectrum of different interpretations of REST
  10. 10. No formal specification No prescribed pattern for deprecation. No standardized introspection functionality. …
  11. 11. REST IS WHAT YOU MAKE IT
  12. 12. „This is not not how we as product developers think about data. Product developers think of data in terms of graphs.“ Nick Schrock
  13. 13. Code cartoons by Lin Clark
  14. 14. WHAT IS GRAPHQL?
  15. 15. What is GraphQL? GraphQL is a query language designed to build client applications by providing an intuitive and flexible syntax and system for describing their data requirements and interactions.
  16. 16. IT IS NOT A QUERY LANGUAGE FOR A GRAPH DATABASE
  17. 17. GRAPHQL IS AGNOSTIC TO YOUR STORAGE LAYER
  18. 18. {      me  {          name      }   }
  19. 19. {      'me':  {          'name':  'Sebastian  Siemssen'      }   } {      me  {          name      }   }
  20. 20. {      user(id:  123)  {          name      }   }
  21. 21. {      user(id:  123)  {          name      }   } {      'user':  {          'name':  'Sebastian  Siemssen'      }   }
  22. 22. {      'me':  {          'name':  'Sebastian  Siemssen',          'company':  {              'name':  'Zensations',              'website':  'http://zensations.at'          }      }   } {      me  {          name,       company  {              name,              website          }      }   }
  23. 23. {      'me':  {          'name':  'Sebastian  Siemssen',          'profilePic':  {              'width':  100,              'height':  200,              'url':  'http://...'          }      }   } {      me  {          name,       profilePic(size:  100)  {              width,              height,              url          }      }   }
  24. 24. {      'me':  {          'name':  'Sebastian  Siemssen',          'small':  {              'width':  100,              'height':  200,              'url':  'http://...'          },          'large':  {              'width':  300,              'height':  600,              'url':  'http://...'          }      }   } {      me  {          name,       small:profilePic(size:  100)  {              width,              height,              url          },       large:profilePic(size:  300)  {              width,              height,              url          }      }   }
  25. 25. {      'me':  {          'name':  'Sebastian  Siemssen',          'articles':  [         {                  'title':  'GraphQL  rocks'              },         {                  'title':  'Ruben  sucks'              },         {                  'title':  '...'              },         {                  'title':  '...'              },          ]      }   } {      me  {          name,       articles  {              title          }      }   }
  26. 26. {      'me':  {          'name':  'Sebastian  Siemssen',          'articles':  [              {                  'title':  'GraphQL  rocks',                  'comments':  [                      {                          'author':  {                              'name':  'Ruben  Teijeiro',                              'label':  'This  is  sorcercy!'                          }                      },                      {                          'author':  {                              'name':  'Dries  Buytaert',                              'label':  'We  need  that  in  core!'                          }                      }                  ]              }          ]      }   } {      me  {          name,       articles  {              title,              comments(first:  10)  {                  author  {                      name,                      label                  }              }          }      }   }
  27. 27. Code cartoons by Lin Clark
  28. 28. Code cartoons by Lin Clark
  29. 29. Code cartoons by Lin Clark
  30. 30. GRAPHQL CHANGES THE SERVER — CLIENT RELATIONSHIP
  31. 31. THE SERVER PUBLISHES ITS POSSIBILITIES THE CLIENT SPECIFIES ITS REQUIREMENTS
  32. 32. type  Query  {      me:  User,      user:  (id:  Int!):  User   } {      me  {          name      },      user(id:  123)  {          name      }   }
  33. 33. type  User  {      name:  String,      articles:  (first:  Int,  orderBy:  ArticleOrderEnum):  [Article]   } {      me  {          name          articles(first:  10,  orderBy:  CREATION_DATE)      },      user(id:  123)  {          name,          articles(first:  10,  orderBy:  CREATION_DATE)      }   } enum  ArticleOrderEnum  [      CREATION_DATE,      CHANGED_DATE,      IMPORTANCE   ]
  34. 34. TYPE INTROSPECTION
  35. 35. {      __schema  {          queryType  {              name          },          types  {              name,              fields  {                  name,                  type  {                      kind                      name,                      ofType  {                          name                      }                  }              }          }      }   }
  36. 36. BUILDING A GRAPHQL SERVER
  37. 37. GraphQL Your application code Database External APIs Others
  38. 38. type  User  {      name(user)  {          return  user.name;      },      articles(user,  arguments)  {          return  storage-­‐>load(…);      }   }
  39. 39. There is even more … Conditionals, Fragments, Mutations, Subscriptions, …
  40. 40. DEMO
  41. 41. QUESTIONS
  42. 42. ‣ RFC Working Draft: https://facebook.github.io/graphql/ ‣ Reference implemenetation: https://github.com/graphql/graphql-js ‣ GraphiQL: https://github.com/graphql/graphiql ‣ StarWars API Playground: http://graphql-swapi.parseapp.com/ ‣ GraphQL Relay: https://facebook.github.io/relay/docs/graphql-relay-specification.html ‣ Learn GraphQL: https://learngraphql.com/ ‣ … RESOURCES
  43. 43. A Wiedner Hauptstraße 64 
 1040 Wien T 01 89 00 179 M office@zensations.at W www.zensations.at

×