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

Best viewed with - Velocity Amsterdam 2015

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

Adam Onishi

October 30, 2015
Tweet

More Decks by Adam Onishi

Other Decks in Technology

Transcript

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

    View full-size slide

  2. @onishiweb
    A long time ago…

    View full-size slide

  3. @onishiweb
    @onishiweb

    View full-size slide

  4. @onishiweb
    “Browser wars!”

    View full-size slide

  5. @onishiweb
    @onishiweb

    View full-size slide

  6. @onishiweb
    – a website in 2015
    “Oops. Your browser is no
    longer supported”

    View full-size slide

  7. @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

    View full-size slide

  8. @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

    View full-size slide

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

    View full-size slide

  10. @onishiweb
    Developer-first
    development

    View full-size slide

  11. @onishiweb
    Cake or Death?

    View full-size slide

  12. @onishiweb
    Progressive
    enhancement

    View full-size slide

  13. @onishiweb
    “Vague, but exciting”

    View full-size slide

  14. @onishiweb
    The
    Web
    JS
    CSS
    HTML
    Internet

    View full-size slide

  15. @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

    View full-size slide

  16. @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

    View full-size slide

  17. @onishiweb
    Photo from EdgeConf 2015 @onishiweb

    View full-size slide

  18. @onishiweb
    Control

    View full-size slide

  19. @onishiweb
    Defensive design

    View full-size slide

  20. @onishiweb
    What we do know

    View full-size slide

  21. @onishiweb
    Baseline

    View full-size slide

  22. @onishiweb
    Performance

    View full-size slide

  23. @onishiweb
    Performance
    Perceived

    View full-size slide

  24. @onishiweb
    Progressively enhanced
    performance

    View full-size slide

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

    View full-size slide

  26. @onishiweb
    Render blocking assets

    View full-size slide

  27. @onishiweb
    CSS, Fonts, and JavaScript

    View full-size slide

  28. @onishiweb
    Browser rendering

    View full-size slide

  29. @onishiweb
    Stuff
    Request Render
    DNS Lookup
    Initial connection
    SSL Negotiation
    Time to first byte (TTFB)
    Content download

    View full-size slide

  30. @onishiweb
    Stuff
    Request Render
    Stuff
    Stuff
    Stuff
    Stuff
    Stuff
    Stuff

    View full-size slide

  31. @onishiweb
    CSS

    View full-size slide

  32. @onishiweb
    CSS is still an enhancement

    View full-size slide

  33. @onishiweb
    CSS as an enhancement

    View full-size slide

  34. @onishiweb
    Critical Path CSS

    View full-size slide

  35. @onishiweb
    Tooling

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. @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);
    });
    });

    View full-size slide

  40. @onishiweb
    loadCSS
    https://github.com/filamentgroup/loadCSS/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. @onishiweb
    onload="this.rel='stylesheet'">
    <br/>function loadCSS(e,t,n) { ... }<br/>function preloadSupported() { ... }<br/>if( ! preloadSupported() ){<br/>loadCSS( asyncCSS.href );<br/>}<br/>

    View full-size slide

  44. @onishiweb
    Cache locally

    View full-size slide

  45. @onishiweb
    Progressively enhancing
    CSS delivery

    View full-size slide

  46. @onishiweb
    Fonts

    View full-size slide

  47. @onishiweb
    We ❤ web fonts

    View full-size slide

  48. @onishiweb
    3s 3s
    3s ∞
    -

    View full-size slide

  49. @onishiweb
    Asynchronous font loading

    View full-size slide

  50. @onishiweb
    Font loading API

    View full-size slide

  51. @onishiweb
    FOUT
    FOIT

    View full-size slide

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

    View full-size slide

  53. @onishiweb
    FOUT vs FOIT

    View full-size slide

  54. @onishiweb
    Control over fonts

    View full-size slide

  55. @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";
    });

    View full-size slide

  56. @onishiweb
    document.fonts.ready.then(function() {
    var content = document.getElementById("content");
    content.style.visibility = "visible";
    });

    View full-size slide

  57. @onishiweb
    CSS Font Rendering
    https://tabatkins.github.io/specs/css-font-display/

    View full-size slide

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

    View full-size slide

  59. @onishiweb
    font-display: auto | block | swap | fallback | optional;

    View full-size slide

  60. @onishiweb
    Font loading API
    http://caniuse.com/#feat=font-loading
    41
    43 31

    View full-size slide

  61. @onishiweb
    Font display
    ❌ ❌
    ❌ ❌

    View full-size slide

  62. @onishiweb
    Progressively enhancing
    font loading

    View full-size slide

  63. @onishiweb
    JavaScript

    View full-size slide

  64. @onishiweb
    @onishiweb

    View full-size slide

  65. @onishiweb
    @onishiweb

    View full-size slide

  66. @onishiweb
    – Peter Herlihy, GDS Team
    “1.1% of people aren’t getting
    JavaScript enhancements
    (1 in 93).”

    View full-size slide

  67. @onishiweb
    http://kryogenix.org/code/browser/everyonehasjs.html

    View full-size slide

  68. @onishiweb
    – Jeremy Keith
    “Brilliant easter egg in the newly-
    redesigned nasa.gov — if
    JavaScript fails, you are immersed
    in the experience of deep space”

    View full-size slide

  69. @onishiweb
    Frameworks

    View full-size slide

  70. @onishiweb
    – Jake Archibald
    “Nothing should have a JavaScript
    dependant first render, it only
    punishes the user.”

    View full-size slide

  71. @onishiweb
    Is there a better way?

    View full-size slide

  72. @onishiweb
    Universal JavaScript

    View full-size slide

  73. @onishiweb
    Server Side rendering with
    Node.js

    View full-size slide

  74. @onishiweb
    React

    View full-size slide

  75. @onishiweb
    React.renderToString();

    View full-size slide

  76. @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 });
    });

    View full-size slide

  77. @onishiweb
    Client side too

    View full-size slide

  78. @onishiweb
    GoCardless

    View full-size slide

  79. @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.”

    View full-size slide

  80. @onishiweb
    Progressively enhancing
    JavaScript frameworks

    View full-size slide

  81. @onishiweb
    Control

    View full-size slide

  82. @onishiweb
    @onishiweb

    View full-size slide

  83. @onishiweb
    Render blocking assets

    View full-size slide

  84. @onishiweb
    Stuff
    Request Render
    Stuff
    Stuff
    Stuff
    Stuff
    Stuff
    Stuff

    View full-size slide

  85. @onishiweb
    Stuff
    Request Render

    View full-size slide

  86. @onishiweb
    The Network

    View full-size slide

  87. @onishiweb
    The
    Web
    JS
    CSS
    HTML
    Internet

    View full-size slide

  88. @onishiweb
    Stuff
    Request Render
    Network

    View full-size slide

  89. @onishiweb
    Assumption

    View full-size slide

  90. @onishiweb
    @onishiweb

    View full-size slide

  91. @onishiweb
    Mobile connectivity

    View full-size slide

  92. @onishiweb
    Cake or Death?

    View full-size slide

  93. @onishiweb
    Enter ServiceWorker

    View full-size slide

  94. @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

    View full-size slide

  95. @onishiweb
    Web vs Native!

    View full-size slide

  96. @onishiweb
    The web is going offline!

    View full-size slide

  97. @onishiweb
    Browser cache

    View full-size slide

  98. @onishiweb
    @onishiweb

    View full-size slide

  99. @onishiweb
    Cache
    content
    Register
    SW
    Stuff
    Request Render

    View full-size slide

  100. @onishiweb
    Cache
    Stuff
    Request Render
    SW

    View full-size slide

  101. @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);
    });
    }

    View full-size slide

  102. @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'
    ]);
    })
    )
    });

    View full-size slide

  103. @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);
    }
    )
    );
    });

    View full-size slide

  104. @onishiweb
    Cache, falling
    back to network

    View full-size slide

  105. @onishiweb
    Stale content

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  108. @onishiweb
    Twitter screenshot

    View full-size slide

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

    View full-size slide

  110. @onishiweb
    Diving in head first…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  115. @onishiweb
    HTTPS only

    View full-size slide

  116. @onishiweb
    – MDN
    “Having modified network requests
    wide open to man in the middle
    attacks would be really bad.”

    View full-size slide

  117. @onishiweb
    How much can I cache?

    View full-size slide

  118. @onishiweb
    Browser support…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  123. @onishiweb
    Progressively enhancing the
    network

    View full-size slide

  124. @onishiweb
    Return of the
    “browser wars”

    View full-size slide

  125. @onishiweb
    Not really

    View full-size slide

  126. @onishiweb
    Stop assuming

    View full-size slide

  127. @onishiweb
    – Bruce Lawson
    “It never pays to make too many
    assumptions about your users.”

    View full-size slide

  128. @onishiweb
    Be defensive

    View full-size slide

  129. @onishiweb
    Improve performance

    View full-size slide

  130. @onishiweb
    Critical Path CSS

    View full-size slide

  131. @onishiweb
    Critical Path CSS
    Font Loading API

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  134. @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”

    View full-size slide

  135. @onishiweb
    Thanks
    Adam Onishi
    Velocity Conf Amsterdam - October 2015

    View full-size slide

  136. @onishiweb
    Questions?

    View full-size slide