HTML HYPERMEDIA APIS
AND
ADAPTIVE WEB DESIGN
Gustaf Nilsson Kotte / @gustaf_nk
ABOUT ME
TWO AREAS OF INTEREST
Hypermedia APIs - No application logic in API clients
Adaptive Web Design - Multi-device web
Working...
DEMO, KANBAN BOARD
HTML Hypermedia API + Adaptive Web Design
API - FIRST ATTEMPT
GTPS ies
E/OT tm/
{

}

i:13
d 2,
nm:"."
ae ..,
dsrpin "."
ecito: ..,
sau:"ako|okn|eiydn"
tts bclgwrig...
SERVER SIDE: ENFORCE RULES
Don't trust clients
CLIENT SIDE: USER FRIENDLY
Hide non-valid transitions
Show primary transitions
"Read the specification"
WITHOUT HYPERMEDIA
PREFER FAT APIS OVER FAT CLIENTS
http://martinfowler.com/articles/richardsonMaturityModel.html
HYPERMEDIA APIS
WHAT IS THE HYPERMEDIA CONSTRAINT?
You do stuff by reading pages
and then either
follow links or submit forms.
— Jon Moore
USE HTML FOR HYPERMEDIA APIS
Lots of hypermedia controls
Old, standardized, everybody knows HTML
Good tooling support

htt...
MORE...
Great for learning about hypermedia!
INTERLUDE
JSON is ok :)
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<= tmd...
EXAMPLE: MICROFORMATS2, ENTITIES
<icas"-tm>
l ls=hie"
<i cas"-ae>% ie.ae%<dv
dv ls=pnm"<= tmnm >/i>
<i cas"-tts>% ie.tts%<...
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"...
HYPERMEDIA APIS
Expose use cases
Maximize user percieved value per request (size)
Avoid "chatty" interactions (latency)
MOBILE FIRST
Expose use cases
Maximize user percieved value per request (size)
Avoid "chatty" interactions (latency)
HTML HYPERMEDIA APIS ❤ MOBILE FIRST
http://filamentgroup.com/lab/ajax_includes_modular_content/
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anato...
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
ADAPTIVE WEB DESIGN
Responsive web design
Feature detection
Device APIs
Performance
Conditional loading
Content strategy
T...
PROGRESSIVE ENHANCEMENT
THE API AND THE WEB
CAN BE THE SAME THING!
HTML Hypermedia APIs ❤ Mobile First
Mobile First ❤ all web browsers and devices
THE API AND THE WEB
CAN BE THE SAME THING!
HTML Hypermedia APIs
❤
Adaptive Web Design
HTML HYPERMEDIA APIS + AWD
HIGH LEVEL VIEW
Same code for web and API
...yes, they share templates too
Separate URLs
Optimize for both perspectives
DEMO: CHANGING THE APPLICATION
SUMMARY
HTML Hypermedia APIs ❤ Mobile First
Mobile First ❤ all web browsers and devices
HTML Hypermedia APIs
❤
Adaptive Web Design
FURTHER EXPLORATION, BOOKS
Mike Amundsen , Building Hypermedia APIs
with HTML5 and Node
Steve Klabnik , Designing Hypermed...
FURTHER EXPLORATION, ONLINE
Brad Frost , Beyond Media Queries:
Anatomy of an Adaptive Web Design
Nicolas Zakas , Progressi...
THANK YOU!
Gustaf Nilsson Kotte / @gustaf_nk

Code: https://github.com/gustafnk/kanban-awd-api
Demo: http://kanban-awd.her...
Upcoming SlideShare
Loading in...5
×

HTML Hypermedia APIs and Adaptive Web Design - jDays 2013

4,665

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,665
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML Hypermedia APIs and Adaptive Web Design - jDays 2013

  1. 1. HTML HYPERMEDIA APIS AND ADAPTIVE WEB DESIGN Gustaf Nilsson Kotte / @gustaf_nk
  2. 2. ABOUT ME
  3. 3. TWO AREAS OF INTEREST Hypermedia APIs - No application logic in API clients Adaptive Web Design - Multi-device web Working nicely together!
  4. 4. DEMO, KANBAN BOARD HTML Hypermedia API + Adaptive Web Design
  5. 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. 6. SERVER SIDE: ENFORCE RULES Don't trust clients
  7. 7. CLIENT SIDE: USER FRIENDLY Hide non-valid transitions Show primary transitions "Read the specification"
  8. 8. WITHOUT HYPERMEDIA
  9. 9. PREFER FAT APIS OVER FAT CLIENTS
  10. 10. http://martinfowler.com/articles/richardsonMaturityModel.html
  11. 11. HYPERMEDIA APIS
  12. 12. WHAT IS THE HYPERMEDIA CONSTRAINT? You do stuff by reading pages and then either follow links or submit forms. — Jon Moore
  13. 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. 14. MORE... Great for learning about hypermedia!
  15. 15. INTERLUDE JSON is ok :)
  16. 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. 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. 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. 19. HYPERMEDIA APIS Expose use cases Maximize user percieved value per request (size) Avoid "chatty" interactions (latency)
  20. 20. MOBILE FIRST Expose use cases Maximize user percieved value per request (size) Avoid "chatty" interactions (latency)
  21. 21. HTML HYPERMEDIA APIS ❤ MOBILE FIRST
  22. 22. http://filamentgroup.com/lab/ajax_includes_modular_content/ http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  23. 23. http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
  24. 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. 25. PROGRESSIVE ENHANCEMENT
  26. 26. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
  27. 27. THE API AND THE WEB CAN BE THE SAME THING! HTML Hypermedia APIs ❤ Adaptive Web Design
  28. 28. HTML HYPERMEDIA APIS + AWD
  29. 29. HIGH LEVEL VIEW Same code for web and API ...yes, they share templates too Separate URLs Optimize for both perspectives
  30. 30. DEMO: CHANGING THE APPLICATION
  31. 31. SUMMARY
  32. 32. HTML Hypermedia APIs ❤ Mobile First Mobile First ❤ all web browsers and devices
  33. 33. HTML Hypermedia APIs ❤ Adaptive Web Design
  34. 34. FURTHER EXPLORATION, BOOKS Mike Amundsen , Building Hypermedia APIs with HTML5 and Node Steve Klabnik , Designing Hypermedia APIs Aaron Gustafson , Adaptive Web Design
  35. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×