Build Scalable APIs using GraphQL and Serverless @simona_cotin - - PowerPoint PPT Presentation

▶
build scalable apis using graphql and serverless simona
SMART_READER_LITE
LIVE PREVIEW

Build Scalable APIs using GraphQL and Serverless @simona_cotin - - PowerPoint PPT Presentation

Nov 17, 2022 150 likes •756 views

Build Scalable APIs using GraphQL and Serverless @simona_cotin @simona_cotin @simona_cotin JS @simona_cotin @simona_cotin @simona_cotin @simona_cotin a data-fetching API powerful enough to describe all of Facebook -Lee Byron

slide-1
SLIDE 1

Build Scalable APIs using GraphQL and Serverless

slide-2
SLIDE 2

@simona_cotin

slide-3
SLIDE 3

@simona_cotin

slide-4
SLIDE 4

@simona_cotin

slide-5
SLIDE 5

@simona_cotin

JS

slide-6
SLIDE 6

@simona_cotin

slide-7
SLIDE 7

@simona_cotin

slide-8
SLIDE 8

@simona_cotin

slide-9
SLIDE 9

@simona_cotin

–-Lee Byron

a data-fetching API powerful enough to describe all of Facebook

slide-10
SLIDE 10

@simona_cotin

slide-11
SLIDE 11

@simona_cotin

https://facebook.com/user/id https://facebook.com/user/id/events https://facebook.com/user/id/friends-suggestions https://facebook.com/user/id/friends-birthdays

slide-12
SLIDE 12

@simona_cotin

https://facebook.com/user/id/events

{ "name": “ServerlessDays", "location": "Cardiff", "organiser": "Matt", "attendees": [ { "name": “Ant Stanley", "company": "", "role": “Father of ServerlessDays” } ] }

slide-13
SLIDE 13

@simona_cotin

slide-14
SLIDE 14

@simona_cotin

Overfetch Or New endpoint

slide-15
SLIDE 15

@simona_cotin

slide-16
SLIDE 16

@simona_cotin

https://facebook.com/user/id/friends-suggestions

{ "name": "Golnaz Badazadeh", "profile_pic": "some_url", "mutual_friends": [] }

slide-17
SLIDE 17

@simona_cotin

https://facebook.com/user/id/friends-suggestions/id/mutual

{ "mutual_friends": [ { "name": "Sarah Drasner", "profile_pic": "some_url", "tag": "Amazing!" } ] }

slide-18
SLIDE 18

@simona_cotin

Underfetch Or New endpoint

slide-19
SLIDE 19

@simona_cotin

Delay User Perception

0-100 ms Instant 100-300 ms Small perceptible delay 300-1000 ms Machine is working 1000+ ms Likely context switch 10000+ ms Task is abandoned

High performance Browser Networking

slide-20
SLIDE 20

@simona_cotin

–-Ilya Grigorik

The fastest network request is a request not made

slide-21
SLIDE 21

@simona_cotin

query { user(id:1) { name events { count } friends_suggestions { name mutual_friends { count } } } } { "data": { "user": { "name": "Simona Cotin", "events": { "count": 4 }, "friends_suggestions": { "name": "Golnaz Babazadeh", "mutual_friends": { "count": 15 } } } } }

slide-22
SLIDE 22

@simona_cotin

Schema driven development

slide-23
SLIDE 23

@simona_cotin

Strongly typed

slide-24
SLIDE 24

@simona_cotin

type People { id: ID! name: String avatar: URL }

slide-25
SLIDE 25

@simona_cotin

type People { id: ID! name: String avatar: URL } type Team { id: ID! name: String points: Int people: [People] }

slide-26
SLIDE 26

@simona_cotin

type Query { teams: [Team] } type Mutation { incrementPoints(id: ID!): Team }

slide-27
SLIDE 27

@simona_cotin

const root = { teams: async () =? { let teams = await axios.get( 'https://graphqlvoting.azurewebsites.net/ api/score' ); return teams.data; }, incrementPoints: async obj =? { let response = await axios.get( `https://graphqlvoting.azurewebsites.net/ api/score/${obj.id}` ); return response.data; } };

slide-28
SLIDE 28

@simona_cotin

slide-29
SLIDE 29

@simona_cotin

slide-30
SLIDE 30

@simona_cotin

slide-31
SLIDE 31

@simona_cotin

✓ Performance ✓ Flexibility ✓ Tooling

slide-32
SLIDE 32

@simona_cotin

Serverless

slide-33
SLIDE 33

@simona_cotin

–-Steve Jobs

The line of code that’s the fastest to write, that never breaks, that doesn’t need maintenance, is the line you never had to write.

slide-34
SLIDE 34

@simona_cotin

module.exports = async function(context, req) { context.res = { body: 'Hello ' + req.query.name }; };

slide-35
SLIDE 35
slide-36
SLIDE 36

@simona_cotin

Right-Click Deploy

slide-37
SLIDE 37
slide-38
SLIDE 38

@simona_cotin

Github Deploy

slide-39
SLIDE 39

@simona_cotin

slide-40
SLIDE 40

@simona_cotin

Datasources 3rd party APIs

slide-41
SLIDE 41

@simona_cotin

slide-42
SLIDE 42

@simona_cotin

{ "type": "cosmosDB", "name": "inputDocument", "databaseName": "admin", "collectionName": "Recipes", "connectionStringSetting": "tacos-sql_DOCUMENTDB", “direction": "in" }

slide-43
SLIDE 43

@simona_cotin

module.exports = async function(context, req) { context.res = { body: context.bindings.inputDocument }; };

slide-44
SLIDE 44

@simona_cotin

✓ Reusable API ✓ VS Code dev & debug ✓ Easy Integration Datasources

slide-45
SLIDE 45

@simona_cotin

No servers to manage

slide-46
SLIDE 46

@simona_cotin

Serverless

slide-47
SLIDE 47

@simona_cotin

slide-48
SLIDE 48

@simona_cotin

slide-49
SLIDE 49

@simona_cotin

slide-50
SLIDE 50

@simona_cotin

slide-51
SLIDE 51

@simona_cotin

slide-52
SLIDE 52

@simona_cotin

module.exports = async function(context, req) { const body = req.body; let response = await graphql( typeDefs, body.query, root, null, body.variables, body.operationName ); context.res = { body: response }; };

slide-53
SLIDE 53

@simona_cotin

slide-54
SLIDE 54

@simona_cotin

slide-55
SLIDE 55

@simona_cotin

slide-56
SLIDE 56

@simona_cotin

slide-57
SLIDE 57

@simona_cotin

Easy Integration of Datasources Autoscalability Less code Easy Abstraction of Datasources Single Endpoint Smaller no requests

Serverless GraphQL

slide-58
SLIDE 58

@simona_cotin

Easy Integration of Datasources Easy Abstraction of Datasources Autoscalability Single Endpoint Less code Smaller no requests

Dev productivity

slide-59
SLIDE 59

@simona_cotin

Achieve more by doing less

slide-60
SLIDE 60

@simona_cotin

https://github.com/simonaco/serverless- graphql-workshop