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

Angular 2 and Realy

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.

Sebastian Fröstl

February 18, 2016
Tweet

More Decks by Sebastian Fröstl

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Relay simplifies
    client–server communication

    View full-size 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 full-size slide

  8. Conference
    User
    Domain Model

    View full-size slide

  9. Conference
    User
    attends
    Domain Model

    View full-size slide

  10. Challenge #1

    View full-size slide

  11. Challenge #1
    Component
    Component

    View full-size slide

  12. Challenge #1
    Backend
    Component
    Component

    View full-size slide

  13. Challenge #1
    ServiceLayer
    Component
    Component Backend

    View full-size slide

  14. Challenge #1
    ServiceLayer
    Communication
    Layer
    Component
    Component Backend

    View full-size slide

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

    View full-size slide

  16. • 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 full-size slide

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

    View full-size slide

  18. Challenge #2

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Challenge #3

    View full-size slide

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

    View full-size slide

  24. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Relay Architecture
    Component
    RelayContainer

    View full-size slide

  32. Angular 2 + Relay?

    View full-size slide

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

    View full-size slide

  34. @connectRelay()
    Angular 2 Component
    RelayContainer

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. 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 full-size slide

  40. 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 full-size slide

  41. Let’s tackle the challenges!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. 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 full-size slide

  49. 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 full-size slide