Angularjs and the promise of hypermedia clients
Upcoming SlideShare
Loading in...5
×
 

Angularjs and the promise of hypermedia clients

on

  • 2,681 views

This is the slide deck from AkJS, May 2013. ...

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/

Statistics

Views

Total Views
2,681
Slideshare-icon Views on SlideShare
2,681
Embed Views
0

Actions

Likes
2
Downloads
5
Comments
1

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • See https://gist.github.com/toddb/5522441 for scripts covered in the demo
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Links and forms
  • Known set of data contracts that we can use to obtain data

Angularjs and the promise of hypermedia clients Angularjs and the promise of hypermedia clients Presentation Transcript

  • 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 (message) presented to the client,such that from the message, systems or usersobtain choices and select actions.Adapted from: Fielding, 2001
  • 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 action=”/orders/” method=”post"><input type=”radio” name=“type” value=“med”/><input type="submit” value=“Submit”/></form>
  • 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”}
  • Choose the links to followThe web application
  • Application StateClientServerResourceRepresentationResourceInternet
  • Following the links with promises// ... ask for a representationlink.get(„HEAD‟, „collection‟, „application/json‟).done(function (content) {// ... content is resource})
  • Semantic InterfaceExamples:• first, last, collection, item, index, latest-item,next-archive, current, edit-form, create-form,next, prev• pay, authenticator
  • Semantic Link: Example<link rel="collection" type="application/json"href=“http://localhost/orders/”/><link rel="authenticator" type="application/json"href=“http://localhost/session/”/>
  • 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• 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
  • 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)