Slide 1
Slide 1 text
Adap%ve(and(evolvable(applica%ons
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 1
Slide 2
Slide 2 text
What%is%hypermedia?
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 2
Slide 3
Slide 3 text
What%does%it%look%like?
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 3
Slide 4
Slide 4 text
How$can$I$make$use$of$it$in$my$
apps?
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 4
Slide 5
Slide 5 text
There%are%two%types%of%API%client
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 5
Slide 6
Slide 6 text
Machine(driven
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 6
Slide 7
Slide 7 text
Human&driven
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 7
Slide 8
Slide 8 text
Consider)the)web)browser
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 8
Slide 9
Slide 9 text
The$data
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 9
Slide 10
Slide 10 text
What%the%client%should%do%next
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 10
Slide 11
Slide 11 text
Hypermedia*is*defined*by*the*
presence*of*applica5on*control*
informa5on*embedded*within,*or*as*
a*layer*above,*the*presenta5on*of*
informa5on
—"Roy"Fielding
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 11
Slide 13
Slide 13 text
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 13
Slide 14
Slide 14 text
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 14
Slide 15
Slide 15 text
A"browser"is"designed"so"that"its"
hypermedia"affordances"are"
controlled"by"humans
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 15
Slide 16
Slide 16 text
What%about%when%the%consumer%is%a%
smartphone/web%applica4on?
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 16
Slide 17
Slide 17 text
Hypermedia*Applica.on*Language
{
"_links": {
"self": { "href": "/orders/1" },
"next": { "href": "/orders/2" }
},
"_embedded": {
"items": [
{
"_links": {
"self": { "href": "/items/1" }
}
"price": "10"
}
]
},
"total": "10"
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 17
Slide 18
Slide 18 text
HAL$contains$two$types$of$link$affordance
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 18
Slide 19
Slide 19 text
Outbound(naviga-onal
{
"_links": {
"self": { "href": "http://example.org/thing/2" },
"prev": { "href": "http://example.org/thing/1" },
"next": { "href": "http://example.org/thing/3" }
}
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 19
Slide 20
Slide 20 text
Embedded
{
"_embedded": {
"things": [
{
...
}
]
}
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 20
Slide 21
Slide 21 text
This%allows%the%message%to%contain%
both%the%data%and%the%context
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 21
Slide 22
Slide 22 text
Less$logic$in$the$client
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 22
Slide 23
Slide 23 text
weluse/hyperagent
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 23
Slide 24
Slide 24 text
{
"_links": {
"self": { "href": "http://example.org/thing/2" },
"prev": { "href": "http://example.org/thing/1" },
"next": { "href": "http://example.org/thing/3" }
}
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 24
Slide 25
Slide 25 text
root.links['next'].fetch().then(function (thing) {
// do something with the 'next' item
});
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 25
Slide 26
Slide 26 text
Clients(can(adapt(to(change
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 26
Slide 27
Slide 27 text
The$server$can$evolve$independently$
from$the$client
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 27
Slide 28
Slide 28 text
URLs
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 28
Slide 29
Slide 29 text
Avoid&assembling&URLs
var link = 'http://example.org/thing/' + id;
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 29
Slide 30
Slide 30 text
Use$a$link$template$on$the$home$if$you$need$to$convert$an$id$to$a$URL
{
"_links": {
"self": { "href": "/" },
"thing": {
"href": "http://example.org/thing/{id}",
"templated": "true"
}
}
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 30
Slide 31
Slide 31 text
Link%templates%with%hyperagent
var link = root.link('thing', { id: id });
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 31
Slide 32
Slide 32 text
RFC6570()(URI(Templates
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 32
Slide 33
Slide 33 text
JSON%Schema
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 33
Slide 34
Slide 34 text
{
"title": "Example Schema",
"type": "object",
"properties": {
"firstName": {
"type": "string"
},
"lastName": {
"type": "string"
},
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0
}
},
"required": ["firstName", "lastName"]
}
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 34
Slide 35
Slide 35 text
JSON%Form
(or$Angular$Schema$Form)
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 35
Slide 36
Slide 36 text
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 36
Slide 37
Slide 37 text
Three%good%things
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 37
Slide 38
Slide 38 text
• Hypermedia
• Link.templates
• JSON.Schema
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 38
Slide 39
Slide 39 text
One$goal
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 39
Slide 40
Slide 40 text
Put$control$back$on$the$server
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 40
Slide 41
Slide 41 text
React&to&change&in&a&posi.ve&way
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 41
Slide 42
Slide 42 text
Ben$Longden
CTO$Inviqa
@blongden
Adap%ve(and(evolvable(applica%ons(0(Ben(Longden 42