React + Relay + GraphQL

Google Developer Group Lima

Transcript

1. IS THE FUTURE
   

   View Slide

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
   

   View Slide

3. View Slide

4. reactive UI declarative data single end-point
   

   View Slide

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

   View Slide

6. REACT
   For those who knows
   Javascript just enough
   

   View Slide

7. REACT
   ➤ JSX syntax
   ➤ Renders DOM not HTML
   ➤ Components are description
   of UI
   

   View Slide

8. State 1
   State 2
   DOM Mutations
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. BAD
    

    View Slide

13. BAD
    

    View Slide

14. BAD
    

    View Slide

15. BAD
    

    View Slide

16. BAD
    

    View Slide

17. BAD
    

    View Slide

18. BAD
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. Welcome to the
    future
    It is called Web Components
    Facebook
    Google
    Mozilla
    Twitter
    Salesforce
    

    View Slide

23. Components
    
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. FLUX
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. RELAY
    A better way to do data fetching for
    complex applications.
    

    View Slide

39. RELAY
    ➤ Framework for React apps
    ➤ Data fetching
    ➤ Declarative via GraphQL
    

    View Slide

40. RELAY
    ➤ Meaningful unit tests
    ➤ Easier debugging
    ➤ Single-source of truth: Stores
    

    View Slide

41. View Slide

42. View Slide

43. GRAPHQL
    ➤ Query language for graph data
    ➤ Server technology
    ➤ Single end-point
    

    View Slide

44. GRAPHQL
    It should not matter the data that is
    used from the application components
    when creating an API.
    

    View Slide

45. GRAPHQL
    ➤ Exploring the graph from the root
    call
    ➤ [Data] backend agnostic
    ➤ No se requiere API con mock data
    

    View Slide

46. GRAPHQL
    ➤ Root call
    ➤ Nodes
    ➤ Edges
    

    View Slide

47. GRAPHQL
    ➤ Overfetching
    

    View Slide

48. GRAPHQL
    ➤ Overfetching
    

    View Slide

49. GRAPHQL
    ➤ Underfetching
    

    View Slide

50. GRAPHQL
    ➤ Underfetching
    

    View Slide

51. SO WHAT ABOUT THE
    GRAPHQL BACKEND?
    

    View Slide

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.
    

    View Slide