(HTML Hypermedia APIs and Adaptive Web Design)              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 ...
• Connected physical devices• Types of devices• Platforms• Device modelshttp://gigaom.com/2010/04/14/ericsson-sees-the-int...
Improved quality                                               Improved pricehttp://en.wikipedia.org/wiki/Commoditization
3%                                  7%                                                    54%                           35...
http://opensignal.com/reports/fragmentation.php
Move slowly  Hungry   AngryLots of them
How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia ...
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                                                                               Jon Moore             ht...
Support for out-bound navigational links (HTTP GET)<a href="http://www.example.org/search" title="view search page">Search...
Rich semantics<ul> => bag<ol> => list                                                                                 Jon ...
Extend using micro format style                                                                                Jon Moore  ...
<div id="bugs">  <ul class="all">    <li>      <span class="title">JFokus bug</span>      <span class="description">The de...
Already standardized, everybody knows it                                                                                Jo...
Good tooling support                                                                               Jon Moore             h...
“Optimize where it matters”
Primary use-cases => NativeSecondary use-cases => Render HTML response
• Hypermedia Controls (read/write)?• Rich semantics?• Extendable?• Standardized?• Everybody knows it?• Good tooling suppor...
”Building Hypermedia APIswith HTML5 and Node”, Mike Amundsen             http://www.amazon.com/Building-Hypermedia-APIs-HT...
How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia ...
”Mobile first”Simple HTML~3kB CSSAvoid JavaScript!
RestBugs: Mobile web
How to make a “desktop web app” with better UX?
“An escalator can never break: itcan only become stairs.”                 – Mitch Hedberg
http://easy-readers.net/books/adaptive-web-design   Aaron Gustafson
Responsive Web Design                                                        Unobtrusive JavaScriptDelayed content loading...
“Progressive Enhancement 2.0”, Nicolas Zakas“Resource-Oriented Client Architecture”                        http://www.webm...
HTML Hypermedia APIs                         Mobile first          “Minimalistic HTML”
Native apps (80/20)Web browsers              HTML Hypermedia API                                  +                       ...
www.example.comapi.example.com
RestBugs: HTML Hypermedia API + AWD
(Inline javascript code in responses)use 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”)};if (renderWeb):  redirect to index pageelse:  return 201 ...
(app.js)renderWeb = function(){   return host.contains(":9200")};(server template)<% if(renderWeb) { %>  <script>…</script...
• Connected physical devices• Types of devices• Platforms• Device models
• How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hyperme...
Native apps (80/20)Web browsers              HTML Hypermedia API                                  +                       ...
@gustaf_nkhttps://github.com/gustafnk/RestBugs
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013
Upcoming SlideShare
Loading in …5
×

Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013

551
-1

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
551
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Surviving the Zombie Apocalypse of Connected devices - Jfokus 2013

  1. 1. (HTML Hypermedia APIs and Adaptive Web Design) 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. • Connected physical devices• Types of devices• Platforms• Device modelshttp://gigaom.com/2010/04/14/ericsson-sees-the-internet-of-things-by-2020/
  6. 6. Improved quality Improved pricehttp://en.wikipedia.org/wiki/Commoditization
  7. 7. 3% 7% 54% 35% Google Apple RIM Microsofthttp://www.comscore.com/Insights/Press_Releases/2013/1/comScore_Reports_November_2012_U.S._Mobile_Subscriber_Market_Share
  8. 8. http://opensignal.com/reports/fragmentation.php
  9. 9. Move slowly Hungry AngryLots of them
  10. 10. How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  11. 11. iOS Android … … … Web ? API Store
  12. 12. iOS Android … … … Web ? API Store http://roca-style.org/#application-logic
  13. 13. http://martinfowler.com/articles/richardsonMaturityModel.html
  14. 14. Jon Moorehttp://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  15. 15. Hypermedia controls Jon Moore http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  16. 16. Support for out-bound navigational links (HTTP GET)<a href="http://www.example.org/search" title="view search page">Search</a>Support for non-idempotent updates (HTTP POST)<form method="post" action="http://www.example.org/my-keywords"/> <label>Keywords:</label> <input name="keywords" type="text" value="" /> <input type="submit" /></form> http://amundsen.com/hypermedia/hfactor/
  17. 17. Rich semantics<ul> => bag<ol> => list Jon Moore<dl> => map http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  18. 18. Extend using micro format style Jon Moore http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  19. 19. <div id="bugs"> <ul class="all"> <li> <span class="title">JFokus 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>
  20. 20. Already standardized, everybody knows it Jon Moore http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  21. 21. Good tooling support Jon Moore http://codeartisan.blogspot.com/2012/07/using-html-as-media-type-for-your-api.html
  22. 22. “Optimize where it matters”
  23. 23. Primary use-cases => NativeSecondary use-cases => Render HTML response
  24. 24. • Hypermedia Controls (read/write)?• Rich semantics?• Extendable?• Standardized?• Everybody knows it?• Good tooling support (server/clients)?
  25. 25. ”Building Hypermedia APIswith HTML5 and Node”, Mike Amundsen http://www.amazon.com/Building-Hypermedia-APIs-HTML5-Node/dp/1449306578
  26. 26. How to scale development of apps? => HTML Hypermedia APIsHow to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  27. 27. ”Mobile first”Simple HTML~3kB CSSAvoid JavaScript!
  28. 28. RestBugs: Mobile web
  29. 29. How to make a “desktop web app” with better UX?
  30. 30. “An escalator can never break: itcan only become stairs.” – Mitch Hedberg
  31. 31. http://easy-readers.net/books/adaptive-web-design Aaron Gustafson
  32. 32. 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
  33. 33. “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
  34. 34. HTML Hypermedia APIs Mobile first “Minimalistic HTML”
  35. 35. Native apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web (80/20) No application logic Application logic
  36. 36. www.example.comapi.example.com
  37. 37. RestBugs: HTML Hypermedia API + AWD
  38. 38. (Inline javascript code in responses)use 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()
  39. 39. (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
  40. 40. (app.js)renderWeb = function(){ return host.contains(“:9200”)};if (renderWeb): redirect to index pageelse: return 201 Created;
  41. 41. (app.js)renderWeb = function(){ return host.contains(":9200")};(server template)<% if(renderWeb) { %> <script>…</script> <link href="/css/mobile.css" … /><% } %>
  42. 42. • Connected physical devices• Types of devices• Platforms• Device models
  43. 43. • How to scale development of apps? => HTML Hypermedia APIs• How to make our web work on every browser? => AWDHTML Hypermedia APIs + AWD => Perfect combo!
  44. 44. Native apps (80/20)Web browsers HTML Hypermedia API + AWDEnhanced web (80/20) No application logic Application logic
  45. 45. @gustaf_nkhttps://github.com/gustafnk/RestBugs

×