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.8k
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
200
Handling images on the web
marcoow
0
410
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
500
Feel the Glimmer - ParisJS
marcoow
1
520
Feel the Glimmer - MunichJS 11/17
marcoow
0
140
Leveraging the complete Ember Toolbelt
marcoow
0
370
Feel the Glimmer
marcoow
1
240
Templates and Logic in Ember
marcoow
0
770
Other Decks in Programming
See All in Programming
Gemini CLI のはじめ方
ttnyt8701
1
100
What's new in Adaptive Android development
fornewid
0
110
CDK引数設計道場100本ノック
badmintoncryer
2
580
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
980
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
650
NEWT Backend Evolution
xpromx
1
150
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
330
Hack Claude Code with Claude Code
choplin
8
2.8k
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
260
テスト駆動Kaggle
isax1015
1
900
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
For a Future-Friendly Web
brad_frost
179
9.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Navigating Team Friction
lara
187
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Practical Orchestrator
shlominoach
189
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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