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. 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
  2. 10.
  3. 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
  4. 21.
  5. 22.
  6. 23.

    • Actions cause side effects • Data has to be

    consistent within the app • Ensuring consistent data requires complex updating or re-fetching Challenge #2
  7. 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
  8. 28.
  9. 29.
  10. 31.
  11. 34.

    GraphQL Example { fragment on User { id firstName, lastName

    } } Request Response { "user": { "id": 1, "firstName": "Lisa", "lastName": "Simpson" } }
  12. 42.
  13. 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() { } }
  14. 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(); } }
  15. 50.

    Challenge #3 How to ensure that we don’t break the

    contract between client and server?
  16. 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!
  17. 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