React + Relay + GraphQL

Google Developer Group Lima

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
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
12. BAD
13. BAD
14. BAD
15. BAD
16. BAD
17. BAD
18. BAD
22. Welcome to the future It is called Web Components Facebook Google Mozilla Twitter Salesforce
23. Components <x-gangnam-style></x-gangnam-style>
33. FLUX
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
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.