Best viewed with... SOTB5

My updated Best viewed with talk from State of the Browser 5

Transcript

1. @onishiweb Best viewed with… Adam Onishi State of the Browser - September 2015
2. @onishiweb A long time ago…
3. @onishiweb @onishiweb
4. @onishiweb
5. @onishiweb “Browser wars!”
6. @onishiweb @onishiweb
7. @onishiweb – a website in 2015 “For best results view this page in Chrome.”
8. @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
9. @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
10. @onishiweb
11. @onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html
12. @onishiweb Developer-first development
13. @onishiweb Cake or Death?
14. @onishiweb Progressive enhancement
15. @onishiweb “Vague, but exciting”
16. @onishiweb Photo by Simon Collison - https://flic.kr/p/pbRdFm @onishiweb
17. @onishiweb Photo by Pedro Ribeiro Simões - https://flic.kr/p/bvCA8 @onishiweb
18. @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
19. @onishiweb @onishiweb
20. @onishiweb Control
21. @onishiweb Defensive design
22. @onishiweb What we do know
23. @onishiweb Baseline
24. @onishiweb Performance
25. @onishiweb Perceived Performance
26. @onishiweb
27. @onishiweb
28. @onishiweb Progressively enhanced performance
29. @onishiweb Render blocking assets
30. @onishiweb CSS, JS, & Fonts
31. @onishiweb CSS
32. @onishiweb CSS is still an enhancement
33. @onishiweb CSS as an enhancement
34. @onishiweb Critical Path CSS
35. @onishiweb Tooling
36. @onishiweb https://github.com/addyosmani/critical
37. @onishiweb https://github.com/pocketjoso/penthouse
38. @onishiweb loadCSS https://github.com/filamentgroup/loadCSS/
39. @onishiweb Progressively enhancing CSS delivery
40. @onishiweb Fonts
41. @onishiweb We ❤ web fonts
42. @onishiweb
43. @onishiweb
44. @onishiweb 3s 3s 3s ∞ -
45. @onishiweb Asynchronous font loading
46. @onishiweb Font loading API
47. @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"; });
48. @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; }
49. @onishiweb Progressively enhancing font loading
50. @onishiweb Font loading API http://caniuse.com/#feat=font-loading 41 43 31 ❌ ❌
51. @onishiweb CSS Font Rendering http://tabatkins.github.io/specs/css-font-rendering/
52. @onishiweb JavaScript
53. @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t getting JavaScript enhancements (1 in 93).”
54. @onishiweb http://kryogenix.org/code/browser/everyonehasjs.html
55. @onishiweb
56. @onishiweb – Jeremy Keith “Brilliant easter egg in the newly- redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”
57. @onishiweb Frameworks
58. @onishiweb – Jake Archibald “Nothing should have a JavaScript dependant first render, it only punishes the user.”
59. @onishiweb Is there a better way?
60. @onishiweb Universal JavaScript
61. @onishiweb Server Side rendering with Node.js
62. @onishiweb React
63. @onishiweb React.renderToString();
64. @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 }); });
65. @onishiweb Client side too
66. @onishiweb GoCardless
67. @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.”
68. @onishiweb Progressively enhancing JavaScript frameworks
69. @onishiweb Control
70. @onishiweb The Network
71. @onishiweb Assumption
72. @onishiweb @onishiweb Photo by Paul Robertson - https://flic.kr/p/9qSizG
73. @onishiweb Mobile connectivity
74. @onishiweb Cake or Death?
75. @onishiweb Enter Service Worker
76. @onishiweb Web vs Native!
77. @onishiweb The web is going offline!
78. @onishiweb Browser cache
79. @onishiweb @onishiweb
80. @onishiweb Register service worker Cache content Response Request Render Usable website
81. @onishiweb Cache Request Render Usable website Service worker Network
82. @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); }); }
83. @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); }); }
84. @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); }); }
85. @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' ]);
86. @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' ]);
87. @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' ]);
88. @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); } ) ); });
89. @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); } ) ); });
90. @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); } ) ); });
91. @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); } ) ); });
92. @onishiweb
93. @onishiweb https://jakearchibald.com/2014/offline-cookbook/
94. @onishiweb Tricky bits
95. @onishiweb Development flow https://www.chromium.org/blink/serviceworker/getting-started#TOC- Development-flow
96. @onishiweb chrome://inspect/#service-workers @onishiweb
97. @onishiweb chrome://serviceworker-internals/ @onishiweb
98. @onishiweb HTTPS only
99. @onishiweb – MDN “Having modified network requests wide open to man in the middle attacks would be really bad.”
100. @onishiweb How much can I cache?
101. @onishiweb Progressively enhancing the network
102. @onishiweb Browser support…
103. @onishiweb https://jakearchibald.github.io/isserviceworkerready/
104. @onishiweb Return of the browser wars
105. @onishiweb Not really
106. @onishiweb Stop assuming
107. @onishiweb – Bruce Lawson “It never pays to make too many assumptions about your users.”
108. @onishiweb Be defensive
109. @onishiweb Improve performance
110. @onishiweb New shiny!
111. @onishiweb @onishiweb Thanks