Slide 1

Slide 1 text

@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

Slide 25

Slide 25 text

@onishiweb

Slide 26

Slide 26 text

@onishiweb

Slide 27

Slide 27 text

@onishiweb

Slide 28

Slide 28 text

@onishiweb

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@onishiweb CSS itself, is still an enhancement…

Slide 31

Slide 31 text

@onishiweb HTML & CSS are easy…

Slide 32

Slide 32 text

@onishiweb @onishiweb

Slide 33

Slide 33 text

@onishiweb JavaScript

Slide 34

Slide 34 text

@onishiweb JS CSS HTML Internet The Web

Slide 35

Slide 35 text

@onishiweb JavaScript has problems…

Slide 36

Slide 36 text

@onishiweb “Cutting the mustard”

Slide 37

Slide 37 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 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; }

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

@onishiweb Polyfills…

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

@onishiweb ECMAScript 6?

Slide 46

Slide 46 text

@onishiweb That “other” problem

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

@onishiweb

Slide 50

Slide 50 text

@onishiweb

Slide 51

Slide 51 text

@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

Slide 79

Slide 79 text

@onishiweb Requires HTTPS

Slide 80

Slide 80 text

@onishiweb When can we use it?

Slide 81

Slide 81 text

@onishiweb

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

@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