Best viewed with... Theme Conf 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 effect everything on the web: 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 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.

Transcript

1. @onishiweb Best viewed with… Adam Onishi ThemeConf - September 2015
2. @onishiweb Good Morning!
3. @onishiweb adamonishi.com twitter.com/onishiweb github.com/onishiweb speakerdeck.com/onishiweb
4. @onishiweb @onishiweb
5. @onishiweb A long time ago…
6. @onishiweb
7. @onishiweb “Browser wars!”
8. @onishiweb @onishiweb
9. @onishiweb Fast-forward to today…
10. @onishiweb – a “modern” website “For best results view this page in Chrome.”
11. @onishiweb
12. @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
13. @onishiweb Chrome (v44) • Cache.add() • Request.context() • Notification.data Edge • img srcset • CSS Regions • Arrow functions Firefox (v40) • Improved Dev tools • IndexedDB transactions • Fetch API (v39) Safari (v9) • Backdrop filters • CSS scroll snapping • Content blocking
14. @onishiweb
15. @onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html
16. @onishiweb Developer-first development
17. @onishiweb Cake or Death?
18. @onishiweb Progressive Enhancement
19. @onishiweb “Vague, but exciting”
20. @onishiweb @onishiweb Photo by Simon Collison - https://flic.kr/p/pbRdFm
21. @onishiweb @onishiweb Photo by Pedro Ribeiro Simões - https://flic.kr/p/bvCA8
22. @onishiweb The Web JS CSS HTML Internet
23. @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
24. @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
25. @onishiweb @onishiweb Photo from EdgeConf 2015
26. @onishiweb – Jake Archibald “Every phase of the enhancement absolutely must have a real user” http://www.fivesimplesteps.com/products/modern-progressive-enhancement
27. @onishiweb Performance
28. @onishiweb Average web page >2Mb http://httparchive.org/interesting.php?a=All&l=May%2015%202015
29. @onishiweb Progressive performance
30. @onishiweb @onishiweb
31. @onishiweb Polyfills
32. @onishiweb – Christian Heilmann “The love we give [old browsers] is really bordering on necrophilia at times.”
33. @onishiweb Progressive Performance
34. @onishiweb CSS
35. @onishiweb CSS is still an enhancement
36. @onishiweb CSS blocks rendering
37. @onishiweb
38. @onishiweb Critical Path CSS
39. @onishiweb Photo of Patrick at FEL (if possible) @onishiweb Photo from FEL One Day - https://flic.kr/p/gRzhY2
40. @onishiweb How?
41. @onishiweb @onishiweb https://github.com/addyosmani/critical
42. @onishiweb @onishiweb https://github.com/pocketjoso/penthouse
43. @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); }); });
44. @onishiweb loadCSS https://github.com/filamentgroup/loadCSS/
45. @onishiweb Progressively enhancing CSS delivery
46. @onishiweb Images
47. @onishiweb http://httparchive.org/interesting.php?a=All&l=May%2015%202015
48. @onishiweb @onishiweb
49. @onishiweb
50. @onishiweb <picture>, srcset & size
51. @onishiweb https://www.youtube.com/watch?v=WwgQ0LGRnR8
52. @onishiweb
53. @onishiweb Progressively enhancing image delivery
54. @onishiweb Picture http://caniuse.com/#feat=picture
55. @onishiweb srcset & sizes http://caniuse.com/#feat=srcset
56. @onishiweb Fonts
57. @onishiweb We ❤ web fonts
58. @onishiweb
59. @onishiweb
60. @onishiweb Typekit asynchronous font loading
61. @onishiweb What about FOUT & FOIT?
62. @onishiweb 3s 3s 3s ∞ -
63. @onishiweb Developers need control
64. @onishiweb Font loading API
65. @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"; });
66. @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; }
67. @onishiweb Progressively enhancing font loading
68. @onishiweb Font loading API http://caniuse.com/#feat=font-loading
69. @onishiweb CSS Font Rendering http://tabatkins.github.io/specs/css-font-rendering/
70. @onishiweb CSS Font Rendering
71. @onishiweb JavaScript
72. @onishiweb The Web JS CSS HTML Internet
73. @onishiweb Cutting the mustard http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
74. @onishiweb ES2015
75. @onishiweb The “other” problem
76. @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t getting JavaScript enhancements (1 in 93).”
77. @onishiweb @onishiweb http://kryogenix.org/code/browser/everyonehasjs.html
78. @onishiweb @onishiweb
79. @onishiweb – Jeremy Keith “Brilliant easter egg in the newly- redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
80. @onishiweb @onishiweb
81. @onishiweb The rise of the frameworks
82. @onishiweb
83. @onishiweb Is there a better way?
84. @onishiweb Universal JavaScript
85. @onishiweb Server Side rendering with Node.js
86. @onishiweb How?
87. @onishiweb ReactJS
88. @onishiweb React.renderToString();
89. @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 }); });
90. @onishiweb GoCardless
91. @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.”
92. @onishiweb Progressively enhancing JavaScript frameworks
93. @onishiweb Control
94. @onishiweb @onishiweb
95. @onishiweb The Network
96. @onishiweb The Web JS CSS HTML Internet
97. @onishiweb Do we always have access to the network?
98. @onishiweb Mobile connections
99. @onishiweb Cake or Death?
100. @onishiweb Enter Service Worker
101. @onishiweb The web is going offline!
102. @onishiweb How?
103. @onishiweb Register service worker Cache content Connect to network Request Page load Usable website
104. @onishiweb Go to network Service worker intercepts Check cache Request Page load Usable website Get content
105. @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); }); }
106. @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' ]); }) ) });
107. @onishiweb Register service worker Cache content Connect to network Request Page load Usable website
108. @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); } ) ); });
109. @onishiweb
110. @onishiweb @onishiweb https://jakearchibald.com/2014/offline-cookbook/
111. @onishiweb Caveats (a few things to be aware of)
112. @onishiweb Development flow https://www.chromium.org/blink/serviceworker/getting-started#TOC-Development-flow
113. @onishiweb @onishiweb chrome://inspect/#service-workers
114. @onishiweb @onishiweb chrome://serviceworker-internals/
115. @onishiweb HTTPS only
116. @onishiweb – MDN “Having modified network requests wide open to man in the middle attacks would be really bad.”
117. @onishiweb How much can I cache?
118. @onishiweb Progressively enhancing the network
119. @onishiweb Browser support…
120. @onishiweb Service Worker http://caniuse.com/#feat=serviceworkers
121. @onishiweb Fetch API http://caniuse.com/#feat=fetch
122. @onishiweb Caches https://jakearchibald.github.io/isserviceworkerready/#caches
123. @onishiweb @onishiweb https://jakearchibald.github.io/isserviceworkerready/
124. @onishiweb Progressive Performance
125. @onishiweb Critical Path CSS Responsive Images Font Loading API Universal JavaScript Service Workers
126. @onishiweb @onishiweb https://github.com/onishiweb/progressive-performance
127. @onishiweb Return of the browser wars
128. @onishiweb No…
129. @onishiweb – William Gibson “The future is already here - it’s just not very evenly distributed.”
130. @onishiweb Thanks Adam Onishi ThemeConf - September 2015