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

Best viewed with - Velocity Amsterdam 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

Adam Onishi

October 30, 2015
Tweet

More Decks by Adam Onishi

Other Decks in Technology

Transcript

  1. @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
  2. @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
  3. @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
  4. @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
  5. @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); }); });
  6. @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>
  7. @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"; });
  8. @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t

    getting JavaScript enhancements (1 in 93).”
  9. @onishiweb – Jeremy Keith “Brilliant easter egg in the newly-

    redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
  10. @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 }); });
  11. @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.”
  12. @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
  13. @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); }); }
  14. @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' ]); }) ) });
  15. @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); } ) ); });
  16. @onishiweb – MDN “Having modified network requests wide open to

    man in the middle attacks would be really bad.”
  17. @onishiweb – Bruce Lawson “It never pays to make too

    many assumptions about your users.”
  18. @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”