1. HTML HYPERMEDIA APIS
AND
ADAPTIVE WEB DESIGN
Gustaf Nilsson Kotte / @gustaf_nk

2. ABOUT ME

3. TWO AREAS OF INTEREST
Hypermedia APIs - No application logic in API clients
Adaptive Web Design - Multi-device web
Working nicely together!

4. DEMO, KANBAN BOARD
HTML Hypermedia API + Adaptive Web Design

5. API - FIRST ATTEMPT
GTPS ies
E/OT tm/
{
}
i:13
d 2,
nm:"."
ae ..,
dsrpin "."
ecito: ..,
sau:"ako|okn|eiydn"
tts bclgwrigvrf|oe

6. SERVER SIDE: ENFORCE RULES
Don't trust clients

7. CLIENT SIDE: USER FRIENDLY
Hide non-valid transitions
Show primary transitions
"Read the specification"

8. WITHOUT HYPERMEDIA

9. PREFER FAT APIS OVER FAT CLIENTS

10. http://martinfowler.com/articles/richardsonMaturityModel.html

11. HYPERMEDIA APIS

12. WHAT IS THE HYPERMEDIA CONSTRAINT?
You do stuff by reading pages
and then either
follow links or submit forms.
— Jon Moore

13. USE HTML FOR HYPERMEDIA APIS
Lots of hypermedia controls
Old, standardized, everybody knows HTML
Good tooling support
https://vimeo.com/20781278
http://codeartisan.blogspot.se/2012/07/using-html-as-media-type-for-your-api.html
http://amundsen.com/hypermedia/html/

14. MORE...
Great for learning about hypermedia!

15. INTERLUDE
JSON is ok :)

16. EXAMPLE: NON-SEMANTIC HTML
<i
l>
<i>% ie.ae%<dv
dv<= tmnm >/i>
<i>% ie.tts%<dv
dv<= tmsau >/i>
<i>% ie.ecito %<dv
dv<= tmdsrpin >/i>
<i>
dv
..
.
<dv
/i>
<i>
dv
..
.
<dv
/i>
<l>
/i

17. EXAMPLE: MICROFORMATS2, ENTITIES
<icas"-tm>
l ls=hie"
<i cas"-ae>% ie.ae%<dv
dv ls=pnm"<= tmnm >/i>
<i cas"-tts>% ie.tts%<dv
dv ls=psau"<= tmsau >/i>
<i cas"-ecito"<=ie.ecito %<dv
dv ls=pdsrpin>% tmdsrpin >/i>
<i cas"-om"
dv ls=pfrs>
..
.
<dv
/i>
<i cas"-ik"
dv ls=plns>
..
.
<dv
/i>
<l>
/i

18. EXAMPLE: MICROFORMATS2, FORMS
<i cas"-om"
dv ls=pfrs>
<omdt-e=mv bclg ato=/tm/ako"mto=PS"
fr aarl"oe ako" cin"iesbclg ehd"OT>
<nu nm=i"tp=hde"vle""
ipt ae"d ye"idn au=4>
<nu tte"umt tp=sbi"vle"oet bclg>
ipt il=sbi" ye"umt au=Mv o ako"
<fr>
/om
<omdt-e=mv vrf nx"ato=/tm/eiy mto=PS"
fr aarl"oe eiy et cin"iesvrf" ehd"OT>
<nu nm=i"tp=hde"vle""
ipt ae"d ye"idn au=4>
<nu tte"umt tp=sbi"vle"oet vrf"
ipt il=sbi" ye"umt au=Mv o eiy>
<fr>
/om
<dv
/i>

19. HYPERMEDIA APIS
Expose use cases
Maximize user percieved value per request (size)
Avoid "chatty" interactions (latency)

20. MOBILE FIRST
Expose use cases
Maximize user percieved value per request (size)
Avoid "chatty" interactions (latency)

21. HTML HYPERMEDIA APIS ❤ MOBILE FIRST

22. http://filamentgroup.com/lab/ajax_includes_modular_content/
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

23. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/

24. ADAPTIVE WEB DESIGN
Responsive web design
Feature detection
Device APIs
Performance
Conditional loading
Content strategy
Touch
Platform optimization
Ergonomics
...
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design

25. PROGRESSIVE ENHANCEMENT

26. THE API AND THE WEB
CAN BE THE SAME THING!
HTML Hypermedia APIs ❤ Mobile First
Mobile First ❤ all web browsers and devices

27. THE API AND THE WEB
CAN BE THE SAME THING!
HTML Hypermedia APIs
❤
Adaptive Web Design

28. HTML HYPERMEDIA APIS + AWD

29. HIGH LEVEL VIEW
Same code for web and API
...yes, they share templates too
Separate URLs
Optimize for both perspectives

30. DEMO: CHANGING THE APPLICATION

31. SUMMARY

32. HTML Hypermedia APIs ❤ Mobile First
Mobile First ❤ all web browsers and devices

33. HTML Hypermedia APIs
❤
Adaptive Web Design

34. FURTHER EXPLORATION, BOOKS
Mike Amundsen , Building Hypermedia APIs
with HTML5 and Node
Steve Klabnik , Designing Hypermedia APIs
Aaron Gustafson , Adaptive Web Design

35. FURTHER EXPLORATION, ONLINE
Brad Frost , Beyond Media Queries:
Anatomy of an Adaptive Web Design
Nicolas Zakas , Progressive Enhancement 2.0
Stefan Tilkov (et al), Resource-oriented Client Architecture

36. THANK YOU!
Gustaf Nilsson Kotte / @gustaf_nk
Code: https://github.com/gustafnk/kanban-awd-api
Demo: http://kanban-awd.herokuapp.com/ and http://kanban-api.herokuapp.com
Slides: http://www.slideshare.net/GustafKotte/html-hypermedia-apis-and-adaptive-web-design-j