Best viewed with... Theme Conf 2015

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

@onishiweb Good Morning!

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

@onishiweb @onishiweb

@onishiweb A long time ago…

@onishiweb

@onishiweb “Browser wars!”

@onishiweb Fast-forward to today…

@onishiweb – a “modern” website “For best results view this
page in Chrome.”

@onishiweb

@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

@onishiweb Chrome (v44) • Cache.add() • Request.context() • Notiﬁcation.data Edge
• img srcset • CSS Regions • Arrow functions Firefox (v40) • Improved Dev tools • IndexedDB transactions • Fetch API (v39) Safari (v9) • Backdrop ﬁlters • CSS scroll snapping • Content blocking

@onishiweb

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

@onishiweb Developer-ﬁrst development

@onishiweb Cake or Death?

@onishiweb Progressive Enhancement

@onishiweb “Vague, but exciting”

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

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

@onishiweb The Web JS CSS HTML Internet

@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

@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

@onishiweb @onishiweb Photo from EdgeConf 2015

@onishiweb – Jake Archibald “Every phase of the enhancement absolutely
must have a real user” http://www.fivesimplesteps.com/products/modern-progressive-enhancement

@onishiweb Performance

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

@onishiweb Progressive performance

@onishiweb Polyﬁlls

@onishiweb – Christian Heilmann “The love we give [old browsers]
is really bordering on necrophilia at times.”

@onishiweb Progressive Performance

@onishiweb CSS

@onishiweb CSS is still an enhancement

@onishiweb CSS blocks rendering

@onishiweb

@onishiweb Critical Path CSS

@onishiweb Photo of Patrick at FEL (if possible) @onishiweb Photo
from FEL One Day - https://flic.kr/p/gRzhY2

@onishiweb How?

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

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

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

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

@onishiweb Progressively enhancing CSS delivery

@onishiweb Images

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

@onishiweb

@onishiweb <picture>, srcset & size

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

@onishiweb

@onishiweb Progressively enhancing image delivery

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

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

@onishiweb Fonts

@onishiweb We ❤ web fonts

@onishiweb

@onishiweb Typekit asynchronous font loading

@onishiweb What about FOUT & FOIT?

@onishiweb 3s 3s 3s ∞ -

@onishiweb Developers need control

@onishiweb Font loading API

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

@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; }

@onishiweb Progressively enhancing font loading

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

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

@onishiweb CSS Font Rendering

@onishiweb JavaScript

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

@onishiweb ES2015

@onishiweb The “other” problem

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

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

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

@onishiweb The rise of the frameworks

@onishiweb

@onishiweb Is there a better way?

@onishiweb Universal JavaScript

@onishiweb Server Side rendering with Node.js

@onishiweb How?

@onishiweb ReactJS

@onishiweb React.renderToString();

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

@onishiweb GoCardless

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

@onishiweb Progressively enhancing JavaScript frameworks

@onishiweb Control

@onishiweb The Network

@onishiweb Do we always have access to the network?

@onishiweb Mobile connections

@onishiweb Cake or Death?

@onishiweb Enter Service Worker

@onishiweb The web is going oﬄine!

@onishiweb How?

@onishiweb Register service worker Cache content Connect to network Request
Page load Usable website

@onishiweb Go to network Service worker intercepts Check cache Request
Page load Usable website Get content

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

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

@onishiweb Register service worker Cache content Connect to network Request
Page load Usable website

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

@onishiweb

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

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

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

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

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

@onishiweb HTTPS only

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

@onishiweb How much can I cache?

@onishiweb Progressively enhancing the network

@onishiweb Browser support…

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

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

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

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

@onishiweb Progressive Performance

@onishiweb Critical Path CSS Responsive Images Font Loading API Universal
JavaScript Service Workers

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

@onishiweb Return of the browser wars

@onishiweb No…

@onishiweb – William Gibson “The future is already here -
it’s just not very evenly distributed.”

@onishiweb Thanks Adam Onishi ThemeConf - September 2015

Best viewed with... Theme Conf 2015

Best viewed with... Theme Conf 2015

More Decks by Adam Onishi

Other Decks in Technology

Featured

Transcript