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.

22bc5738bdbd25c6b779f523b43e951b?s=128

Sebastian Fröstl

February 18, 2016
Tweet

Transcript

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

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

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

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

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

  6. Relay simplifies client–server communication

  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
  8. Conference User Domain Model

  9. Conference User attends Domain Model

  10. None
  11. Challenge #1

  12. Challenge #1 Component Component

  13. Challenge #1 Backend Component Component

  14. Challenge #1 ServiceLayer Component Component Backend

  15. Challenge #1 ServiceLayer Communication Layer Component Component Backend

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

    usage data request
  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
  18. How to define data requirements explicitly within our components? Challenge

    #1
  19. Challenge #2

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

    #2
  21. None
  22. None
  23. • Actions cause side effects • Data has to be

    consistent within the app • Ensuring consistent data requires complex updating or re-fetching Challenge #2
  24. How to ensure a consistent state after changes? Challenge #2

  25. Challenge #3

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

  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
  28. How to ensure that we don’t break the contract between

    client and server? Challenge #3
  29. None
  30. GraphQL and Relay are both from Facebook, open sourced 2015

  31. • Library for client-server data fetching • Uses a GraphQL

    backend to retrieve and change data
  32. • Query language and runtime for graph-like data structures •

    Provides a statically typed API
  33. Architecture GraphQL Request JSON Response App Relay Data Access GraphQL

    Client Server
  34. GraphQL Example { fragment on User { id firstName, lastName

    } } Request Response { "user": { "id": 1, "firstName": "Lisa", "lastName": "Simpson" } }
  35. Relay Architecture Component RelayContainer

  36. Angular 2 + Relay?

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

  38. @connectRelay() Angular 2 Component RelayContainer

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

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

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

    RelayContainer relayData @connectRelay()
  42. @Component({ selector: 'user-account' }) @View({ template: `<div> {{ user.firstName }}

    </div>`, }) class UserAccount { constructor() { } }
  43. const UserAccountContainer = Relay.createGenericContainer('UserAccount', { fragments: { user: () =>

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

    Relay.QL` fragment on User { firstName, } `, }, }); @connectRelay({ container: UserAccountContainer }) @Component({ selector: 'user-account' }) @View({ template: `<div> {{ relayData.user.firstName }} </div>`, }) class UserAccount { constructor() { this.initWithRelay(); } }
  45. Let’s tackle the challenges!

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

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

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

  49. Solution One central store, managed by Relay Changes are declaratively

    defined Challenge #2
  50. Challenge #3 How to ensure that we don’t break the

    contract between client and server?
  51. Solution Strongly typed backend that specifies a contract Challenge #3

  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!
  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