This document discusses using HATEOAS (Hypermedia as the Engine of Application State) with the ExtJS JavaScript framework. It defines HATEOAS and common media types like HAL and Siren. HATEOAS reduces client-server coupling by having the client discover available state transitions from resource representations instead of having hardcoded URLs. The document explains how to extend ExtJS models and proxies to consume HAL responses and handle state transitions based on the link relations in HAL documents. Live coding examples demonstrate implementing this with the Sencha HAL package.

1. Using HATEOAS with ExtJS
Jeff Stano
Chief Software Architect at UniFocus

2. What is HATEOAS
• Representational State Transfer (REST)
- Was defined by Roy Fielding in 2000
- Is the foundation of the modern WEB
• REST constraints
- Resources must have identifiers
- Manipulation of resource through representations
- Resources are self describing
- Hypermedia as the engine of application state (HATEOAS)
2

3. What is HATEOAS continued
• The application is modeled as an engine that moves from one state to another by
picking state transformations in the current set of representations
• State: the current representation of a resource
• Transitions: instructions on how to move a resource from on state to another
3

4. Why HATEOAS
Reduce coupling between client and server
• Client discovers the URLs of the available state transitions
• Client does not need to know how resources are identified
• Client only need to know the root URL
• Server can change the URL layout without impacting the client
• Server can control which state transitions are available to the client
4

5. HATEOAS Media Types

6. HATEOAS Media Types
• HAL
- http://stateless.co/hal_specification.html
• Siren
- https://github.com/kevinswiber/siren
• Collection+JSON
- http://amundsen.com/media-types/collection/
6

7. Why HAL
• Widely adopted
• Has good support in server side technologies for generating the JSON
• Simple format that is easily generated and consumed
7

8. The HAL Media Type
• http://stateless.co/hal_specification.html
• application/hal+json
• Resources
- State: the data
- Links: available state transitions
- Embedded resources:
• Links
- Relation (rel): the name of the link
- Target (href): the URL of the link
8

9. Sample HAL Document
{ "name": "Isaac Asimov”
"_links": {
"self": {
"href": "/"
},
"books:books": {
"href": "/books/asimov"
},
"curies": [
{
"name": "books",
"href": "http://rels.test.com/books/{rel}",
"templated": true
}
]
},
{"_embedded": {
"books:books": [
{
"title": "Foundation",
"_links": {
"self": {
"href": "/books/foundation"
}
}
}
]
}
}

10. ExtJS and HAL

11. How does ExtJS handle REST
• ExtJS builds URLs on the client and assumes the server can handle what it
generates
• This is not ideal since the client is essentially forcing its will on the server
• Client hard codes URLs and must determine state transitions through other means
• It’s not handling the Hypermedia portion of REST
11

12. Extending ExtJS to use HAL
• Need to extend Ext.data.Model
- Add methods that support the HAL meta-data
- Override the load and save methods
- Override the id handling so the id is set to the self URL
• Need to extend the Ext.data.reader.Json class
• Need to extend the Ext.data.proxy.Rest class
12

13. Live Coding Examples

14. Sencha Hal Package
- https://github.com/jstano/sencha-hal
14

15. References

16. Websites
• https://en.wikipedia.org/wiki/HATEOAS
• https://en.wikipedia.org/wiki/Representational_state_transfer
• http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven
• http://martinfowler.com/articles/richardsonMaturityModel.html
• https://www.infoq.com/articles/webber-rest-workflow
• http://stateless.co/hal_specification.html
16