leveraging react and graphql to create a performant, scalable data grid

26
© 2017 Sencha Inc. • CONFIDENTIAL • Leveraging React and GraphQL Mark Brocato Engineering Director, Sencha @mockaroodev

Upload: sencha

Post on 23-Jan-2018

164 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Leveraging React and GraphQL

Mark Brocato

Engineering Director, Sencha

@mockaroodev

Page 2: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

ExtReact is a library of 100+ React Components

• Grids

• Trees

• Charts

• Form Controls

• Layouts

• Animations

• D3 Visualizations

• more

Page 3: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What GraphQL is not

• Not a database query language

• Not specific to any type of database (SQL or NoSQL)

3

Page 4: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What is GraphQL?

✓A potential successor to REST

✓A more powerful way to request data from the server

Page 5: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What is REST

• An API convention that maps HTTP verbs and URLs to back end resources.

• Create – POST /books

• Read – GET /books/1

• Update – PATCH /books/1

• Delete – DELETE /books/1

5

Page 6: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

REST and GraphQL similarities

Both REST and GraphQL…

• are ways to request data via AJAX.

• have resources with IDs.

• allow reading and writing of data.

• typically accept and return data in JSON format

6

Page 7: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• A way to request only the data needed and nothing more

8

Page 8: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• A way to request only the data needed and nothing more

9

Publisheridnameaddress

BookidtitlepublishDate

AuthoridfirstNamelastName

Characternametype

Page 9: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• A way to request only the data needed and nothing more

10

Publisheridnameaddress

BookidtitlepublishDate

AuthoridfirstNamelastName

Characternametype

query {book(id: 1) {

idtitlepublishDateauthor {

idfirstNamelastName

}publisher {

name}

}}

Page 10: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• A strongly-typed API contract

11

Page 11: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• A strongly-typed API contract

12

type Query {book(id: ID!): Book

}

type Mutation {updateBook(id: ID!, publishDate: String): MutationResult

}

type Book { id: ID!title: String!author: String!publishDate: Stringcharacters: [Character]

}

type Character { ... }type MutationResult { ... }

Page 12: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• Operations beyond CRUD.

13

Page 13: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What does GraphQL provide that REST does not?

• Operations beyond CRUD

14

REST

• Create – POST /books

• Read – GET /books/1

• Update – PATCH /books/1

• Delete – DELETE /books/1

mutation {whatever(foo: 'bar') {

result}

}

GraphQL

Page 14: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Comparing REST and GraphQL: Fetching a Book

REST

GET /books/1

returns:

{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter"

}

Page 15: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Comparing REST and GraphQL: Fetching a Book

GraphQL

GET /graphql

body: returns:

{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter"

}

query {book(id: 1) {

idauthortitle

}}

Page 16: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Fetching Nested Objects

GraphQL

GET /graphql

body: returns:

{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter”,"publisher": {

"name": "Penguin Random House"}

}

query {book(id: 1) {

idauthortitlepublisher {

name}

}}

Page 17: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

GraphQL: Advanced Fetching

GraphQL

GET /graphql

body: returns:

{"id": 1,"author": "George R. R. Martin","title": "The Winds of Winter”,"characters": [{

"name": "Daenerys Targaryen"}, {

"name": ”Aegon Targaryen"}]

}

query {book(id: 1) {

idauthortitlecharacters(type: "protagonist") {

name}

}}

Page 18: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Comparing REST and GraphQL: Updating a Book

REST

PATCH /books/1

body: returns:

{"success": true

}

{"publishDate": "2019-05-01"

}

Page 19: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

Comparing REST and GraphQL: Updating a Book

GraphQL

POST /graphql

body: returns:

{"success": true

}

mutation {updateBook(id: 1, publishDate: "2019-05-01") {

success}

}

Page 20: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

REST vs GraphQL: Server Implementation

app.get('/books/:id', (req, res) => {return Book.find({ id: req.params.id });

})

REST:

{Query: {

book: (root, { id }) => {return Book.find({ id })

}}

}

GraphQL:

Page 21: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

What makes GraphQL a good fit for React?

• Gives components a way to declare their data dependencies

• Keeps components decoupled, modular, and reusable by maintaining encapsulation

• DRY

• Prevents waste

• Facilitates refactoring

23

Page 22: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

GraphQL Fragments

24

<Book><h1>{ title }</h1><p>{ description }</p>

<h2>Reviews</h2><Review/><Review/><Review/>

</Book>

Page 23: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

GraphQL Fragments

25

query {book(id: 1) {

idtitleauthorreviews {

...Review}

}}

<Book><h1>{ title }</h1><p>{ description }</p>

<h2>Reviews</h2><Review/><Review/><Review/>

</Book>

Page 24: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

GraphQL Fragments

26

fragment Review on Review {creator {

name}ratingtexttitle

}

<Book><h1>{ title }</h1><p>{ description }</p>

<h2>Reviews</h2><Review/><Review/><Review/>

</Book>

Page 25: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

GraphQL Libraries

Apollo

• Can be used with any framework, but

has react-specific integration

• Easy to get started

• Incrementally adoptable

• Explicit and easy to understand

27

Relay

• Only for React

• More work to get started

• Requires specific build tasks

• Convention over configuration

Page 26: Leveraging React and GraphQL to Create a Performant, Scalable Data Grid

© 2017 Sencha Inc. • CONFIDENTIAL •

https://github.com/sencha/graphql-techtalk