v n o v i c k . c o m @ V l a d i m i r N o v i c k
Architecting scalable serverless
applications
with GraphQL API
using Hasura
Slide 2
Slide 2 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Developer Advocate
G D E , a u t h o r , c o n s u l t a n t
Web, Mobile, Virtual Reality, Augmented Reality, Mixed
Reality & Internet of Things
Slide 3
Slide 3 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Let’s talk about
Serverless
Slide 4
Slide 4 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Slide 5
Slide 5 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Let’s talk about REST
Slide 6
Slide 6 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
The structure of request
Slide 7
Slide 7 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
What is the problem with that?
Slide 8
Slide 8 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
username
address
Some data
More data
Underfetching
Multiple requests
Slide 9
Slide 9 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
username
city
Some data
More data
Overfetching
username
street city
Some data
More data
Too much data in a
request
Slide 10
Slide 10 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Solution
GraphQL - a query language for
your API
Slide 11
Slide 11 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Slide 12
Slide 12 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Your API models are “graph” like
v n o v i c k . c o m @ V l a d i m i r N o v i c k
GraphQL query
Slide 15
Slide 15 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
You want to control how to get the
data
Slide 16
Slide 16 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Slide 17
Slide 17 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
How to parameterise your API
Slide 18
Slide 18 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
GET /api/user?id=1
Before GraphQL
Set params programmatically
Slide 19
Slide 19 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
GraphQL can take arguments
Slide 20
Slide 20 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
And even accept variables
Slide 21
Slide 21 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
With GraphQL
GraphQL server gets
1. The GraphQL query
2. A variables object
Slide 22
Slide 22 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
What about “Write” APIs
Slide 23
Slide 23 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Before GraphQL
Slide 24
Slide 24 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
With GraphQL
Slide 25
Slide 25 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Realtime API
Slide 26
Slide 26 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
• polling
• websockets
Before GraphQL
Slide 27
Slide 27 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
With GraphQL
Slide 28
Slide 28 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Documentation (before)
Slide 29
Slide 29 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Documentation (after)
Slide 30
Slide 30 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
GraphQL schema (SDL)
Slide 31
Slide 31 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Introspection
Slide 32
Slide 32 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Slide 33
Slide 33 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Business benefits
Slide 34
Slide 34 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
API on boarding
• Exploring APIs is easy
• Documentation is auto-generated
• No versioning required for non-destructive changes
• Auto-generated SDKs for all languages, community maintained
Slide 35
Slide 35 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Agility for api customers
• Auto-generated SDKs for all languages, community maintained
• Auto-complete for API calls in their IDEs
Slide 36
Slide 36 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Usage analytics
• New information regarding what APIs users want is now available
• What data is of interest to what users?
Slide 37
Slide 37 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Now what about Architecture
Slide 38
Slide 38 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Microservices architecture
Slide 39
Slide 39 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
3factor.app architecture
Slide 40
Slide 40 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
See it in action
h9ps:/
/serverless-demo.hasura.app/analy?cs-app/
https://serverless-demo.hasura.app/order-app/
Order app
Analytics app
Slide 41
Slide 41 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Hasura
open source and free engine that gives you auto-generates
real-Gme GraphQL API on top of new or exisGng Postgres
database
h9ps:/
/github.com/hasura/graphql-engine
Slide 42
Slide 42 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Slide 43
Slide 43 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Features
• Can be deployed to any cloud or run locally
• CompaGble with all AuthenGcaGon soluGons
• Can run on top of new or exisGng Postgres database
• Supports Postgres addons (PostGIS, TimescaleDB)
• Auto-generates GraphQL api
• GraphQL queries are compiled to performant SQL statements using
naGve Postgres features
Slide 44
Slide 44 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Features
• Comes with hasura-cli which has awesome tools like migraGons and more
• Can work with custom SQL statements
• Has configurable access controls for data
• Can be connected to your own GraphQL server (does schema sGtching)
• Has evenGng system which enables to trigger serverless funcGons
Slide 45
Slide 45 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
How to get started
Slide 46
Slide 46 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Go to hasura.io and pick your stack
Slide 47
Slide 47 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Hasura console overview
Slide 48
Slide 48 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
GraphiQL on steroids
h9ps:/
/world-congress-demo.herokuapp.com/v1/graphql
Slide 49
Slide 49 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Data tab
Db browsing, data modeling, custom SQL,
relationships, access control
Slide 50
Slide 50 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Remote schemas
Stitch GraphQL schemas, custom resolvers
Slide 51
Slide 51 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Event triggers
Trigger serverless functions on database events
Slide 52
Slide 52 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Want to learn more?
React, Vue, Angular, React NaGve,
iOS, Android, FluUer, Elm, ReasonML
h9ps:/
/learn.hasura.io/
Slide 53
Slide 53 text
v n o v i c k . c o m @ V l a d i m i r N o v i c k
Thank you