Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + Relay + GraphQL

React + Relay + GraphQL

Google Developer Group Lima

6c5810dfd1957261adcec124fb43617d?s=128

Ursula Cervantes

May 27, 2017
Tweet

Transcript

  1. IS THE FUTURE

  2. WHY ARE YOU HERE? ➤ I use Relay / GraphQL

    in production ➤ I tried Relay / GraphQL (boilerplate apps / sample demos) ➤ I never tried Relay / GraphQL, but I heard about it ➤ Never heard about this ➤ I’m here just for coffee break
  3. None
  4. reactive UI declarative data single end-point

  5. REACT ➤ Declarative view ➤ Component composition ➤ One-way data

    flow
  6. REACT For those who knows Javascript just enough

  7. REACT ➤ JSX syntax ➤ Renders DOM not HTML ➤

    Components are description of UI
  8. State 1 State 2 DOM Mutations

  9. None
  10. None
  11. None
  12. BAD

  13. BAD

  14. BAD

  15. BAD

  16. BAD

  17. BAD

  18. BAD

  19. None
  20. None
  21. None
  22. Welcome to the future It is called Web Components Facebook

    Google Mozilla Twitter Salesforce
  23. Components <x-gangnam-style></x-gangnam-style>

  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. FLUX

  34. None
  35. None
  36. None
  37. None
  38. RELAY A better way to do data fetching for complex

    applications.
  39. RELAY ➤ Framework for React apps ➤ Data fetching ➤

    Declarative via GraphQL
  40. RELAY ➤ Meaningful unit tests ➤ Easier debugging ➤ Single-source

    of truth: Stores
  41. None
  42. None
  43. GRAPHQL ➤ Query language for graph data ➤ Server technology

    ➤ Single end-point
  44. GRAPHQL It should not matter the data that is used

    from the application components when creating an API.
  45. GRAPHQL ➤ Exploring the graph from the root call ➤

    [Data] backend agnostic ➤ No se requiere API con mock data
  46. GRAPHQL ➤ Root call ➤ Nodes ➤ Edges

  47. GRAPHQL ➤ Overfetching

  48. GRAPHQL ➤ Overfetching

  49. GRAPHQL ➤ Underfetching

  50. GRAPHQL ➤ Underfetching

  51. SO WHAT ABOUT THE GRAPHQL BACKEND?

  52. ➤ GraphQL queries can be mapped to any type of

    backend ➤ GraphQL scheme allows validations and detection of initial errors when invalid operations are executed. ➤ The structure of the response is equal to the structure required. ➤ You can implement the types of nodes - they are not predefined.