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
110
Handling images on the web
marcoow
0
390
SSR, SPAs and PWAs
marcoow
0
350
Fast, Fast, Fast
marcoow
2
460
Feel the Glimmer - ParisJS
marcoow
1
490
Feel the Glimmer - MunichJS 11/17
marcoow
0
130
Leveraging the complete Ember Toolbelt
marcoow
0
330
Feel the Glimmer
marcoow
1
230
Templates and Logic in Ember
marcoow
0
670
Other Decks in Programming
See All in Programming
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
go.mod、DockerfileやCI設定に分散しがちなGoのバージョンをまとめて管理する / Go Connect #3
arthur1
10
2.4k
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
410
/←このスケジュール表に立ち向かう フロントエンド開発戦略 / A front-end development strategy to tackle a single-slash schedule.
nrslib
1
590
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
EventSourcingの理想と現実
wenas
6
2.1k
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
920
VR HMDとしてのVision Pro+ゲーム開発について
yasei_no_otoko
0
100
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.6k
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.1k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
A designer walks into a library…
pauljervisheath
202
24k
The Cult of Friendly URLs
andyhume
78
6k
Docker and Python
trallard
40
3.1k
Speed Design
sergeychernyshev
24
570
Testing 201, or: Great Expectations
jmmastey
38
7k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Facilitating Awesome Meetings
lara
49
6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
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