Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
JSON API
Search
Marco Otte-Witte
November 13, 2015
Technology
2.1k
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
JSON API
Introduction to JSON API - a talk I gave at RubyDay 2015.
Marco Otte-Witte
November 13, 2015
More Decks by Marco Otte-Witte
See All by Marco Otte-Witte
Securing Technology Investments
marcoow
0
300
Handling images on the web
marcoow
0
460
SSR, SPAs and PWAs
marcoow
0
390
Fast, Fast, Fast
marcoow
2
520
Feel the Glimmer - ParisJS
marcoow
1
570
Feel the Glimmer - MunichJS 11/17
marcoow
0
180
The JSON:API spec
marcoow
3
1.9k
Leveraging the complete Ember Toolbelt
marcoow
0
450
Feel the Glimmer
marcoow
1
270
Other Decks in Technology
See All in Technology
AI時代、つくる力を自分たちの手に。 ──電通×KAG、アジャイルとAI駆動開発で挑む開発の変革
yuukiyo
3
390
Kiro Crewで「みのるん式」仕事術やってみた
minorun365
PRO
3
1.1k
E2Eってつらくないですか?E2Eの管理コストを下げる手段とその実践
akaboshinit
2
510
導入から定着へ ~コーディングエージェントを日常業務に組み込む実践知~
yukisakai1225
0
240
Claude Code をローカルとサーバー上で利用した際の Bedrock 利用料をユーザー単位で一本化してみる
ohorig
0
160
AWSセキュリティで活用するAI機能
cmusudakeisuke
1
320
Obsidian Vault Architectures
x5gtrn
PRO
0
170
CTO Night|NotionのAIエージェントとFDE
kzkhykw1991
0
320
Vue で書く 空間コンピューティング、TresJS と WebXR を使ったXR デバイスのフロントエンド開発
hiranuma
0
110
"計画的無茶振り"を通してAIネイティブ世代の新人を育てる
subroh0508
1
110
「社外イベント=意識高い」の壁を壊せ!元々無関心だった僕らが部内で社外イベントを民主化して15人を連れ出すまで
say_no_w
0
150
野良MCPサーバーを排除せよ!MCPサーバーのガバナンス
yukiogawa
1
240
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
360
31k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4.2k
Learning to Love Humans: Emotional Interface Design
aarron
275
41k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
232
55k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
410
A Modern Web Designer's Workflow
chriscoyier
699
190k
Designing for humans not robots
tammielis
254
26k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
2
490
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
3
3.9k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
1
290
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
None
Marco Otte-Witte @marcoow
http://simplabs.com @simplabs
None
http://jsonapi.org
A specification for building APIs in JSON
None
“ “ “ “
“ “ “ “
Why is this even needed?
https://twitter.com/thomasfuchs/status/604323589979049984
everybody is using RESTful JSON APIs already
…but they are all different
GET /repos/sinatra/sinatra { "id": 1, "name": "sinatra", … }
GET /repos/sinatra/sinatra { "repo": { "id": 82, "name": "sinatra/sinatra", …
} }
GET /1.1/users/show.json? screen_name=marcoow { "id": 1, "name": "marcoow", … }
GET /users/marcoow { "id": 1, "login": "marcoow", … }
GET /repos/simplabs/rails_api_auth { "id": 1, "name": "rails_api_auth", "owner": { "id":
1, "name": "simplabs", … } … }
GET /repos/:repo_id/branches/master { "branches": { { "id": 1, "repository_id": 891,
… } } }
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 weapon
some History
it started with a lengthy discussion between Yehuda Katz and
Steve Klabnik at RailsConf 2013
Yehuda wrote the first draft
1.0 released on May 29th 2015
None
the Goals
define a generic media type that works across a broad
set of use cases
make the format similar to existing server-side framework practices
having a human readable format that is also easy to
debug
ensuring ease of implementation both on the server as well
as on the client side
the Format
Media Type application/vnd.api+json http://www.iana.org/assignments/media-types/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" } } } } }
Hypermedia is part of the spec but opt-in
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" } } } } }
Inclusion of related resources is a way of reducing requests
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" } }] }
CRUD works pretty much as you'd expect
GET /articles GET /articles/1 POST /articles PATCH /articles/1 DELETE /articles/1
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
Advanced Features
Inclusion of related resources can also be requested by the
client
GET /articles/1?include=comments.author
Sparse field sets can be used to reduce the response
size
GET /articles? include=author&fields[articles]=title,body&fi elds[people]=name
Bulk Operations allow creating/updating/deleting multiple resources at once
POST /articles { "data": [{ "type": "articles", "attributes": { "title":
"JSON API paints my bikeshed!" } }, { "type": "articles", "attributes": { "title": "Rails is Omakase" } }] }
HTTP/1.1 201 Created { "data": [{ "type": "articles", "id": "1",
"attributes": { "title": "JSON API paints my bikeshed!" } },{ "type": "articles", "id": "2", "attributes": { "title": "Rails is Omakase" } }] }
Ruby Implementations
ActiveModelSerializers supports it in 0.10.0 https://github.com/rails-api/active_model_serializers
ROAR https://github.com/apotonick/roar
JSONAPI::Resources https://github.com/cerebris/jsonapi-resources
Client Libraries are available for many languages http://jsonapi.org/implementations/
None
♥
http://simplabs.com @simplabs