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.

2. lamifasisi
TheFamilyTheFamily
lamifasisi

3. DISAGREE ON
TWITTER
DISAGREE ON
TWITTER
#CODITO

4. FRANÇOIS DE CAMPREDON

5. GraphQL
@fdecampredon
20/10/2016

6. Agenda
• REST Problems
• GraphQL
• Relay
• Apollo

7. REST

8. 2000: Static Web
Web Browser
Web Server
Data Service
HTML

9. 2005: AJAX
Web Browser
Web Server
Data Service
JavaScript Client
HTML API

10. API
• SOAP
• XML-RPC / JSON-RPC
• AMF / RemoteObjects
• Etc …

11. REST Advantages
• Stateless
• Cacheable
• Uniform interface
• Scalability

12. 2010: Mobile App
Web Browser
Web Server
Data Service
JavaScript Client
HTML API
Mobile APP

13. /conversations /users/3
/messages/222
/conversations_for_listview

14. • /conversations
• /conversations_for_listview
• /conversations_special
• ….

15. /users/3
/v1/users/3
/v1/users/3
/v2/users/3

16. • /v1/conversations
• /v1/conversations_for_listview
• /v1/conversations_special
• /v2/conversations
• /v2/conversations_for_listview
• /v2/conversations_special
• ….

17. REST problems
• Multiple round trip
• Versionning
• Endpoints multiplication
• No type system

18. Facebook Netflix
GraphQL Falcor

19. GraphQL

20. What is GraphQL
• A query language for API
• ≠ Database query language
• Strongly Typed
• Hierarchical

21. How does it works ?
• Define the types exposed by the service
• Define how the fields of those types are resolved
• Query

22. Basic Query

23. Nesting

24. Arguments

25. Alias

26. Fragments

27. Variables

28. Mutations

29. Types

30. Query Response

31. No versioning !

32. Advantages
• Complex Query with only one Request
• Versioning Free
• Strongly Typed
• Introspection

33. Examples

34. Relay

35. Relay
• Data fetching framework for React
• Features :
• Declarative
• Query Colocation
• Automatic mutations management

36. Container

37. Container composition

38. Variables

39. Mutations
• Map a GraphQL mutation
• Declare how this mutation affects the Data State
• Declare Optimistic Response
• Better described by Example

40. Examples

41. Relay Advantages
• Query Colocation = Isolation
• Declarative
• Productive

42. Relay Drawbacks
• Assumptions on how the GraphQL schema is
structured
• Black Box
• Complex
• Does not suit all the applications

44. 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 …

45. Apollo client

46. Apollo Client vs Relay
• No build step
• Not assumptions on Schema
• http://www.codazen.com/choosing-graphql-client-apollo-vs-relay/

47. Queries

48. Mutations

49. Optimistic Updates

50. Apollo Advantages
• Flexibility
• Simplicity
• Evolving Fast
• Integrate well with third party library

51. Apollo Drawbacks
• No Container composition (not entirely true)
• No errors at build time
• Less « magic »
• Perhaps less performant ?
• Not Facebook ? :p

52. 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/

53. SEE YOU SOON!SEE YOU SOON!
THEFAMILY.CO