Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The JSON:API spec
Search
Marco Otte-Witte
September 20, 2017
Programming
3
1.7k
The JSON:API spec
Introduction to the JSON:API spec
Marco Otte-Witte
September 20, 2017
Tweet
Share
More Decks by Marco Otte-Witte
See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
99
Handling images on the web
marcoow
0
390
SSR, SPAs and PWAs
marcoow
0
340
Fast, Fast, Fast
marcoow
2
440
Feel the Glimmer - ParisJS
marcoow
1
460
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
Leveraging the complete Ember Toolbelt
marcoow
0
290
Feel the Glimmer
marcoow
1
220
Templates and Logic in Ember
marcoow
0
620
Other Decks in Programming
See All in Programming
Terraformテスト入門
msato
0
540
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
780
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
CSC307 Lecture 11
javiergs
PRO
0
240
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
A better future with KSS
kneath
231
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
Building an army of robots
kneath
301
42k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
GitHub's CSS Performance
jonrohan
1026
450k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Transcript
None
Marco Otte-Witte @marcoow
simplabs.com @simplabs
http://jsonapi.org https://github.com/json-api/json-api/blob/gh-pages/images/jsonapi.png
APIs are everywhere
integrating (micro-)services
integrating with 3rd parties
classic server rendered web apps are becoming the exception
https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png http://emberjs.com/images/brand/ember_Ember-Light.png http://red-badger.com/blog/wp-content/uploads/2015/04/react-logo-1000-transparent.png
http://www.electronicways.com/wp-content/uploads/2014/12/Android-Tablet.jpg https://cdn2.macworld.co.uk/cmsdata/features/3530504/iphone-7-jet-black.jpg
https://camo.githubusercontent.com/5dd01312b30468423cb45b582b83773f5a9019bb/687474703a2f2f656c656374726f6e2e61746f6d2e696f2f696d616765732f656c656374726f6e2d6c6f676f2e737667 https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/2000px-Windows_logo_-_2012.svg.png https://upload.wikimedia.org/wikipedia/commons/2/22/MacOS_logo_%282017%29.svg
usually JSON via REST* *or recently GraphQL
https://twitter.com/thomasfuchs/status/604323589979049984
there's hundred of variations of JSON via REST
» curl https://api.github.com/repos/rails/rails HTTP/1.1 200 OK … { "id": 1,
"name": "sinatra", … }
» curl -i https://api.travis-ci.org/repos/rails/rails HTTP/1.1 200 OK … { "repo":
{ "id": 82, "slug": "sinatra/sinatra", … } }
» curl https://api.github.com/repos/rails/rails HTTP/1.1 200 OK … { "id": 1,
"name": "sinatra", … "owner": { "login": "rails", "id": 4223, … } }
» curl -i https://api.travis-ci.org/repos/rails/rails HTTP/1.1 200 OK … { "repo":
{ "id": 82, "slug": "sinatra/sinatra", … "last_build_id": 23436881, … } }
snake_case or kebap-case? complete updates or partial updates? filtering? sparse
field sets?
options, options, options opinions, opinions, opinions
root level keys! plain hashes! embed relations! reference relations!
https://www.broxap.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/i/bikeshed_bxmwmu2.jpg_1.jpg.jpg
JSON API is your "anti-bikeshedding tool"
“ “ “ “
The Spec
Media Type application/vnd.api+json http://www.iana.org/assignments/media-types/application/vnd.api+json
GET /articles/1 HTTP/1.1 Accept: application/vnd.api+json
{ "data": { "type": "articles", "id": "1", "attributes": { "title":
"JSON API paints my bikeshed!" } } } HTTP/1.1 200 OK Content-Type: application/vnd.api+json
Resource Objects represent individual resources
GET /articles/1 { "data": { "type": "articles", "id": "1", "attributes":
{ "title": "JSON API paints my bikeshed!" } } }
GET /articles { "data": [ { "type": "articles", "id": "1",
"attributes": { "title": "JSON API paints my bikeshed!" } }, { "type": "articles", "id": "2", "attributes": { "title": "Rails is Omakase" } } ] }
GET /articles/1 { "data": { "type": "articles", "id": "1", "attributes":
{ "title": "JSON API paints my bikeshed!" }, "relationships": { "author": { "data": { "type": "people", "id": "1" } } } } }
GET /articles/1 { "data": { "type": "articles", "id": "1", "attributes":
{ "title": "JSON API paints my bikeshed!" }, "relationships": { "author": { "data": { "type": "people", "id": "1" } } } }, "included": [ { "type": "people", "id": "1", "attributes": { "name": "Dan Gebhard" } } ] }
GET /articles/1 { "data": { "type": "articles", "id": "1", "attributes":
{ "title": "JSON API paints my bikeshed!" }, "relationships": { "author": { "links": { "self": "/articles/1/relationships/author", "related": "/articles/1/author" } } } } }
CRUD we're not always reading data after all
POST /articles { "data": { "type": "articles", "attributes": { "title":
"JSON API paints my bikeshed!" } } }
HTTP/1.1 201 Created Location: http://example.com/articles/1 { "data": { "type": "articles",
"id": "1", "attributes": { "title": "JSON API paints my bikeshed!" } } }
PATCH /articles/1 { "data": { "type": "articles", "id": "1", "attributes":
{ "title": "json:api paints my bikeshed!" } } }
HTTP/1.1 204 No Content
DELETE /articles/1
HTTP/1.1 204 No Content
Inclusion of related resources as per client request
GET /articles/1?include=comments.author
Sparse field sets for smaller response payloads
GET /articles? include=author&fields[articles]=title,body&fi elds[people]=name
There's more errors, filtering, pagination, etc.
Client and Server libraries for many languages and frameworks http://jsonapi.org/implementations/
What's a spec worth if everyone uses a different version?
JSON API is strictly additive
"What is he even talking about, we're all hyped up
about GraphQL!!!"
REST can be pretty fast
GET /articles/1 HTTP/1.1 Accept: application/vnd.api+json
{ "data": { "type": "articles", "id": "1", "attributes": { "title":
"JSON API paints my bikeshed!" } } } HTTP/1.1 200 OK Content-Type: application/vnd.api+json ETag: "686897696a7c876b7e"
GET /articles HTTP/1.1 Accept: application/vnd.api+json If-None-Match: "686897696a7c876b7e"
HTTP/1.1 304 Not Modified
HTTP/2 more parallel requests, server push, etc.
Uniform resource representations facilitate data reuse
None
GET /articles?include=author { "data": [ { "type": "articles", "id": "1",
"attributes": { "title": "JSON API paints my bikeshed!", "text": "…" }, "relationships": { "author": { "data": { "type": "people", "id": "2" } } } }, … ], "included": [ { "type": "people", "id": "2", "attributes": { "name": "Dan Gebhard", "bio": "…", "imageUrl": "…" } }, … ] }
None
https://raw.githubusercontent.com/facebook/graphql/master/resources/GraphQL%20Logo.png http://graphql.org
None
POST /graphql { articles { id title text author {
id name } } }
None
POST /graphql { author(id: "1") { name bio imageUrl }
}
GraphQL opens an endpoint on your system that allows (somewhat)
arbitrary queries to your data
"GraphQL will replace REST in the same way MongoDB replaced
PostgreSQL." Tom Dale
"Things are going to get better for everyone through experimentation
with new approaches." Marco Otte-Witte
♥
Thanks
Q&A
http://simplabs.com @simplabs