Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
lamifasisi
TheFamilyTheFamily
lamifasisi
DISAGREE ON
TWITTER
DISAGREE ON
TWITTER
#CODITO
FRANÇOIS DE CAMPREDON
GraphQL
@fdecampredon

20/10/2016
Agenda
• REST Problems
• GraphQL
• Relay
• Apollo
REST
2000: Static Web
Web Browser
Web Server
Data Service
HTML
2005: AJAX
Web Browser
Web Server
Data Service
JavaScript Client
HTML API
API
• SOAP
• XML-RPC / JSON-RPC
• AMF / RemoteObjects
• Etc …
REST Advantages
• Stateless
• Cacheable
• Uniform interface
• Scalability
2010: Mobile App
Web Browser
Web Server
Data Service
JavaScript Client
HTML API
Mobile APP
/conversations /users/3
/messages/222
/conversations_for_listview
• /conversations
• /conversations_for_listview
• /conversations_special
• ….
/users/3
/v1/users/3
/v1/users/3
/v2/users/3
• /v1/conversations
• /v1/conversations_for_listview
• /v1/conversations_special
• /v2/conversations
• /v2/conversations_f...
REST problems
• Multiple round trip
• Versionning
• Endpoints multiplication
• No type system
Facebook Netflix
GraphQL Falcor
GraphQL
What is GraphQL
• A query language for API
• ≠ Database query language
• Strongly Typed
• Hierarchical
How does it works ?
• Define the types exposed by the service
• Define how the fields of those types are resolved
• Query
Basic Query
Nesting
Arguments
Alias
Fragments
Variables
Mutations
Types
Query Response
No versioning !
Advantages
• Complex Query with only one Request
• Versioning Free
• Strongly Typed
• Introspection
Examples
Relay
Relay
• Data fetching framework for React
• Features :
• Declarative
• Query Colocation
• Automatic mutations management
Container
Container composition
Variables
Mutations
• Map a GraphQL mutation
• Declare how this mutation affects the Data State
• Declare Optimistic Response
• Bett...
Examples
Relay Advantages
• Query Colocation = Isolation
• Declarative
• Productive
Relay Drawbacks
• Assumptions on how the GraphQL schema is
structured
• Black Box
• Complex
• Does not suit all the applic...
Apollo
• A stack based on GraphQL
• Apollo Server: HTTP JavaScript GraphQL server
• Apollo Client: fully-featured caching ...
Apollo client
Apollo Client vs Relay
• No build step
• Not assumptions on Schema
• http://www.codazen.com/choosing-graphql-client-apollo...
Queries
Mutations
Optimistic Updates
Apollo Advantages
• Flexibility
• Simplicity
• Evolving Fast
• Integrate well with third party library
Apollo Drawbacks
• No Container composition (not entirely true)
• No errors at build time
• Less « magic »
• Perhaps less ...
François de Campredon
@fdecampredon
https://github.com/fdecampredon/
Thanks !
GraphQL: http://graphql.org/

Relay: https:/...
SEE YOU SOON!SEE YOU SOON!
THEFAMILY.CO
How Master GraphQL by Francois de Campredon
How Master GraphQL by Francois de Campredon
Nächste SlideShare
Wird geladen in …5
×

How Master GraphQL by Francois de Campredon

815 Aufrufe

Veröffentlicht am

Our first Codito Ergo Sum meetup was on GraphQL!

GraphQL was open sourced only 1 year ago but has already been adopted by the open source ecosystem. 
This technology, designed to replace RESTFul architecture, offers incredible possibilities to help you design and manage on the long term the API of your product.
François de Campredon has talked about the advantage of GraphQL over REST then he has shown a panel of great open source technologies, like Relay or Apollo, that you can use in combination with GraphQL. ✨

François de Campredon is a full-stack developer and co-founder of Fadio IT. For the past 10 years, he has been building web and mobile applications. JavaScript lover, his main focus is to create robust and elegant architectures to help his clients to build their next amazing product.

Veröffentlicht in: Kleinunternehmen & Unternehmertum
  • Als Erste(r) kommentieren

How Master GraphQL by Francois de Campredon

  1. 1. lamifasisi TheFamilyTheFamily lamifasisi
  2. 2. DISAGREE ON TWITTER DISAGREE ON TWITTER #CODITO
  3. 3. FRANÇOIS DE CAMPREDON
  4. 4. GraphQL @fdecampredon 20/10/2016
  5. 5. Agenda • REST Problems • GraphQL • Relay • Apollo
  6. 6. REST
  7. 7. 2000: Static Web Web Browser Web Server Data Service HTML
  8. 8. 2005: AJAX Web Browser Web Server Data Service JavaScript Client HTML API
  9. 9. API • SOAP • XML-RPC / JSON-RPC • AMF / RemoteObjects • Etc …
  10. 10. REST Advantages • Stateless • Cacheable • Uniform interface • Scalability
  11. 11. 2010: Mobile App Web Browser Web Server Data Service JavaScript Client HTML API Mobile APP
  12. 12. /conversations /users/3 /messages/222 /conversations_for_listview
  13. 13. • /conversations • /conversations_for_listview • /conversations_special • ….
  14. 14. /users/3 /v1/users/3 /v1/users/3 /v2/users/3
  15. 15. • /v1/conversations • /v1/conversations_for_listview • /v1/conversations_special • /v2/conversations • /v2/conversations_for_listview • /v2/conversations_special • ….
  16. 16. REST problems • Multiple round trip • Versionning • Endpoints multiplication • No type system
  17. 17. Facebook Netflix GraphQL Falcor
  18. 18. GraphQL
  19. 19. What is GraphQL • A query language for API • ≠ Database query language • Strongly Typed • Hierarchical
  20. 20. How does it works ? • Define the types exposed by the service • Define how the fields of those types are resolved • Query
  21. 21. Basic Query
  22. 22. Nesting
  23. 23. Arguments
  24. 24. Alias
  25. 25. Fragments
  26. 26. Variables
  27. 27. Mutations
  28. 28. Types
  29. 29. Query Response
  30. 30. No versioning !
  31. 31. Advantages • Complex Query with only one Request • Versioning Free • Strongly Typed • Introspection
  32. 32. Examples
  33. 33. Relay
  34. 34. Relay • Data fetching framework for React • Features : • Declarative • Query Colocation • Automatic mutations management
  35. 35. Container
  36. 36. Container composition
  37. 37. Variables
  38. 38. Mutations • Map a GraphQL mutation • Declare how this mutation affects the Data State • Declare Optimistic Response • Better described by Example
  39. 39. Examples
  40. 40. Relay Advantages • Query Colocation = Isolation • Declarative • Productive
  41. 41. Relay Drawbacks • Assumptions on how the GraphQL schema is structured • Black Box • Complex • Does not suit all the applications
  42. 42. Apollo • A stack based on GraphQL • Apollo Server: HTTP JavaScript GraphQL server • Apollo Client: fully-featured caching GraphQL client, with binding for React, Angular, IOS and android • graphql-tools: Alternative approach to constructing GraphQL schema. • And a lot more …
  43. 43. Apollo client
  44. 44. Apollo Client vs Relay • No build step • Not assumptions on Schema • http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/
  45. 45. Queries
  46. 46. Mutations
  47. 47. Optimistic Updates
  48. 48. Apollo Advantages • Flexibility • Simplicity • Evolving Fast • Integrate well with third party library
  49. 49. Apollo Drawbacks • No Container composition (not entirely true) • No errors at build time • Less « magic » • Perhaps less performant ? • Not Facebook ? :p
  50. 50. François de Campredon @fdecampredon https://github.com/fdecampredon/ Thanks ! GraphQL: http://graphql.org/ Relay: https://facebook.github.io/relay/ Apollo: http://dev.apollodata.com/
  51. 51. SEE YOU SOON!SEE YOU SOON! THEFAMILY.CO

×