Your SlideShare is downloading. ×
0
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
HTML Hypermedia APIs and Adaptive Web Design - jDays 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML Hypermedia APIs and Adaptive Web Design - jDays 2013

3,501

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×