talks@goneopen.comAkJS – May 2013ANGULARJS & THEPROMISE OFHYPERMEDIA CLIENTS
Agenda• Explaining links• Code samples
Links – follow them and don‟t constructthemStart and end point
It‟s all about connectednessHypermedia is defined by the presence ofcontrol information embedded within theinformation (me...
Following the links• the server provides the options per request• the client traverses the links to make morerequests
What can you do?
What will these do?<a href=“/orders/2”>My coffee</a><link rel=”stylesheet" type=”text/css" href“/default.css” /><form acti...
What might this do?{links:[{ rel:"self", type:"application/json", href:"/orders/2" },{ rel:”edit-media", type:”text/html",...
Choose the links to followThe web application
Application StateClientServerResourceRepresentationResourceInternet
Following the links with promises// ... ask for a representationlink.get(„HEAD‟, „collection‟, „application/json‟).done(fu...
Semantic InterfaceExamples:• first, last, collection, item, index, latest-item,next-archive, current, edit-form, create-fo...
Semantic Link: Example<link rel="collection" type="application/json"href=“http://localhost/orders/”/><link rel="authentica...
The codeLet‟s look at the codethat traverses thosemessages
Let‟s keep our promisesTodd Brackleygoneopen.com@toddbNZ
Useful refs (and referred tomaterials)• How to get a cup of coffeehttp://www.infoq.com/articles/webber-rest-workflow• Hype...
REST a la Fielding (6 + 4 +/- 1)• Client-Server• Statelessness• Cache• Uniform Interface --->• Layered System• Code-on-dem...
Upcoming SlideShare
Loading in …5
×

Angularjs and the promise of hypermedia clients

3,094 views
2,895 views

Published on

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/

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • See https://gist.github.com/toddb/5522441 for scripts covered in the demo
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,094
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide
  • Links and forms
  • Known set of data contracts that we can use to obtain data
  • Angularjs and the promise of hypermedia clients

    1. 1. talks@goneopen.comAkJS – May 2013ANGULARJS & THEPROMISE OFHYPERMEDIA CLIENTS
    2. 2. Agenda• Explaining links• Code samples
    3. 3. Links – follow them and don‟t constructthemStart and end point
    4. 4. It‟s all about connectednessHypermedia is defined by the presence ofcontrol information embedded within theinformation (message) presented to the client,such that from the message, systems or usersobtain choices and select actions.Adapted from: Fielding, 2001
    5. 5. Following the links• the server provides the options per request• the client traverses the links to make morerequests
    6. 6. What can you do?
    7. 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. 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. 9. Choose the links to followThe web application
    10. 10. Application StateClientServerResourceRepresentationResourceInternet
    11. 11. Following the links with promises// ... ask for a representationlink.get(„HEAD‟, „collection‟, „application/json‟).done(function (content) {// ... content is resource})
    12. 12. Semantic InterfaceExamples:• first, last, collection, item, index, latest-item,next-archive, current, edit-form, create-form,next, prev• pay, authenticator
    13. 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. 14. The codeLet‟s look at the codethat traverses thosemessages
    15. 15. Let‟s keep our promisesTodd Brackleygoneopen.com@toddbNZ
    16. 16. Useful refs (and referred tomaterials)• How to get a cup of coffeehttp://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. 17. REST a la Fielding (6 + 4 +/- 1)• Client-Server• Statelessness• Cache• Uniform Interface --->• Layered System• Code-on-demand(optional butincreasinglyimportant)• Identification ofResources• Manipulation ofresources throughrepresentations• Self-descriptivemessages• Hypermedia as theengine of applicationstate (HATEOAS)The six minus oneThe other four (interfaceconstraints)

    ×