Slides for my talk @ RubyFuza 2012

1. TAKING THE HYPE OUT OF
HYPERMEDIA
ryan.lemmer@factor10.com // @ryanlemmer // GMT+2

2. BUILDING UI

3. TEMPLATE DRIVEN

4. TEMPLATE DRIVEN
<table>
<tr>
<td> <%= @cart.total %> </td>
...
</tr>
</table>

5. DATA + TEMPLATE DRIVEN

6. DATA + TEMPLATE DRIVEN
{
total: 987,
discount: 10,
...
}

7. DATA + TEMPLATE DRIVEN
AJAX GET /cart/1
{
total: 987,
discount: 10,
...
}

8. CONSISTENCY

9. CONSISTENCY

10. CONSISTENCY

11. CONSISTENCY

12. (LACK OF) CONSISTENCY
... MAKES TESTABILITY TOUGH

13. TESTABILITY
to test, you need a (nice) handle on the situation

14. TESTABILITY
to test, you need a (nice) handle on the situation
# capybara
it "signs me in" do
within("#session") do
fill_in 'Login', :with => 'boo@hoo.com'
fill_in 'Password', :with => 'secrat(sic)'
end
click_link 'Sign in'
end

15. INTERACTIONS

16. INTERACTIONS

17. INTERACTIONS

18. INTERACTIONS

19. IMPLICIT INTERACTIONS

20. IMPLICIT INTERACTIONS
def update_item_qty
@item = @cart.items.find(params[:id])
if @item.update_attributes(:quantity => params[:qty])
redirect_to(@item)
else
render "edit"
end
end

21. LAY OF THE LAND

22. LAY OF THE LAND

23. LAY OF THE LAND

24. LAY OF THE LAND

25. HYPERMEDIA DRIVEN

26. HYPERMEDIA DRIVEN
{
data: {
total: 987,
discount: 10,
...
},
links: {
{rel: “checkout”
uri: “...”}
}

27. HYPERMEDIA DRIVEN
{ after /checkout
data: {
total: 987,
discount: 10,
...
}, {
links: { data: {
{rel: “checkout” total: 987,
uri: “...”} discount: 10,
} ...
},
links: {}
}

28. HYPERMEDIA DSL

29. HYPERMEDIA DSL
GET /cart/12312312

30. HYPERMEDIA DSL
GET /cart/12312312
POST /cart/12312312

31. HYPERMEDIA

32. HYPERMEDIA

33. HYPERMEDIA
only for “open” carts

34. HYPERMEDIA+STATEMACHINE

35. HYPERMEDIA+STATEMACHINE
NEXT STEP ??

36. HYPERMEDIA+STATEMACHINE
resource state
machine
NEXT STEP ??

37. HYPERMEDIA+STATEMACHINE
resource state
machine
only checkout if
cart is “open”
NEXT STEP ??

38. EXPLICIT INTERACTIONS

39. EXPLICIT INTERACTIONS
SERVER SIDE
INTERACTION
LAYER

40. EXPLICIT INTERACTIONS
SERVER SIDE
HATEOAS INTERACTION
LAYER

41. INTERACTION LAYER

42. INTERACTION LAYER
HYPERMEDIA
“FLOW”
“STRUCTURE”

43. AND CONSISTENCY?

44. AND CONSISTENCY?
remove
then RELOAD

45. AND CONSISTENCY?
remove
then RELOAD

46. ARCHITECTURE

47. ARCHITECTURE

48. WHAT’S NEXT?
* Smart Hypermedia clients
* Hypermedia Types => (HTML Forms, ATOM, ...)
* machine-to-machine API’s => dynamic, executable

49. THANKS
aslam khan
andreas brink
lennart ohlsson
@factor10