This is the slide deck from AkJS, May 2013. Code samples: https://gist.github.com/toddb/5522441 I am interested in hypermedia-style applications. When implementing the client code, it must be able to locate semantic links. Once we have them we can follow them either to get more information or to do something on the server. On the night, I demonstrate one approach to this which is promise-based using angularjs. This talk is focussed around how simple the client-side code can be when traversing messages. While, promised-based code is more complex, once learned is a familiar pattern with benefits. Apologies if you were at the session and also felt that there wasn't enough javascript or walking through it. I mentioned a comparison link. Here it is: http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

1. talks@goneopen.com
AkJS – May 2013
ANGULARJS & THE
PROMISE OF
HYPERMEDIA CLIENTS

2. Agenda
• Explaining links
• Code samples

3. Links – follow them and don‟t construct
them
Start and end point

4. It‟s all about connectedness
Hypermedia is defined by the presence of
control information embedded within the
information (message) presented to the client,
such that from the message, systems or users
obtain choices and select actions.
Adapted from: Fielding, 2001

5. Following the links
• the server provides the options per request
• the client traverses the links to make more
requests

6. What can you do?

7. What will these do?
<a href=“/orders/2”>My coffee</a>
<link rel=”stylesheet" type=”text/css" href
“/default.css” />
<form action=”/orders/” method=”post">
<input type=”radio” name=“type” value=“med”/>
<input type="submit” value=“Submit”/>
</form>

8. What might this do?
{
links:[
{ rel:"self", type:"application/json", href:"/orders/2" },
{ rel:”edit-media", type:”text/html", href:"/orders/2" },
{ rel:”index”, type:"application/json", href:"/orders/”
],
type:"medium”
}

9. Choose the links to follow
The web application

10. Application State
Client
Server
Resource
Representation
Resource
Internet

11. Following the links with promises
// ... ask for a representation
link.get(„HEAD‟, „collection‟, „application/json‟)
.done(function (content) {
// ... content is resource
})

12. Semantic Interface
Examples:
• first, last, collection, item, index, latest-item,
next-archive, current, edit-form, create-form,
next, prev
• pay, authenticator

13. Semantic Link: Example
<link rel="collection" type="application/json"
href=“http://localhost/orders/”/>
<link rel="authenticator" type="application/json"
href=“http://localhost/session/”/>

14. The code
Let‟s look at the code
that traverses those
messages

15. Let‟s keep our promises
Todd Brackley
goneopen.com
@toddbNZ

16. Useful refs (and referred to
materials)
• How to get a cup of coffee
http://www.infoq.com/articles/webber-rest-
workflow
• Hypermedia and node.js. Amundsen
• Restful WebServices
• Restful Web APIs
• Fielding‟s dissertation
• Test-Driven Web APIs on infoq.com
• Designing a RESTful Web API

17. REST a la Fielding (6 + 4 +/- 1)
• Client-Server
• Statelessness
• Cache
• Uniform Interface ---
>
• Layered System
• Code-on-demand
(optional but
increasingly
important)
• Identification of
Resources
• Manipulation of
resources through
representations
• Self-descriptive
messages
• Hypermedia as the
engine of application
state (HATEOAS)
The six minus one
The other four (interface
constraints)