@onishiweb
Best viewed with…
Adam Onishi
Talk Web Design 2015
Slide 2
Slide 2 text
@onishiweb
A long time ago…
Slide 3
Slide 3 text
@onishiweb
Slide 4
Slide 4 text
@onishiweb
“Browser wars”!
Slide 5
Slide 5 text
@onishiweb
@onishiweb
Slide 6
Slide 6 text
@onishiweb
But, what about now?
Slide 7
Slide 7 text
@onishiweb
“For best results view this page
in a modern browser.”
- fancy website
Slide 8
Slide 8 text
@onishiweb
@onishiweb
Slide 9
Slide 9 text
@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
Slide 10
Slide 10 text
@onishiweb
Chrome (v42)
• Fetch API
• Push API
• ES6 Classes
IE (v11)
• CSS Pointer events
• WebGL
• ES6 Classes
Firefox (v38)
• Web sockets/web
workers
• and srcset
Safari (v8)
• Navigation Timing API
• SPDY Protocol
• Animated PNG
Slide 11
Slide 11 text
@onishiweb
Slide 12
Slide 12 text
@onishiweb
Developer-first
development?
Slide 13
Slide 13 text
@onishiweb
Cake or Death?
Slide 14
Slide 14 text
@onishiweb
Progressive
enhancement
Slide 15
Slide 15 text
@onishiweb
Why another P.E. talk?
Slide 16
Slide 16 text
@onishiweb
“Vague but exciting…”
Slide 17
Slide 17 text
@onishiweb
The web
Slide 18
Slide 18 text
@onishiweb
The
Web
JS
CSS
HTML
Internet
Slide 19
Slide 19 text
@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
Slide 20
Slide 20 text
@onishiweb
The
Web
JS
CSS
HTML
Internet
Slide 21
Slide 21 text
@onishiweb
Less of the vague,
more of the exciting!
Slide 22
Slide 22 text
@onishiweb
HTML & CSS
Slide 23
Slide 23 text
@onishiweb
The
Web
JS
CSS
HTML
Internet
Slide 24
Slide 24 text
@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
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
Slide 38
Slide 38 text
@onishiweb
if('querySelector' in document
&& 'localStorage' in window
&& 'addEventListener' in window) {
// bootstrap the javascript application
}
Slide 39
Slide 39 text
@onishiweb
http://modernizr.com/
Slide 40
Slide 40 text
@onishiweb
function supports_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
@onishiweb
“Brilliant easter egg in the newly-
redesigned nasa.gov — if JavaScript fails,
you are immersed in the experience of
deep space”
- Jeremy Keith
Slide 52
Slide 52 text
@onishiweb
MVC Frameworks
Slide 53
Slide 53 text
@onishiweb
@onishiweb
Slide 54
Slide 54 text
@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/
Slide 55
Slide 55 text
@onishiweb
Performance
Slide 56
Slide 56 text
@onishiweb
Twitter & Airbnb
Slide 57
Slide 57 text
@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
Slide 58
Slide 58 text
@onishiweb
Isomorphic JS
Slide 59
Slide 59 text
@onishiweb
Server side rendering
with Node.js
Slide 60
Slide 60 text
@onishiweb
Best of both worlds?
Slide 61
Slide 61 text
@onishiweb
GoCardless
Slide 62
Slide 62 text
@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
Slide 63
Slide 63 text
@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
Slide 64
Slide 64 text
@onishiweb
Progressive
enhancement in
JavaScript?
Slide 65
Slide 65 text
@onishiweb
@onishiweb
Slide 66
Slide 66 text
@onishiweb
The network
Slide 67
Slide 67 text
@onishiweb
JS
CSS
HTML
Internet
The
Web
Slide 68
Slide 68 text
@onishiweb
Do we always have
network access?
Slide 69
Slide 69 text
@onishiweb
Train and hotel wifi…
Slide 70
Slide 70 text
@onishiweb
Mobile connections
Slide 71
Slide 71 text
@onishiweb
Cake or Death?
Slide 72
Slide 72 text
@onishiweb
Service worker
Slide 73
Slide 73 text
@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/
Slide 74
Slide 74 text
@onishiweb
The web is going
offline!
Slide 75
Slide 75 text
@onishiweb
Background sync
Slide 76
Slide 76 text
@onishiweb
How does it work?
Slide 77
Slide 77 text
@onishiweb
First visit
Register
service worker
Cache
content
Connect
to network
Request
Page load
Usable
website
Slide 78
Slide 78 text
@onishiweb
Go to network
Subsequent visits
Service worker
intercepts
Check cache
Request
Page load
Usable
website
Get content
@onishiweb
Is Offline-first a new
form of progressive
enhancement?
Slide 84
Slide 84 text
@onishiweb
It’s not progressive
enhancement if it
requires JavaScript!
Slide 85
Slide 85 text
@onishiweb
Browser wars take 2?
Slide 86
Slide 86 text
@onishiweb
Not really…
Slide 87
Slide 87 text
@onishiweb
Progressive
enhancement in
JavaScript?
Slide 88
Slide 88 text
@onishiweb
MVC Frameworks?
Slide 89
Slide 89 text
@onishiweb
Service worker
Slide 90
Slide 90 text
@onishiweb
“I'll be more interested in JS rendering once
it can be streamed from a [Service Worker]
…”
- Jake Archibald
Slide 91
Slide 91 text
@onishiweb
Do we still need
progressive
enhancement?
Slide 92
Slide 92 text
@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
Slide 93
Slide 93 text
@onishiweb
Thanks
Adam Onishi
Talk Web Design 2015