Angular 2 and Relay

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