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

HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

on

  • 4,172 views

 

Statistics

Views

Total Views
4,172
Slideshare-icon Views on SlideShare
2,336
Embed Views
1,836

Actions

Likes
1
Downloads
7
Comments
0

7 Embeds 1,836

http://nordicapis.com 1137
http://www.scoop.it 583
https://twitter.com 105
http://newsblur.com 7
http://www.newsblur.com 2
http://webcache.googleusercontent.com 1
http://cc.bingj.com 1
More...

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 - Nordic APIs HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs Presentation Transcript

    • Gustaf Nilsson Kotte
    • @gustaf_nk
    • How to scale development of apps?How to make our web work on every browser?
    • How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
    • RestBugs fork: HTML Hypermedia API + Adaptive Web Design https://github.com/gustafnk/RestBugs
    • iOS Android … … … Web ? API Store
    • iOS Android … … … Web ? API Store
    • http://martinfowler.com/articles/richardsonMaturityModel.html
    • Jon Moorehttp://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
    • Hypermedia controls (read + write)Old, standardized, everybody knows it Jon MooreGood tooling support (server + clients) http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
    • <div id="bugs"> <ul class="all"> <li> <span class="title">Nordic APIs bug</span> <span class="description">The description of the bug</span> <form class="move working next" action="/bugs/working" method="POST" title="Move to Working"> <input name="id" type="hidden" value="..."> <input name="submit" type="submit" value="Move to Working"> </form> </li> </ul></div>
    • HTML Hypermedia APIs Mobile first “Minimalistic HTML”
    • HTML Hypermedia APIs + Mobile web
    • Mobile web Desktop web AWD “Modern mobile” …
    • Responsive Web Design Unobtrusive JavaScriptDelayed content loading Hijax Bundling AJAX requests Conditionally loaded contentFeature detection Performance HTML5 Navigation Timing http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design
    • “An escalator can never break: itcan only become stairs.” – Mitch Hedberg
    • Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
    • www.example.comapi.example.com
    • (app.js)renderWeb = function(){ return host.contains(":9200")};POST /bugs: … if(renderWeb()) redirect to index page else return 201 Created;
    • • How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
    • Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
    • http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578 http://easy-readers.net/books/adaptive-web-design
    • “Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture” http://www.webmonkey.com/2012/03/video-progressive-enhancement-2-0 http://roca-style.org
    • @gustaf_nkhttps://github.com/gustafnk/RestBugshttp://www.slideshare.net/GustafKotte
    • (Inline javascript code in responses)using harvey.js // polyfill for media queries configuration "large screen": on: $.getScript("/js/client.min.js"); $.get("/css/client.min.css", function(css) {…}); off: location.reload()
    • (client.min.js)links = $("#links a[rel!=index]");addForm = $("form.new");load template containing angular.js markupclear <body>bootstrap angularforeach link in links: htmlResponse = GET link parse htmlResponse populate view modelEnable hijax for add and move forms
    • (app.js)renderWeb = function(){ return host.contains(":9200")};(server template)<% if(renderWeb) { %> <script>…</script> <link href="/css/mobile.css" … /><% } %>