Best viewed with - Velocity Amsterdam 2015

Fc7368fd45560e1e7401bc80684f5867?s=47 Adam Onishi
October 30, 2015

Best viewed with - Velocity Amsterdam 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 affect everything on the web are 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 of 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?

I’ll be covering:

- What progressive enhancement is and whether it is still important
- What new JavaScript frameworks are offering
- The broader picture of progressive enhancement and what that means for performance and accessibility
- An introduction to service worker and what that means to progressive enhancement and performance

Fc7368fd45560e1e7401bc80684f5867?s=128

Adam Onishi

October 30, 2015
Tweet

Transcript

  1. @onishiweb Best viewed with… Adam Onishi Velocity Conf Amsterdam -

    October 2015
  2. @onishiweb A long time ago…

  3. @onishiweb @onishiweb

  4. @onishiweb

  5. @onishiweb “Browser wars!”

  6. @onishiweb @onishiweb

  7. @onishiweb – a website in 2015 “Oops. Your browser is

    no longer supported”
  8. @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
  9. @onishiweb Chrome (v46) • Cache.addAll() • HTTP Client hints •

    CSS.escape() Edge • img srcset • CSS Regions • Arrow functions Firefox (v41) • Font Loading API • Cache API • Cut/Copy web API Safari (v9) • Backdrop filters • CSS scroll snapping • Content blocking
  10. @onishiweb

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

  12. @onishiweb Developer-first development

  13. @onishiweb Cake or Death?

  14. @onishiweb Progressive enhancement

  15. @onishiweb “Vague, but exciting”

  16. @onishiweb The Web JS CSS HTML Internet

  17. @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
  18. @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
  19. @onishiweb Photo from EdgeConf 2015 @onishiweb

  20. @onishiweb

  21. @onishiweb Control

  22. @onishiweb Defensive design

  23. @onishiweb What we do know

  24. @onishiweb Baseline

  25. @onishiweb Performance

  26. @onishiweb Performance Perceived

  27. @onishiweb

  28. @onishiweb

  29. @onishiweb Progressively enhanced performance

  30. @onishiweb https://github.com/onishiweb/progressive-performance

  31. @onishiweb Render blocking assets

  32. @onishiweb CSS, Fonts, and JavaScript

  33. @onishiweb Browser rendering

  34. @onishiweb Stuff Request Render DNS Lookup Initial connection SSL Negotiation

    Time to first byte (TTFB) Content download
  35. @onishiweb Stuff Request Render Stuff Stuff Stuff Stuff Stuff Stuff

  36. @onishiweb CSS

  37. @onishiweb CSS is still an enhancement

  38. @onishiweb CSS as an enhancement

  39. @onishiweb Critical Path CSS

  40. @onishiweb Tooling

  41. @onishiweb “Set it. Forget it.” – Tim Kadlec https://speakerdeck.com/tkadlec/reaching-everyone-fast-at-from-the-front-2015?slide=75

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

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

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

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

  46. @onishiweb <script> function loadCSS(e,t,n) { ... } loadCSS('/css/main.min.css'); </script>

  47. @onishiweb rel="preload" https://github.com/filamentgroup/loadCSS/issues/59

  48. @onishiweb <link rel="preload" href="/css/main.min.css" id="asyncCSS" onload="this.rel='stylesheet'"> <script> function loadCSS(e,t,n) {

    ... } function preloadSupported() { ... } if( ! preloadSupported() ){ loadCSS( asyncCSS.href ); } </script>
  49. @onishiweb Cache locally

  50. @onishiweb Progressively enhancing CSS delivery

  51. @onishiweb Fonts

  52. @onishiweb We ❤ web fonts

  53. @onishiweb

  54. @onishiweb

  55. @onishiweb 3s 3s 3s ∞ -

  56. @onishiweb Asynchronous font loading

  57. @onishiweb Font loading API

  58. @onishiweb FOUT FOIT

  59. @onishiweb Flash Of Unstyled Text Flash Of Invisible Text

  60. @onishiweb FOUT vs FOIT

  61. @onishiweb Control over fonts

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

    (loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "open_sansbold, serif"; });
  63. @onishiweb document.fonts.ready.then(function() { var content = document.getElementById("content"); content.style.visibility = "visible";

    });
  64. @onishiweb CSS Font Rendering https://tabatkins.github.io/specs/css-font-display/

  65. @onishiweb @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.woff'); font-display: swap;

    }
  66. @onishiweb font-display: auto | block | swap | fallback |

    optional;
  67. @onishiweb Font loading API http://caniuse.com/#feat=font-loading 41 43 31 ❌

  68. @onishiweb Font display ❌ ❌ ❌ ❌

  69. @onishiweb Progressively enhancing font loading

  70. @onishiweb JavaScript

  71. @onishiweb @onishiweb

  72. @onishiweb @onishiweb

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

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

  75. @onishiweb

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

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

  78. @onishiweb – Jake Archibald “Nothing should have a JavaScript dependant

    first render, it only punishes the user.”
  79. @onishiweb Is there a better way?

  80. @onishiweb Universal JavaScript

  81. @onishiweb Server Side rendering with Node.js

  82. @onishiweb React

  83. @onishiweb React.renderToString();

  84. @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 }); });
  85. @onishiweb Client side too

  86. @onishiweb GoCardless

  87. @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.”
  88. @onishiweb Progressively enhancing JavaScript frameworks

  89. @onishiweb Control

  90. @onishiweb @onishiweb

  91. @onishiweb Render blocking assets

  92. @onishiweb Stuff Request Render Stuff Stuff Stuff Stuff Stuff Stuff

  93. @onishiweb Stuff Request Render

  94. @onishiweb The Network

  95. @onishiweb The Web JS CSS HTML Internet

  96. @onishiweb Stuff Request Render Network

  97. @onishiweb Assumption

  98. @onishiweb @onishiweb

  99. @onishiweb Mobile connectivity

  100. @onishiweb Cake or Death?

  101. @onishiweb Enter ServiceWorker

  102. @onishiweb – Nicolas Bevacqua “…everything seems to point at ServiceWorker

    being the most significant addition to the web platform since the introduction of AJAX – over 10 years ago” https://ponyfoo.com/articles/serviceworker-revolution
  103. @onishiweb Web vs Native!

  104. @onishiweb The web is going offline!

  105. @onishiweb Browser cache

  106. @onishiweb @onishiweb

  107. @onishiweb Cache content Register SW Stuff Request Render

  108. @onishiweb Cache Stuff Request Render SW

  109. @onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //

    Registration was successful console.log('SW registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('SW registration failed: ', err); }); }
  110. @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' ]); }) ) });
  111. @onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { console.log('Return from

    cache now', event.request); // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
  112. @onishiweb

  113. @onishiweb Cache, falling back to network

  114. @onishiweb Stale content

  115. @onishiweb Cache Network Stuff Request Render SW Send notification Webpage

    @onishiweb
  116. @onishiweb Cache then network https://ponyfoo.com/articles/progressive-networking-serviceworker

  117. @onishiweb Twitter screenshot

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

  119. @onishiweb Diving in head first…

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

  121. @onishiweb https://code.google.com/p/chromium/issues/detail?id=500428#c10

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

  123. @onishiweb New Service Worker inspector - Jake’s Tweet @onishiweb https://twitter.com/jaffathecake/status/656034298148048896

  124. @onishiweb HTTPS only

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

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

  127. @onishiweb Browser support…

  128. @onishiweb ServiceWorker https://jakearchibald.github.io/isserviceworkerready/ 44 40 24 ❌ ❌

  129. @onishiweb Fetch https://jakearchibald.github.io/isserviceworkerready/ 39 40 27 ❌ ❌

  130. @onishiweb Cache API https://jakearchibald.github.io/isserviceworkerready/ 41 46 33 ❌ ❌

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

  132. @onishiweb Progressively enhancing the network

  133. @onishiweb Return of the “browser wars”

  134. @onishiweb Not really

  135. @onishiweb Stop assuming

  136. @onishiweb – Bruce Lawson “It never pays to make too

    many assumptions about your users.”
  137. @onishiweb Be defensive

  138. @onishiweb Improve performance

  139. @onishiweb Critical Path CSS

  140. @onishiweb Critical Path CSS Font Loading API

  141. @onishiweb Critical Path CSS Font Loading API Universal JavaScript

  142. @onishiweb Critical Path CSS Font Loading API Universal JavaScript ServiceWorker

  143. @onishiweb – Tim Kadlec “Growing divide between what the web

    is capable of & its power (universal access) makes progressive enhancement more important than ever—not less”
  144. @onishiweb Thanks Adam Onishi Velocity Conf Amsterdam - October 2015

  145. @onishiweb Questions?