Angular 2 and Relay - Speaker Deck

Slide 1

Slide 1 text

Angular 2 and Relay Declare it and be happy!

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Relay simpliﬁes client–server communication

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Conference User Domain Model

Slide 9

Slide 9 text

Conference User attends Domain Model

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Challenge #1

Slide 12

Slide 12 text

Challenge #1 Component Component

Slide 13

Slide 13 text

Challenge #1 Backend Component Component

Slide 14

Slide 14 text

Challenge #1 ServiceLayer Component Component Backend

Slide 15

Slide 15 text

Challenge #1 ServiceLayer Communication Layer Component Component Backend

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

• 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

Slide 18

Slide 18 text

How to deﬁne data requirements explicitly within our components? Challenge #1

Slide 19

Slide 19 text

Challenge #2

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Challenge #3

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

GraphQL and Relay are both from Facebook, open sourced 2015

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Relay Architecture Component RelayContainer

Slide 36

Slide 36 text

Angular 2 + Relay?

Slide 37

Slide 37 text

1. Generalize Relay 2. Connect it with Angular 2

Slide 38

Slide 38 text

@connectRelay() Angular 2 Component RelayContainer

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@Component({ selector: 'user-account' }) @View({ template: `

`, }) class UserAccount { constructor() { } }

Slide 43

Slide 43 text

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

`, }) class UserAccount { constructor() { } }

Slide 44

Slide 44 text

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

`, }) class UserAccount { constructor() { this.initWithRelay(); } }

Slide 45

Slide 45 text

Let’s tackle the challenges!

Slide 46

Slide 46 text

Challenge #1 How to deﬁne data requirements explicitly within our components?

Slide 47

Slide 47 text

Challenge #1 Solution Declarative data dependencies in each component

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Solution One central store, managed by Relay Changes are declaratively deﬁned Challenge #2

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Solution Strongly typed backend that speciﬁes a contract Challenge #3

Slide 52

Slide 52 text

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!

Slide 53

Slide 53 text

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