Angular 2 and Realy

Relay and GraphQL are new technologies for client-server communication. Originally from the React universe, Relay is a declarative way of defining all the data a component needs. Relay retrieves, caches and keeps your data consistent. Based on real life experiences, we will give an introduction into Relay and show how to use it with Angular 2.

Transcript

1. Angular 2 and Relay
   Declare it and be happy!
   

   View Slide

2. Andreas Marek Sebastian Fröstl
   @AndiMarek @SFroestl
   Angular Meetup Berlin
   

   View Slide

3. Who has an app in production
   that doesn’t communicate
   with a backend?
   

   View Slide

4. – Random Developer Expert
   “We have to deal with client-server-communication!”
   

   View Slide

5. – Concerned Developer
   “There are a lot of repetitive challenges!”
   

   View Slide

6. Relay simplifies
   client–server communication
   

   View Slide

7. Let’s build an app!
   • We want to create a conference planner
   • A user can see a list of conferences
   • A user can attend and leave conferences
   

   View Slide

8. Conference
   User
   Domain Model
   

   View Slide

9. Conference
   User
   attends
   Domain Model
   

   View Slide

10. View Slide

11. Challenge #1
    

    View Slide

12. Challenge #1
    Component
    Component
    

    View Slide

13. Challenge #1
    Backend
    Component
    Component
    

    View Slide

14. Challenge #1
    ServiceLayer
    Component
    Component Backend
    

    View Slide

15. Challenge #1
    ServiceLayer
    Communication
    Layer
    Component
    Component Backend
    

    View Slide

16. Challenge #1
    ServiceLayer
    Component
    Communication
    Layer
    disconnected
    Component Backend
    data usage data request
    

    View Slide

17. • Component needs to rely on that data needed is provided
    • No clear way to see what data a component needs
    • Reduced reusability of components
    • Over- or under-fetching of data
    Challenge #1
    

    View Slide

18. How to define data requirements explicitly within our
    components?
    Challenge #1
    

    View Slide

19. Challenge #2
    

    View Slide

20. Use case: A user wants to attend a conference
    Challenge #2
    

    View Slide

21. View Slide

22. View Slide

23. • Actions cause side effects
    • Data has to be consistent within the app
    • Ensuring consistent data requires complex updating or re-fetching
    Challenge #2
    

    View Slide

24. How to ensure a consistent state after changes?
    Challenge #2
    

    View Slide

25. Challenge #3
    

    View Slide

26. Let’s change the API…!??
    Challenge #3
    

    View Slide

27. • Server API is constantly evolving
    • Client requests data the server can not provide
    • Breaking changes: No clear contract between client and server
    • Consequences are runtime exceptions and hard to trace user
    facing bugs
    Challenge #3
    

    View Slide

28. How to ensure that we don’t break the contract between
    client and server?
    Challenge #3
    

    View Slide

29. View Slide

30. GraphQL and Relay are both from Facebook, open sourced 2015
    

    View Slide

31. • Library for client-server data fetching
    • Uses a GraphQL backend to retrieve and change data
    

    View Slide

32. • Query language and runtime for graph-like data structures
    • Provides a statically typed API
    

    View Slide

33. Architecture
    GraphQL Request JSON Response
    App
    Relay
    Data Access
    GraphQL
    Client
    Server
    

    View Slide

34. GraphQL Example
    {
    fragment on User {
    id
    firstName,
    lastName
    }
    }
    Request Response
    {
    "user": {
    "id": 1,
    "firstName": "Lisa",
    "lastName": "Simpson"
    }
    }
    

    View Slide

35. Relay Architecture
    Component
    RelayContainer
    

    View Slide

36. Angular 2 + Relay?
    

    View Slide

37. 1. Generalize Relay
    2. Connect it with Angular 2
    

    View Slide

38. @connectRelay()
    Angular 2 Component
    RelayContainer
    

    View Slide

39. @Input relayProps
    @Input route
    @connectRelay()
    Angular 2 Component
    RelayContainer
    

    View Slide

40. @Input relayProps
    @Input route
    ngOnChanges => container.update()
    @connectRelay()
    Angular 2 Component
    RelayContainer
    

    View Slide

41. Angular 2 Component
    @Input relayProps
    @Input route
    ngOnChanges => container.update()
    RelayContainer
    relayData
    @connectRelay()
    

    View Slide

42. @Component({
    selector: 'user-account'
    })
    @View({
    template: ` {{ user.firstName }} `,
    })
    class UserAccount {
    constructor() {
    }
    }
    

    View Slide

43. const UserAccountContainer = Relay.createGenericContainer('UserAccount', {
    fragments: {
    user: () => Relay.QL`
    fragment on User {
    firstName,
    }
    `,
    },
    });
    @Component({
    selector: 'user-account'
    })
    @View({
    template: ` {{ user.firstName }} `,
    })
    class UserAccount {
    constructor() {
    }
    }
    

    View Slide

44. const UserAccountContainer = Relay.createGenericContainer('UserAccount', {
    fragments: {
    user: () => Relay.QL`
    fragment on User {
    firstName,
    }
    `,
    },
    });
    @connectRelay({
    container: UserAccountContainer
    })
    @Component({
    selector: 'user-account'
    })
    @View({
    template: ` {{ relayData.user.firstName }} `,
    })
    class UserAccount {
    constructor() {
    this.initWithRelay();
    }
    }
    

    View Slide

45. Let’s tackle the challenges!
    

    View Slide

46. Challenge #1
    How to define data requirements explicitly within our
    components?
    

    View Slide

47. Challenge #1
    Solution
    Declarative data dependencies in each component
    

    View Slide

48. Challenge #2
    How to ensure consistent a state after changes?
    

    View Slide

49. Solution
    One central store, managed by Relay
    Changes are declaratively defined
    Challenge #2
    

    View Slide

50. Challenge #3
    How to ensure that we don’t break the contract between
    client and server?
    

    View Slide

51. Solution
    Strongly typed backend that specifies a contract
    Challenge #3
    

    View Slide

52. Summary
    • Relay solves common problems of client-server communication
    • Declarative way to specify what data a component needs
    • Central store managed by Relay
    • Strongly typed query language (GraphQL)
    • It works with Angular 2!
    

    View Slide

53. Thank you!
    Ask Me Anything Microsoft warm bites area
    Code https://github.com/angular2-relay/angular2-relay
    Slides https://speakerdeck.com/sfroestl/angular2-relay
    @AndiMarek @SFroestl
    

    View Slide