0
Hypermedia API      Pavel Mitin   2012 Anadea Inc.
Why does it matterAPI,   API,   API,   API,   API,   API,   API,   API,   API,   API,API,   API,   API,   API,   API,   AP...
ProblemExisting APIs are often:● unclear● fragile● not extendable
Possible solution“WWW is fundamentally a distributedhypermedia application.” Richard Taylor
Possible solution“WWW is fundamentally a distributedhypermedia application.” Richard TaylorAnd the application works!
How WEB worksBrowsers know how to:● deal with media types (text/html,  image/png...)● navigate via links and submit forms
How WEB worksBrowsers know how to:● deal with media types (text/html,  image/png...)● navigate via links and submit formsL...
Example -- eBay APIGET .../item/180881974947{  "name" : "Monty Python and the Holy Grail white rabbit big pointy teeth",  ...
Media types●   application/atom+xml●   image/jpeg●   audio/vnd.wave●   application/vnd.buyfolio.listing+json
Hypermedia links● Embed Links  ○ <img src="..." />  ○ <x:include href"..."   />
Hypermedia links● Embed Links  ○ <img src="..." />  ○ <x:include href"..." />● Outbound Links  ○ <a href="..." target="_bl...
Hypermedia links● Embed Links  ○ <img src="..." />  ○ <x:include href"..." />● Outbound Links  ○ <a href="..." target="_bl...
Hypermedia links● Embed Links   ○ <img src="..." />   ○ <x:include href"..." />● Outbound Links   ○ <a href="..." target="...
Hypermedia links● Embed Links   ○ <img src="..." />   ○ <x:include href"..." />● Outbound Links   ○ <a href="..." target="...
Hypermedia Design Elements1.   Base Format2.   State Transfer3.   Domain Style4.   Application Flow
Base format1.   JSON2.   XML3.   XHTML/HTML54.   Others (YAML, CSV, Markdown, Protocol     Buffers)
State Transfer (client-initiated)1. None (i.e. read-only)2. Predefined (via external documentation)3. Ad-Hoc (via in-messa...
Domain Style1. Specific2. General3. Agnostic
Domain Style<!-- domain-specific design --><story>  <id>...</id>  <estimate>...</estimate></story>
Domain Style/* domain-general design */{    "collection" : {        "items" : {            { "key" : "id",              "v...
Domain Style<!-- domain-agnostic design --><ul class="order">  <li class="id">...</li>  <ul class="shipping-address">    <...
I havent mentioned● Resources● Http verbs● Http status codes
Surfing your APISource: Building Hypermedia APIs with HTML5 and Node by Mike Amundsen
XHTML as a base format●   Native support for links and forms●   Ubiquitous client (browser)●   XHTML is XML●   HAML :)
Extending vs versioningReasons for a new version:● A change that alters the meaning or  functionality of an existing featu...
Javascript RIA;)
CriticismUsually compared to "traditional" REST API
Criticism● Overcomplicated client● Extra traffic
Rails and HATEOAS● lack of abstractions for hypermedia controls
Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms:  ○ #resource are two different resources
Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms:  ○ #resource are three different resourc...
Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms:  ○ #resource are three different resourc...
Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms:  ○ #resource are three different resourc...
Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms:  ○ #resource are three different resourc...
Richardson Maturity ModelSource: http://martinfowler.com/articles/richardsonMaturityModel.html
Books
Upcoming SlideShare
Loading in...5
×

Hypermedia api (HATEOAS)

3,716

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,716
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
44
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Hypermedia api (HATEOAS)"

  1. 1. Hypermedia API Pavel Mitin 2012 Anadea Inc.
  2. 2. Why does it matterAPI, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API,API, API, API, API, API, API, API, API, API, API..
  3. 3. ProblemExisting APIs are often:● unclear● fragile● not extendable
  4. 4. Possible solution“WWW is fundamentally a distributedhypermedia application.” Richard Taylor
  5. 5. Possible solution“WWW is fundamentally a distributedhypermedia application.” Richard TaylorAnd the application works!
  6. 6. How WEB worksBrowsers know how to:● deal with media types (text/html, image/png...)● navigate via links and submit forms
  7. 7. How WEB worksBrowsers know how to:● deal with media types (text/html, image/png...)● navigate via links and submit formsLet’s follow the example!!!
  8. 8. Example -- eBay APIGET .../item/180881974947{ "name" : "Monty Python and the Holy Grail white rabbit big pointy teeth", "id" : "180881974947", ... "links" : [ { “type: "application/vnd.ebay.item", "rel": "Add item to watchlist", "href": "https://.../user/12345678/watchlist/180881974947"}, { // and a whole lot of other operations ]}Source: http://www.slideshare.net/josdirksen/rest-from-get-to-hateoas
  9. 9. Media types● application/atom+xml● image/jpeg● audio/vnd.wave● application/vnd.buyfolio.listing+json
  10. 10. Hypermedia links● Embed Links ○ <img src="..." /> ○ <x:include href"..." />
  11. 11. Hypermedia links● Embed Links ○ <img src="..." /> ○ <x:include href"..." />● Outbound Links ○ <a href="..." target="_blank">...</a>
  12. 12. Hypermedia links● Embed Links ○ <img src="..." /> ○ <x:include href"..." />● Outbound Links ○ <a href="..." target="_blank">...</a>● Templated Links ○ <form method="get" action="...">...</form> ○ <link href="http://www.example.org/?search={search}" />
  13. 13. Hypermedia links● Embed Links ○ <img src="..." /> ○ <x:include href"..." />● Outbound Links ○ <a href="..." target="_blank">...</a>● Templated Links ○ <form method="get" action="...">...</form> ○ <link href="http://www.example.org/?search={search}" />● Idempotent Links ○ <link rel="edit" href="http://example.org/edit/1"/> ○ (new XMLHttpRequest()).open("DELETE", "/tags/"+id);
  14. 14. Hypermedia links● Embed Links ○ <img src="..." /> ○ <x:include href"..." />● Outbound Links ○ <a href="..." target="_blank">...</a>● Templated Links ○ <form method="get" action="...">...</form> ○ <link href="http://www.example.org/?search={search}" />● Idempotent Links ○ <link rel="edit" href="http://example.org/edit/1"/> ○ (new XMLHttpRequest()).open("DELETE", "/tags/"+id);● Non-Idempotent Links ○ <form method="post" action="...">...</form>
  15. 15. Hypermedia Design Elements1. Base Format2. State Transfer3. Domain Style4. Application Flow
  16. 16. Base format1. JSON2. XML3. XHTML/HTML54. Others (YAML, CSV, Markdown, Protocol Buffers)
  17. 17. State Transfer (client-initiated)1. None (i.e. read-only)2. Predefined (via external documentation)3. Ad-Hoc (via in-message hypermedia controls)
  18. 18. Domain Style1. Specific2. General3. Agnostic
  19. 19. Domain Style<!-- domain-specific design --><story> <id>...</id> <estimate>...</estimate></story>
  20. 20. Domain Style/* domain-general design */{ "collection" : { "items" : { { "key" : "id", "value" : "12345" } ...
  21. 21. Domain Style<!-- domain-agnostic design --><ul class="order"> <li class="id">...</li> <ul class="shipping-address"> <li class="street-address">...</li> ...
  22. 22. I havent mentioned● Resources● Http verbs● Http status codes
  23. 23. Surfing your APISource: Building Hypermedia APIs with HTML5 and Node by Mike Amundsen
  24. 24. XHTML as a base format● Native support for links and forms● Ubiquitous client (browser)● XHTML is XML● HAML :)
  25. 25. Extending vs versioningReasons for a new version:● A change that alters the meaning or functionality of an existing feature or element● A change that causes an existing element to disappear or become disallowed● A change that converts an optional element into a required element
  26. 26. Javascript RIA;)
  27. 27. CriticismUsually compared to "traditional" REST API
  28. 28. Criticism● Overcomplicated client● Extra traffic
  29. 29. Rails and HATEOAS● lack of abstractions for hypermedia controls
  30. 30. Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms: ○ #resource are two different resources
  31. 31. Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms: ○ #resource are three different resources● OPTIONS verb
  32. 32. Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms: ○ #resource are three different resources● OPTIONS verb● PATCH verb
  33. 33. Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms: ○ #resource are three different resources● OPTIONS verb● PATCH verb● PUT verb ○ upsert ○ whole resource state
  34. 34. Rails and HATEOAS● lack of abstractions for hypermedia controls● confusing terms: ○ #resource are three different resources● OPTIONS verb● PATCH verb● PUT verb ○ upsert ○ whole resource state● custom media types require custom code
  35. 35. Richardson Maturity ModelSource: http://martinfowler.com/articles/richardsonMaturityModel.html
  36. 36. Books
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×