HTML Hypermedia APIs and Adaptive Web Design - jDays 2013

6,401 views
6,291 views

Published on

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

No Downloads
Views
Total views
6,401
On SlideShare
0
From Embeds
0
Number of Embeds
556
Actions
Shares
0
Downloads
10
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

×