Best viewed with...

@onishiweb Best viewed with… Adam Onishi Talk Web Design 2015

@onishiweb A long time ago…

@onishiweb

@onishiweb “Browser wars”!

@onishiweb @onishiweb

@onishiweb But, what about now?

@onishiweb “For best results view this page in a modern
browser.” - fancy website

@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

@onishiweb Chrome (v42) • Fetch API • Push API •
ES6 Classes IE (v11) • CSS Pointer events • WebGL • ES6 Classes Firefox (v38) • Web sockets/web workers • <picture> and srcset Safari (v8) • Navigation Timing API • SPDY Protocol • Animated PNG

@onishiweb

@onishiweb Developer-ﬁrst development?

@onishiweb Cake or Death?

@onishiweb Progressive enhancement

@onishiweb Why another P.E. talk?

@onishiweb “Vague but exciting…”

@onishiweb The web

@onishiweb The Web JS CSS HTML Internet

@onishiweb “JavaScript is part of the web platform; you don’t
get to take it away and expect the web to work.” - Tom Dale http://bit.ly/tom-dale-web-platform

@onishiweb Less of the vague, more of the exciting!

@onishiweb HTML & CSS

@onishiweb “Be conservative in what you do, be liberal in
what you accept from others” - Robustness principle http://en.wikipedia.org/wiki/Robustness_principle

@onishiweb <canvas>  </canvas> <audio>  </audio>

@onishiweb <input type="email"> <input type="number"> <input type="date">

@onishiweb <input type="text"> <input type="text"> <input type="text">

@onishiweb

@onishiweb .element { font-size:16px; font-size:1rem; }

@onishiweb CSS itself, is still an enhancement…

@onishiweb HTML & CSS are easy…

@onishiweb JavaScript

@onishiweb JS CSS HTML Internet The Web

@onishiweb JavaScript has problems…

@onishiweb “Cutting the mustard”

@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

@onishiweb if('querySelector' in document && 'localStorage' in window && 'addEventListener'
in window) { // bootstrap the javascript application }

@onishiweb http://modernizr.com/

@onishiweb function supports_placeholder() { var i = document.createElement('input'); return 'placeholder'
in i; }

@onishiweb if( supports_placeholder() ) { $('html').addClass('placeholder'); }

@onishiweb Polyﬁlls…

@onishiweb “Think of it like a pair of glasses for
your aging browser.” - FT Labs Polyﬁll service

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

@onishiweb ECMAScript 6?

@onishiweb That “other” problem

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

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

@onishiweb

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

@onishiweb MVC Frameworks

@onishiweb “The more you take over from the browser, the
more complex yet expected browser behaviour you have to reimplement in JavaScript” - Jake Archibald http://jakearchibald.com/2013/progressive-enhancement-still-important/

@onishiweb Performance

@onishiweb Twitter & Airbnb

@onishiweb “The bottom line is that a client-side architecture leads
to slower performance because most of the code is being executed on our users’ machines rather than our own” - Twitter https://blog.twitter.com/2012/improving-performance-on-twittercom

@onishiweb Isomorphic JS

@onishiweb Server side rendering with Node.js

@onishiweb Best of both worlds?

@onishiweb GoCardless

@onishiweb “Put the new gocardless.com live today. It's the same
site but run from static files generated from a server running React.” - Jack Franklin, Go Cardless

@onishiweb “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.” - Jack Franklin, Go Cardless

@onishiweb Progressive enhancement in JavaScript?

@onishiweb The network

@onishiweb JS CSS HTML Internet The Web

@onishiweb Do we always have network access?

@onishiweb Train and hotel wiﬁ…

@onishiweb Mobile connections

@onishiweb Cake or Death?

@onishiweb Service worker

@onishiweb “A service worker is a script that is run
by your browser in the background, separate from a web page, opening the door to features which don't need a web page or user interaction.” - Matt Gaunt http://www.html5rocks.com/en/tutorials/service-worker/introduction/

@onishiweb The web is going oﬄine!

@onishiweb Background sync

@onishiweb How does it work?

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

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

@onishiweb Requires HTTPS

@onishiweb When can we use it?

@onishiweb

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

@onishiweb Is Oﬄine-ﬁrst a new form of progressive enhancement?

@onishiweb It’s not progressive enhancement if it requires JavaScript!

@onishiweb Browser wars take 2?

@onishiweb Not really…

@onishiweb Progressive enhancement in JavaScript?

@onishiweb MVC Frameworks?

@onishiweb Service worker

@onishiweb “I'll be more interested in JS rendering once it
can be streamed from a [Service Worker] …” - Jake Archibald

@onishiweb Do we still need progressive enhancement?

@onishiweb “Growing divide between what the web is capable of
& its power (universal access) makes progressive enhancement more important than ever—not less” - Tim Kadlec

@onishiweb Thanks Adam Onishi Talk Web Design 2015

Best viewed with...

Best viewed with...

More Decks by Adam Onishi

Other Decks in Technology

Featured

Transcript