Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Best viewed with...

Best viewed with...

Are we doomed to see history repeat itself? Is our fascination with new tools going to break the inherent robustness of the web we know? Or, can these new tools help us progressively enhance the web even further than we are able to now?

My aim is to take a look at the current state of the web and whether progressive enhancement is still plausible. Looking beyond whether a website works with JavaScript turned off or not. Instead looking at what new tools can offer and especially what game changing software is coming in the near future.


Adam Onishi

May 21, 2015

More Decks by Adam Onishi

Other Decks in Technology


  1. @onishiweb Best viewed with… Adam Onishi Talk Web Design 2015

  2. @onishiweb A long time ago…

  3. @onishiweb

  4. @onishiweb “Browser wars”!

  5. @onishiweb @onishiweb

  6. @onishiweb But, what about now?

  7. @onishiweb “For best results view this page in a modern

    browser.” - fancy website
  8. @onishiweb @onishiweb

  9. @onishiweb Chrome Firefox IE Safari Opera UC Browser Safari (iOS)

    Opera Mini Android Browser Amazon Silk YaBrowser Maxthon Iron Nokia Browser Sea Monkey Avant Camino Epiphany OmniWeb Konqueror Galeon Swiftfox
  10. @onishiweb Chrome (v42) • Fetch API • Push API •

    ES6 Classes IE (v11) • CSS Pointer events • WebGL • ES6 Classes Firefox (v38) • Web sockets/web workers • <picture> and srcset Safari (v8) • Navigation Timing API • SPDY Protocol • Animated PNG
  11. @onishiweb

  12. @onishiweb Developer-first development?

  13. @onishiweb Cake or Death?

  14. @onishiweb Progressive enhancement

  15. @onishiweb Why another P.E. talk?

  16. @onishiweb “Vague but exciting…”

  17. @onishiweb The web

  18. @onishiweb The Web JS CSS HTML Internet

  19. @onishiweb “JavaScript is part of the web platform; you don’t

    get to take it away and expect the web to work.” - Tom Dale http://bit.ly/tom-dale-web-platform
  20. @onishiweb The Web JS CSS HTML Internet

  21. @onishiweb Less of the vague, more of the exciting!

  22. @onishiweb HTML & CSS

  23. @onishiweb The Web JS CSS HTML Internet

  24. @onishiweb “Be conservative in what you do, be liberal in

    what you accept from others” - Robustness principle http://en.wikipedia.org/wiki/Robustness_principle
  25. @onishiweb <canvas> <!-- Fallback content --> </canvas> <audio> <!-- Fallback

    content --> </audio>
  26. @onishiweb <input type="email"> <input type="number"> <input type="date">

  27. @onishiweb <input type="text"> <input type="text"> <input type="text">

  28. @onishiweb

  29. @onishiweb .element { font-size:16px; font-size:1rem; }

  30. @onishiweb CSS itself, is still an enhancement…

  31. @onishiweb HTML & CSS are easy…

  32. @onishiweb @onishiweb

  33. @onishiweb JavaScript

  34. @onishiweb JS CSS HTML Internet The Web

  35. @onishiweb JavaScript has problems…

  36. @onishiweb “Cutting the mustard”

  37. @onishiweb Chrome Firefox IE Safari Opera UC Browser Safari (iOS)

    Opera Mini Android Browser Amazon Silk YaBrowser Maxthon Iron Nokia Browser Sea Monkey Avant Camino Epiphany OmniWeb Konqueror Galeon Swiftfox
  38. @onishiweb if('querySelector' in document && 'localStorage' in window && 'addEventListener'

    in window) { // bootstrap the javascript application }
  39. @onishiweb http://modernizr.com/

  40. @onishiweb function supports_placeholder() { var i = document.createElement('input'); return 'placeholder'

    in i; }
  41. @onishiweb if( supports_placeholder() ) { $('html').addClass('placeholder'); }

  42. @onishiweb Polyfills…

  43. @onishiweb “Think of it like a pair of glasses for

    your aging browser.” - FT Labs Polyfill service
  44. @onishiweb “The love we give [old browsers] is really bordering

    on necrophilia at times.” - Christian Heilmann
  45. @onishiweb ECMAScript 6?

  46. @onishiweb That “other” problem

  47. @onishiweb “1.1% of people aren’t getting JavaScript enhancements (1 in

    93).” - Peter Herlihy, GDS Team
  48. @onishiweb http://kryogenix.org/code/browser/everyonehasjs.html

  49. @onishiweb

  50. @onishiweb

  51. @onishiweb “Brilliant easter egg in the newly- redesigned nasa.gov —

    if JavaScript fails, you are immersed in the experience of deep space” - Jeremy Keith
  52. @onishiweb MVC Frameworks

  53. @onishiweb @onishiweb

  54. @onishiweb “The more you take over from the browser, the

    more complex yet expected browser behaviour you have to reimplement in JavaScript” - Jake Archibald http://jakearchibald.com/2013/progressive-enhancement-still-important/
  55. @onishiweb Performance

  56. @onishiweb Twitter & Airbnb

  57. @onishiweb “The bottom line is that a client-side architecture leads

    to slower performance because most of the code is being executed on our users’ machines rather than our own” - Twitter https://blog.twitter.com/2012/improving-performance-on-twittercom
  58. @onishiweb Isomorphic JS

  59. @onishiweb Server side rendering with Node.js

  60. @onishiweb Best of both worlds?

  61. @onishiweb GoCardless

  62. @onishiweb “Put the new gocardless.com live today. It's the same

    site but run from static files generated from a server running React.” - Jack Franklin, Go Cardless
  63. @onishiweb “If you visit it in a "good" browser with

    JS on, you get an incredibly snappy React app, if not, you hit the server on every click.” - Jack Franklin, Go Cardless
  64. @onishiweb Progressive enhancement in JavaScript?

  65. @onishiweb @onishiweb

  66. @onishiweb The network

  67. @onishiweb JS CSS HTML Internet The Web

  68. @onishiweb Do we always have network access?

  69. @onishiweb Train and hotel wifi…

  70. @onishiweb Mobile connections

  71. @onishiweb Cake or Death?

  72. @onishiweb Service worker

  73. @onishiweb “A service worker is a script that is run

    by your browser in the background, separate from a web page, opening the door to features which don't need a web page or user interaction.” - Matt Gaunt http://www.html5rocks.com/en/tutorials/service-worker/introduction/
  74. @onishiweb The web is going offline!

  75. @onishiweb Background sync

  76. @onishiweb How does it work?

  77. @onishiweb First visit Register service worker Cache content Connect to

    network Request Page load Usable website
  78. @onishiweb Go to network Subsequent visits Service worker intercepts Check

    cache Request Page load Usable website Get content
  79. @onishiweb Requires HTTPS

  80. @onishiweb When can we use it?

  81. @onishiweb

  82. @onishiweb https://jakearchibald.github.io/isserviceworkerready/index.html

  83. @onishiweb Is Offline-first a new form of progressive enhancement?

  84. @onishiweb It’s not progressive enhancement if it requires JavaScript!

  85. @onishiweb Browser wars take 2?

  86. @onishiweb Not really…

  87. @onishiweb Progressive enhancement in JavaScript?

  88. @onishiweb MVC Frameworks?

  89. @onishiweb Service worker

  90. @onishiweb “I'll be more interested in JS rendering once it

    can be streamed from a [Service Worker] …” - Jake Archibald
  91. @onishiweb Do we still need progressive enhancement?

  92. @onishiweb “Growing divide between what the web is capable of

    & its power (universal access) makes progressive enhancement more important than ever—not less” - Tim Kadlec
  93. @onishiweb Thanks Adam Onishi Talk Web Design 2015