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

Best viewed with... Theme Conf 2015

Fc7368fd45560e1e7401bc80684f5867?s=47 Adam Onishi
September 03, 2015

Best viewed with... Theme Conf 2015

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars”. Will more websites only work in a select number of browsers with the capabilities to run their code?

Are we breaking the inherent robustness of the web? The main facets that effect everything on the web: performance, accessibility, interaction. What are these new tools serving most?

My aim is to take a look at the current state of the web and whether progressive enhancement is still plausible. Instead looking at what new tools can offer. Do some of these new frameworks start to redress the balance and serve all facets of the web.


Adam Onishi

September 03, 2015


  1. @onishiweb Best viewed with… Adam Onishi ThemeConf - September 2015

  2. @onishiweb Good Morning!

  3. @onishiweb adamonishi.com twitter.com/onishiweb github.com/onishiweb speakerdeck.com/onishiweb

  4. @onishiweb @onishiweb

  5. @onishiweb A long time ago…

  6. @onishiweb

  7. @onishiweb “Browser wars!”

  8. @onishiweb @onishiweb

  9. @onishiweb Fast-forward to today…

  10. @onishiweb – a “modern” website “For best results view this

    page in Chrome.”
  11. @onishiweb

  12. @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 Edge
  13. @onishiweb Chrome (v44) • Cache.add() • Request.context() • Notification.data Edge

    • img srcset • CSS Regions • Arrow functions Firefox (v40) • Improved Dev tools • IndexedDB transactions • Fetch API (v39) Safari (v9) • Backdrop filters • CSS scroll snapping • Content blocking
  14. @onishiweb

  15. @onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html

  16. @onishiweb Developer-first development

  17. @onishiweb Cake or Death?

  18. @onishiweb Progressive Enhancement

  19. @onishiweb “Vague, but exciting”

  20. @onishiweb @onishiweb Photo by Simon Collison - https://flic.kr/p/pbRdFm

  21. @onishiweb @onishiweb Photo by Pedro Ribeiro Simões - https://flic.kr/p/bvCA8

  22. @onishiweb The Web JS CSS HTML Internet

  23. @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 Edge
  24. @onishiweb – Paul Robert Lloyd “By making fewer assumptions about

    context and interface, focusing more on users’ tasks and goals, we can create more adaptable products.” http://alistapart.com/article/thinking-responsively-a-framework-for-future-learning
  25. @onishiweb @onishiweb Photo from EdgeConf 2015

  26. @onishiweb – Jake Archibald “Every phase of the enhancement absolutely

    must have a real user” http://www.fivesimplesteps.com/products/modern-progressive-enhancement
  27. @onishiweb Performance

  28. @onishiweb Average web page >2Mb http://httparchive.org/interesting.php?a=All&l=May%2015%202015

  29. @onishiweb Progressive performance

  30. @onishiweb @onishiweb

  31. @onishiweb Polyfills

  32. @onishiweb – Christian Heilmann “The love we give [old browsers]

    is really bordering on necrophilia at times.”
  33. @onishiweb Progressive Performance

  34. @onishiweb CSS

  35. @onishiweb CSS is still an enhancement

  36. @onishiweb CSS blocks rendering

  37. @onishiweb

  38. @onishiweb Critical Path CSS

  39. @onishiweb Photo of Patrick at FEL (if possible) @onishiweb Photo

    from FEL One Day - https://flic.kr/p/gRzhY2
  40. @onishiweb How?

  41. @onishiweb @onishiweb https://github.com/addyosmani/critical

  42. @onishiweb @onishiweb https://github.com/pocketjoso/penthouse

  43. @onishiweb gulp.task('critical', function () { penthouse({ url : 'http://localhost:8000/index.html', css

    : 'public/styles.css', width : 720, // viewport width height : 500 // viewport height }, function(err, criticalCss) { if (err) { // handle error console.log('error', err); } fs.writeFileSync('public/critical.css', criticalCss); }); });
  44. @onishiweb loadCSS https://github.com/filamentgroup/loadCSS/

  45. @onishiweb Progressively enhancing CSS delivery

  46. @onishiweb Images

  47. @onishiweb http://httparchive.org/interesting.php?a=All&l=May%2015%202015

  48. @onishiweb @onishiweb

  49. @onishiweb

  50. @onishiweb <picture>, srcset & size

  51. @onishiweb https://www.youtube.com/watch?v=WwgQ0LGRnR8

  52. @onishiweb

  53. @onishiweb Progressively enhancing image delivery

  54. @onishiweb Picture http://caniuse.com/#feat=picture

  55. @onishiweb srcset & sizes http://caniuse.com/#feat=srcset

  56. @onishiweb Fonts

  57. @onishiweb We ❤ web fonts

  58. @onishiweb

  59. @onishiweb

  60. @onishiweb Typekit asynchronous font loading

  61. @onishiweb What about FOUT & FOIT?

  62. @onishiweb 3s 3s 3s ∞ -

  63. @onishiweb Developers need control

  64. @onishiweb Font loading API

  65. @onishiweb var f = new FontFace("open_sansbold", "url(/fonts/opensans-bold- webfont.woff)", {}); f.load().then(function

    (loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "open_sansbold, serif"; });
  66. @onishiweb var f = new FontFace("open_sansbold", "url(/fonts/opensans-bold- webfont.woff)", {}); f.load().then(function

    (loadedFace) { document.body.className += ' fonts—loaded'; }); /* CSS */ p { visibility: hidden; } .fonts-loaded p { visibility: visible; }
  67. @onishiweb Progressively enhancing font loading

  68. @onishiweb Font loading API http://caniuse.com/#feat=font-loading

  69. @onishiweb CSS Font Rendering http://tabatkins.github.io/specs/css-font-rendering/

  70. @onishiweb CSS Font Rendering

  71. @onishiweb JavaScript

  72. @onishiweb The Web JS CSS HTML Internet

  73. @onishiweb Cutting the mustard http://responsivenews.co.uk/post/18948466399/cutting-the-mustard

  74. @onishiweb ES2015

  75. @onishiweb The “other” problem

  76. @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t

    getting JavaScript enhancements (1 in 93).”
  77. @onishiweb @onishiweb http://kryogenix.org/code/browser/everyonehasjs.html

  78. @onishiweb @onishiweb

  79. @onishiweb – Jeremy Keith “Brilliant easter egg in the newly-

    redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
  80. @onishiweb @onishiweb

  81. @onishiweb The rise of the frameworks

  82. @onishiweb

  83. @onishiweb Is there a better way?

  84. @onishiweb Universal JavaScript

  85. @onishiweb Server Side rendering with Node.js

  86. @onishiweb How?

  87. @onishiweb ReactJS

  88. @onishiweb React.renderToString();

  89. @onishiweb app.get('/', function(req, res){ // React.renderToString takes your component //

    and generates the markup ReactApp = React.createFactory( require(‘../components/index.js') ); reactHtml = React.renderToString( ReactApp({}) ); // Output html rendered by react res.render('index.ejs', { reactOutput: reactHtml }); });
  90. @onishiweb GoCardless

  91. @onishiweb – Jack Franklin, GoCardless “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.”
  92. @onishiweb Progressively enhancing JavaScript frameworks

  93. @onishiweb Control

  94. @onishiweb @onishiweb

  95. @onishiweb The Network

  96. @onishiweb The Web JS CSS HTML Internet

  97. @onishiweb Do we always have access to the network?

  98. @onishiweb Mobile connections

  99. @onishiweb Cake or Death?

  100. @onishiweb Enter Service Worker

  101. @onishiweb The web is going offline!

  102. @onishiweb How?

  103. @onishiweb Register service worker Cache content Connect to network Request

    Page load Usable website
  104. @onishiweb Go to network Service worker intercepts Check cache Request

    Page load Usable website Get content
  105. @onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //

    Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
  106. @onishiweb self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(‘content-cache-v1').then(function(cache)

    { return cache.addAll([ '/index.html', '/css/main.min.css', '/main.js' ]); }) ) });
  107. @onishiweb Register service worker Cache content Connect to network Request

    Page load Usable website
  108. @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache

    hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  109. @onishiweb

  110. @onishiweb @onishiweb https://jakearchibald.com/2014/offline-cookbook/

  111. @onishiweb Caveats (a few things to be aware of)

  112. @onishiweb Development flow https://www.chromium.org/blink/serviceworker/getting-started#TOC-Development-flow

  113. @onishiweb @onishiweb chrome://inspect/#service-workers

  114. @onishiweb @onishiweb chrome://serviceworker-internals/

  115. @onishiweb HTTPS only

  116. @onishiweb – MDN “Having modified network requests wide open to

    man in the middle attacks would be really bad.”
  117. @onishiweb How much can I cache?

  118. @onishiweb Progressively enhancing the network

  119. @onishiweb Browser support…

  120. @onishiweb Service Worker http://caniuse.com/#feat=serviceworkers

  121. @onishiweb Fetch API http://caniuse.com/#feat=fetch

  122. @onishiweb Caches https://jakearchibald.github.io/isserviceworkerready/#caches

  123. @onishiweb @onishiweb https://jakearchibald.github.io/isserviceworkerready/

  124. @onishiweb Progressive Performance

  125. @onishiweb Critical Path CSS Responsive Images Font Loading API Universal

    JavaScript Service Workers
  126. @onishiweb @onishiweb https://github.com/onishiweb/progressive-performance

  127. @onishiweb Return of the browser wars

  128. @onishiweb No…

  129. @onishiweb – William Gibson “The future is already here -

    it’s just not very evenly distributed.”
  130. @onishiweb Thanks Adam Onishi ThemeConf - September 2015