Best viewed with... SOTB5

Transcript

1. 1.

   @onishiweb Best viewed with… Adam Onishi State of the Browser

   - September 2015
2. 2.

   @onishiweb A long time ago…

3. 3.

   @onishiweb @onishiweb

4. 4.

   @onishiweb

5. 5.

   @onishiweb “Browser wars!”

6. 6.

   @onishiweb @onishiweb

7. 7.

   @onishiweb – a website in 2015 “For best results view

   this page in Chrome.”
8. 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. 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. 10.

    @onishiweb

11. 11.

    @onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html

12. 12.

    @onishiweb Developer-first development

13. 13.

    @onishiweb Cake or Death?

14. 14.

    @onishiweb Progressive enhancement

15. 15.

    @onishiweb “Vague, but exciting”

16. 16.

    @onishiweb Photo by Simon Collison - https://flic.kr/p/pbRdFm @onishiweb

17. 17.

    @onishiweb Photo by Pedro Ribeiro Simões - https://flic.kr/p/bvCA8 @onishiweb

18. 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. 19.

    @onishiweb @onishiweb

20. 20.

    @onishiweb Control

21. 21.

    @onishiweb Defensive design

22. 22.

    @onishiweb What we do know

23. 23.

    @onishiweb Baseline

24. 24.

    @onishiweb Performance

25. 25.

    @onishiweb Perceived Performance

26. 26.

    @onishiweb

27. 27.

    @onishiweb

28. 28.

    @onishiweb Progressively enhanced performance

29. 29.

    @onishiweb Render blocking assets

30. 30.

    @onishiweb CSS, JS, & Fonts

31. 31.

    @onishiweb CSS

32. 32.

    @onishiweb CSS is still an enhancement

33. 33.

    @onishiweb CSS as an enhancement

34. 34.

    @onishiweb Critical Path CSS

35. 35.

    @onishiweb Tooling

36. 36.

    @onishiweb https://github.com/addyosmani/critical

37. 37.

    @onishiweb https://github.com/pocketjoso/penthouse

38. 38.

    @onishiweb loadCSS https://github.com/filamentgroup/loadCSS/

39. 39.

    @onishiweb Progressively enhancing CSS delivery

40. 40.

    @onishiweb Fonts

41. 41.

    @onishiweb We ❤ web fonts

42. 42.

    @onishiweb

43. 43.

    @onishiweb

44. 44.

    @onishiweb 3s 3s 3s ∞ -

45. 45.

    @onishiweb Asynchronous font loading

46. 46.

    @onishiweb Font loading API

47. 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. 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. 49.

    @onishiweb Progressively enhancing font loading

50. 50.

    @onishiweb Font loading API http://caniuse.com/#feat=font-loading 41 43 31 ❌ ❌

51. 51.

    @onishiweb CSS Font Rendering http://tabatkins.github.io/specs/css-font-rendering/

52. 52.

    @onishiweb JavaScript

53. 53.

    @onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t

    getting JavaScript enhancements (1 in 93).”
54. 54.

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

55. 55.

    @onishiweb

56. 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. 57.

    @onishiweb Frameworks

58. 58.

    @onishiweb – Jake Archibald “Nothing should have a JavaScript dependant

    first render, it only punishes the user.”
59. 59.

    @onishiweb Is there a better way?

60. 60.

    @onishiweb Universal JavaScript

61. 61.

    @onishiweb Server Side rendering with Node.js

62. 62.

    @onishiweb React

63. 63.

    @onishiweb React.renderToString();

64. 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. 65.

    @onishiweb Client side too

66. 66.

    @onishiweb GoCardless

67. 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. 68.

    @onishiweb Progressively enhancing JavaScript frameworks

69. 69.

    @onishiweb Control

70. 70.

    @onishiweb The Network

71. 71.

    @onishiweb Assumption

72. 72.

    @onishiweb @onishiweb Photo by Paul Robertson - https://flic.kr/p/9qSizG

73. 73.

    @onishiweb Mobile connectivity

74. 74.

    @onishiweb Cake or Death?

75. 75.

    @onishiweb Enter Service Worker

76. 76.

    @onishiweb Web vs Native!

77. 77.

    @onishiweb The web is going offline!

78. 78.

    @onishiweb Browser cache

79. 79.

    @onishiweb @onishiweb

80. 80.

    @onishiweb Register service worker Cache content Response Request Render Usable

    website
81. 81.

    @onishiweb Cache Request Render Usable website Service worker Network

82. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 92.

    @onishiweb

93. 93.

    @onishiweb https://jakearchibald.com/2014/offline-cookbook/

94. 94.

    @onishiweb Tricky bits

95. 95.

    @onishiweb Development flow https://www.chromium.org/blink/serviceworker/getting-started#TOC- Development-flow

96. 96.

    @onishiweb chrome://inspect/#service-workers @onishiweb

97. 97.

    @onishiweb chrome://serviceworker-internals/ @onishiweb

98. 98.

    @onishiweb HTTPS only

99. 99.

    @onishiweb – MDN “Having modified network requests wide open to

    man in the middle attacks would be really bad.”
100. 100.

     @onishiweb How much can I cache?

101. 101.

     @onishiweb Progressively enhancing the network

102. 102.

     @onishiweb Browser support…

103. 103.

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

104. 104.

     @onishiweb Return of the browser wars

105. 105.

     @onishiweb Not really

106. 106.

     @onishiweb Stop assuming

107. 107.

     @onishiweb – Bruce Lawson “It never pays to make too

     many assumptions about your users.”
108. 108.

     @onishiweb Be defensive

109. 109.

     @onishiweb Improve performance

110. 110.

     @onishiweb New shiny!

111. 111.

     @onishiweb @onishiweb Thanks