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
210
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
380
Feel the Glimmer
marcoow
1
240
Templates and Logic in Ember
marcoow
0
770
Other Decks in Programming
See All in Programming
🔨 小さなビルドシステムを作る
momeemt
4
680
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
170
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
330
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Ruby Parser progress report 2025
yui_knk
1
450
1から理解するWeb Push
dora1998
7
1.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
520
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
170
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
470
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing for humans not robots
tammielis
253
25k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Site-Speed That Sticks
csswizardry
10
820
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Practical Orchestrator
shlominoach
190
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Navigating Team Friction
lara
189
15k
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