Upload
thefamily
View
304
Download
0
Embed Size (px)
Citation preview
lamifasisiTheFamilyTheFamilylamifasisi
DISAGREE ON TWITTERDISAGREE ON TWITTER
#CODITO
FRANÇOIS DE CAMPREDON
GraphQL
@fdecampredon20/10/2016
Agenda
• REST Problems
• GraphQL
• Relay
• Apollo
REST
2000: Static WebWeb Browser
Web Server
Data Service
HTML
2005: AJAXWeb 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 AppWeb 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_for_listview
• /v2/conversations_special
• ….
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
• Better described by Example
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 applications
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 …
Apollo client
Apollo Client vs Relay
• No build step
• Not assumptions on Schema• http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/
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 performant ?
• Not Facebook ? :p
François de Campredon
@fdecampredonhttps://github.com/fdecampredon/
Thanks !
GraphQL: http://graphql.org/Relay: https://facebook.github.io/relay/Apollo: http://dev.apollodata.com/
SEE YOU SOON!SEE YOU SOON!
THEFAMILY.CO