NB! Download the pdf and open it in Chrome to see the slides without the "grid background".

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. PREFER FAT APIS OVER FAT CLIENTS

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

7. HYPERMEDIA APIS

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

9. 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/

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

11. INTERLUDE
JSON is ok :)
Also, hypermedia is a bit harder to consume in general

12. EXAMPLE: MICROFORMATS2, ENTITIES
<li class="h-item">
<div class="p-name"><%= item.name %></div>
<div class="p-status"><%= item.status %></div>
<div class="p-description"><%= item.description %></div>
<div class="p-forms">
...
</div>
<div class="p-links">
...
</div>
</li>

13. EXAMPLE: MICROFORMATS2, FORMS
<div class="p-forms">
<form data-rel="move backlog" action="/items/backlog" method="POST">
<input name="id" type="hidden" value="4">
<input title="submit" type="submit" value="Move to backlog">
</form>
<form data-rel="move verify next" action="/items/verify" method="POST">
<input name="id" type="hidden" value="4">
<input title="submit" type="submit" value="Move to verify">
</form>
</div>

14. Minimal HTML
IDEA: A COMMON GOAL
HTML Hypermedia APIs ∩ Mobile first
=
(also, reduce number of roundtrips)

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

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

17. 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

18. PROGRESSIVE ENHANCEMENT

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

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

21. HTML HYPERMEDIA APIS + AWD

22. HIGH LEVEL VIEW
Same code for web and API
(yes, share templates too)
Separate URLs
Optimize response size and #roundtrips
Microformats2 as semantic layer or RDFa [Lite]
Agressive enhancement
Other AWD techniques :)
Optimize API perspective

23. DEMO: CHANGING THE APPLICATION

24. SUMMARY

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

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

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

28. THANK YOU!Gustaf Nilsson Kotte / @gustaf_nk
Code: https://github.com/gustafnk/kanban-awd-api
Demo: andhttp://kanban-awd.herokuapp.com/ http://kanban-api.herokuapp.com
Slides: https://github.com/gustafnk/HTML-Hypermedia-APIs-and-Adaptive-Web-Design