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

HTML Hypermedia APIs and Adaptive Web Design - jDays 2013

on

  • 2,699 views

 

Statistics

Views

Total Views
2,699
Views on SlideShare
2,662
Embed Views
37

Actions

Likes
3
Downloads
2
Comments
0

5 Embeds 37

https://twitter.com 24
http://librosweb.es 10
http://eventifier.info 1
http://eventifier.co 1
http://eventifier.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML Hypermedia APIs and Adaptive Web Design - jDays 2013 HTML Hypermedia APIs and Adaptive Web Design - jDays 2013 Presentation Transcript

    • 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 nicely together!
    • 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 bclgwrigvrf|oe
    • 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 https://vimeo.com/20781278 http://codeartisan.blogspot.se/2012/07/using-html-as-media-type-for-your-api.html http://amundsen.com/hypermedia/html/
    • 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<= tmdsrpin >/i> <i> dv .. . <dv /i> <i> dv .. . <dv /i> <l> /i
    • 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
    • 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>
    • 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-anatomy-of-an-adaptive-web-design/
    • 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 Touch Platform optimization Ergonomics ... http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design
    • 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 Hypermedia APIs Aaron Gustafson , Adaptive Web Design
    • 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
    • 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