Your SlideShare is downloading. ×
0
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 ...
RestBugs fork: HTML Hypermedia API + Adaptive Web Design                                        https://github.com/gustafn...
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                                                   ...
<div id="bugs">  <ul class="all">    <li>      <span class="title">Nordic APIs bug</span>      <span class="description">T...
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...
“An escalator can never break: itcan only become stairs.”                 – Mitch Hedberg
Same logical endpointNative apps (80/20)Web browsers                  HTML Hypermedia API                                 ...
www.example.comapi.example.com
(app.js)renderWeb = function(){   return host.contains(":9200")};POST /bugs:  …  if(renderWeb())    redirect to index page...
• How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hyperme...
Same logical endpointNative apps (80/20)Web browsers                  HTML Hypermedia API                                 ...
http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578                          http://easy-readers.net/b...
“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”                        http://www.webm...
@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:  ...
(client.min.js)links = $("#links a[rel!=index]");addForm = $("form.new");load template containing angular.js markupclear <...
(app.js)renderWeb = function(){   return host.contains(":9200")};(server template)<% if(renderWeb) { %>  <script>…</script...
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs
Upcoming SlideShare
Loading in...5
×

HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs

4,357

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,357
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML Hypermedia APIs and Adaptive Web Design - Nordic APIs"

  1. 1. Gustaf Nilsson Kotte
  2. 2. @gustaf_nk
  3. 3. How to scale development of apps?How to make our web work on every browser?
  4. 4. How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  5. 5. RestBugs fork: HTML Hypermedia API + Adaptive Web Design https://github.com/gustafnk/RestBugs
  6. 6. iOS Android … … … Web ? API Store
  7. 7. iOS Android … … … Web ? API Store
  8. 8. http://martinfowler.com/articles/richardsonMaturityModel.html
  9. 9. Jon Moorehttp://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  10. 10. 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
  11. 11. <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>
  12. 12. HTML Hypermedia APIs Mobile first “Minimalistic HTML”
  13. 13. HTML Hypermedia APIs + Mobile web
  14. 14. Mobile web Desktop web AWD “Modern mobile” …
  15. 15. 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
  16. 16. “An escalator can never break: itcan only become stairs.” – Mitch Hedberg
  17. 17. Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
  18. 18. www.example.comapi.example.com
  19. 19. (app.js)renderWeb = function(){ return host.contains(":9200")};POST /bugs: … if(renderWeb()) redirect to index page else return 201 Created;
  20. 20. • How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  21. 21. Same logical endpointNative apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web No application logic Application logic
  22. 22. http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578 http://easy-readers.net/books/adaptive-web-design
  23. 23. “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
  24. 24. @gustaf_nkhttps://github.com/gustafnk/RestBugshttp://www.slideshare.net/GustafKotte
  25. 25. (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()
  26. 26. (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
  27. 27. (app.js)renderWeb = function(){ return host.contains(":9200")};(server template)<% if(renderWeb) { %> <script>…</script> <link href="/css/mobile.css" … /><% } %>
  1. A particular slide catching your eye?

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

×