Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Did we(b development) lose the right direction?

22725c2d3eb331146549bf0d5d3c050c?s=47 stefan judis
March 05, 2020
Programming
5
1.8k

Did we(b development) lose the right direction?

22725c2d3eb331146549bf0d5d3c050c?s=128

stefan judis

March 05, 2020
Tweet

More Decks by stefan judis

See All by stefan judis
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
56
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
780
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
360
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
290
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3.6k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
170
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
450
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
450
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
640

Other Decks in Programming

See All in Programming
993ef638264def4334358f986fb4a91d?s=48 uhyo
26
6.8k
406a99778248522c9acfe1f95b217a55?s=48 kotakawase
0
520
E8fae2ce31d2d3700bca68c464862bad?s=48 paru871
0
110
8ad4be5fb42a8fd88d68a9054d9eba8e?s=48 tamai_63
0
370
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
280
1b031ccbf968811f157cf7a892dddfed?s=48 geshan
0
300
Db8a7eb9cf22f26cedce8295a53c8d7c?s=48 kawazu
0
360
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
280
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
230
A56269ca269966f71293d08b32ad53b3?s=48 utaani
0
130
B03c47042f27235b4ddd97621c02df81?s=48 storz
0
110
0f162107f1b716c9fa62d6071eb8b995?s=48 mugi_uno
1
230

Featured

See All Featured
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.8k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
172
7.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
830
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
410k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
163
7k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
75
3.8k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
316
22k
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
58
4k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.2k

Transcript

  1. @stefanjudis Did we(b development) lose the right direction?

  2. This is a talk about general "best practices"...

  3. This is a rant about general "best practices"...

  4. @stefanjudis news.stefanjudis.com Heyo, I'm Stefan!

  5. The state of web development ten years ago...

  6. None
  7. None

  8. yslow.org

  9. 4waisenkinder.de

  10. None
  11. None

  12. I love technology and I love writing JavaScript!

  13. stefanjudis.com 2017 - 2020

  14. Chrome – Cable iPhone 6 – 3G

  15. Usually, any score above a 90 gets you in the

    top ~5% of performant websites. Lighthouse documentation

  16. HTTP/2 Everything's compressed and minified!

  17. github.com/webpack-contrib/webpack-bundle-analyzer Code splitting

  18. www.fmboschetto.it

  19. None
  20. None

  21. webpagetest.org/video/

  22. webpagetest.org/video/view.php?id=200302_2df0157ba9ea8586f5d987f7a1c3d52ed5e2a874 Chrome – Cable

  23. Stefan, you just messed it up!

  24. Maybe, but how can it be so easy to mess

    up?

  25. stefanjudis.com fmboschetto.it 4waisenkinder.de Overall page weight 340KB / 940KB 265KB

    / 284KB 159KB / 300KB index.html 108KB / 340KB 8KB / 32KB 6KB / 18KB CSS resources 1 0 1 Images resources 0* 32 (246KB / 254KB) 0* Speed Index (LTE) 1.4s / 0.8s 2.1s / 0.7s 2.3s / 1.5s JS resources 22 (183KB / 512KB) 6 (68KB / 177KB) 2 (2KB / 6KB) *ignoring tracking pixel Lighthouse Perf Score 100 97 90
  26. None

  27. 10% - First contentful paint 10% - Time to interactive

    10% - Speed Index 25% - Largest contentful paint 30% - Total blocking time 15% - Cumulative layout shift JavaScript blocks the main-thread!

  28. paulirish.github.io/lh-scorecalc/ calibreapp.com/blog/lighthouse-changes-scoring-algorithm

  29. www.youtube.com/watch?v=Lx1cYJAVnzA

  30. timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks/ Scripting related CPU time (in milliseconds) for mobile devices

    in percentiles Median

  31. medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

  32. A 150KB image is not comparable to 150KB of gzipped

    JavaScript!

  33. Page weight is not equal page weight!

  34. That's a 340KB index file for roughly 400 words, Stefan?

  35. None

  36. "It's great because it's fast! And it's still lighter than

    the rest of the internet..."

  37. "It's great because it's still lighter than the rest of

    the internet..." "I'm really digging the tech-stack!"

  38. That's a 340KB index file for roughly 400 words, Stefan?

    window.__DATA__=function( e,t,n,o,i,/* ... */ ){ return /* ... */ )

  39. I decided to preload/inline 22 articles ... (at an average

    session length of 1.17 pages)

  40. ... for "better performance".

  41. Making a very fast website is extremely hard!

  42. Making a very fast website is extremely hard! (But is

    it really?)

  43. twitter.com/philhawksworth/status/1038440732741259265

  44. None

  45. www.11ty.dev/docs/performance-leaderboard/

  46. www.youtube.com/watch?v=88K8oO_dYbI

  47. www.youtube.com/watch?v=88K8oO_dYbI Today, I 100% disagree with "past me", ...

  48. www.youtube.com/watch?v=88K8oO_dYbI ... because where is the user's benefit from such

    overhead?

  49. A common "best practice" Universal JavaScript apps for content-sites

  50. <!doctype html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description"

    content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/main.css"> <meta name="theme-color" content="#fafafa"> </head> <body> <p>Hello world!</p> <script src="js/plugins.js"></script> <script src="js/main.js"></script> </body> </html>

  51. <!doctype html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description"

    content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/main.css"> <meta name="theme-color" content="#fafafa"> </head> <body> <p>Hello world!</p> <script src=“js/app-bundle-hash1.js”></script> <script src=“js/app-bundle-hash2.js”></script> <script src=“js/app-bundle-hash3.js”></script> <script>window.__data__ = { greeting: "Hello world!" }</script> </body> </html>

  52. <!doctype html> <html lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description"

    content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="site.webmanifest"> <link rel="apple-touch-icon" href="icon.png"> <link rel="stylesheet" href="css/main.css"> <meta name="theme-color" content="#fafafa"> </head> <body> <p>Hello world!</p> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script>window.__data__ = { greeting: "Hello world!" }</script> </body> </html> The same code runs on the server and on the client!

  53. Your content in HTML The same content in JavaScript

  54. Is this really the best way for the user?

  55. "This architecture o!ers doors to progressive enhancement!"

  56. Base functionality Enhanced experience If the enhancement fails, it still

    works!
  57. None
  58. None

  59. Updated search results Updated URL Submittable form

  60. Buzzfeed twitter.com/philhawksworth/status/990890920672456707

  61. "We don't have any non-JavaScript users" No, all your users

    are non-JS while they're downloading your JS. Jake Archibald

  62. github.com POST github.com/stefanjudis/test/issue_comments handles a form and AJAX submit Five

    "old school" HTML links

  63. I’m happy with GitHub's experience. A good site "just works".™

  64. What's the enhancement in the wild, though?

  65. reactjs.org with JavaScript reactjs.org without JavaScript 433KB / 1.1MB 49KB

    / 175KB Initial weight 547KB / 2.3MB 100KB / 1.0MB Weight after 4 navigations

  66. I'm guilty of that, too!

  67. Does this architecture improve user experience?

  68. None

  69. You get 6MB for 2Euros but you have only 24h

    to use them! Right...

  70. httparchive.org/reports/state-of-the-web

  71. whatdoesmysitecost.com

  72. httparchive.org/reports/state-of-the-web We ship more data for the same experience...

  73. Maybe app frameworks are for apps after all?

  74. None

  75. 5.2MB / 17MB 25KB / 40KB

  76. None

  77. The web is not as cutting-edge as it seems...

  78. ... boring is beautiful! (and fast)

  79. "Benefits" of client-side routing

  80. Developers are "allowed" to re-implement an accessible navigation

  81. twitter.com

  82. www.gatsbyjs.org/blog/2020-02-10-accessible-client-side-routing-improvements/

  83. None

  84. github.com/sdras/page-transitions-travelapp

  85. async function navigateToSettingsPage() { await document.documentTransition.prepare({ rootTransition: 'cover-left', }); updateDOMForSettingsPage();

    await document.documentTransition.start(); } developer.chrome.com/blog/shared-element-transitions-for-spas/ chrome://flags/#document-transition

  86. There’s a chance I believe client side routing on the

    web is usually not preferred. Which is ironic. Ryan Florence (co-author React-Router) twitter.com/ryanflorence/status/1186515553285857280

  87. vuejs.org/v2/guide/installation.html

  88. vuejs.org/v2/guide/installation.html

  89. We use too much JavaScript!

  90. kit.svelte.dev astro.build

  91. The modern web seems to focus an awful lot on

    JavaScript. We don’t think it has to [...]. astro.build

  92. Your content in HTML Multi-page App (MPA) The same content

    in JavaScript Single-page App (SPA)

  93. Your content in HTML Multi-page App (MPA) The same content

    in JavaScript Single-page App (SPA)

  94. jasonformat.com/islands-architecture/

  95. /# Opt in to load client-side JavaScript *% <MyComponent client:load

    /& <MyComponent client:idle /& <MyComponent client:visible /& <MyComponent client:media={QUERY} /&

  96. works with

  97. vercel.com reacts.org

  98. Have Single-Page Apps Ruined the Web? #transitionalApps

  99. A great site just works.™

  100. HTML CSS JavaScript The foundation of the web

  101. A great site doesn't have to be built with React/Vue/Angular/...

  102. I need a new site what should I use? You

    should use Framework X with SSR, an offline strategy and it has to run "on the edge"! It depends... What's your use case?

  103. A great site can be built with React, Vue, Angular...

  104. A great site is accessible, fast, secure, ...

  105. It's "just" HTML...

  106. HTML defines over 100 elements

  107. HTML defines 22 input types

  108. None

  109. css-tricks.com/a-complete-guide-to-links-and-buttons/ +4000 words!

  110. <div aria-label="twitter" tabindex="0" role="button"> Twitter <(div>

  111. www.htmhell.dev

  112. ... it's not "easy".

  113. webaim.org/projects/million/

  114. webaim.org/projects/million/

  115. webaim.org/projects/million/

  116. thenextweb.com/contributors/2018/03/10/protect-website-cryptojacking-attacks/

  117. Content-Security-Policy: default-src 'self'; script-src 'self' just- comments.com www.google-analytics.com production- assets.codepen.io

    storage.googleapis.com; style-src 'self' 'unsafe- inline'; img-src 'self' data: images.contentful.com images.ctfassets.net www.gravatar.com www.google-analytics.com just-comments.com; font-src 'self' data:; connect-src 'self' cdn.contentful.com images.contentful.com videos.contentful.com images.ctfassets.net videos.ctfassets.net service.just-comments.com www.google- analytics.com; media-src 'self' videos.contentful.com videos.ctfassets.net; object-src 'self'; frame-src codepen.io; frame- ancestors 'self'; worker-src 'self'; block-all-mixed-content; manifest-src 'self' 'self'; disown-opener; prefetch-src 'self'; report-uri https:// stefanjudis.report-uri.com/r/d/csp/reportOnly

  118. USE CSP DON'T USE CSP 89% 11%

  119. httparchive.org/reports/state-of-the-web

  120. The web lost quality...

  121. ... but at least Frontend developers got more productive!

  122. None
  123. None

  124. exports.sayHello = async (event) =" { return 'Hello from Lambda!';

    };

  125. exports.sayHello = async (event) =" { return { statusCode: 200,

    body: JSON.stringify({"msg": "Hello from Lambda!"}) }; };

  126. The options are limitless to build a product quickly!

  127. Hello world! 2010 10KB / 50KB Hello world! 2020 40KB

    / 130KB Complexity

  128. I just added two helpers to tiny-helpers.dev. The site is

    great, but that I had to download 700MB of Node.js stuff is brutal. :)

  129. A text editor A text editor, Node.js, npm, framework knowledge,

    …

  130. I’ve been building on the web for 15+ years in

    some capacity, and it has never been so easy to build complex apps. Josh Comeau 100% agree! How many sites need to be complex apps, though?

  131. Where are we going with this trend?

  132. None

  133. HTML CSS JavaScript React Vue Angular Svelte webpack Rollup Parcel

    AWS GCloud Netlify Vercel Heroku * * a very incomplete list

  134. Complexity rocks! (but what for?)

  135. None

  136. twitter.com/_developit/status/1214258470226190350

  137. (function() { const fakeButton = document.querySelector('[data-menu-button]'); const menu = document.querySelector('[data-menu]');

    const toggleMenuButton = document.createElement('button'); toggleMenuButton.textContent = fakeButton.textContent; toggleMenuButton.setAttribute('aria-expanded', false); toggleMenuButton.setAttribute('aria-controls', 'menu'); toggleMenuButton.classList.add('nav__toggle'); fakeButton.parentNode.replaceChild(toggleMenuButton, fakeButton); toggleMenuButton.addEventListener('click', function() { let expanded = this.getAttribute('aria-expanded') === 'true' || false; this.setAttribute('aria-expanded', !expanded); menu.hidden = !menu.hidden; }); menu.hidden = true; })() justmarkup.com/articles/2019-12-04-hamburger-menu/ 16 lines of hand-written JavaScript

  138. Maybe we'll have good enough abstractions one day, but today…

  139. … you still have to know web fundamentals to create

    the best user experience.

  140. You're shaping tomorrow's job market based on the technology choices

    you make today. Henrik Joreteg

  141. Your job as a web developer is to build beautiful

    experiences!

  142. Your job as a web developer is to build beautiful

    experiences! Your job as a developer is to decide, to decide what tools to use, to decide what frameworks to use, to decide what to prioritize, to decide what is the best way to maintain a project. Michael Scharnagl

  143. Chatted with someone who’s been working at a company as

    a front-end developer for 3 years. Their friend asked them to help build a website, but they had to decline. They didn’t know how. Chris Coyier (css-tricks.com)

  144. HTML CSS JavaScript React Vue Angular Svelte webpack Rollup Parcel

    AWS GCloud Netlify Vercel Heroku * * a very incomplete list

  145. css-tricks.com/the-great-divide/

  146. css-tricks.com/the-great-divide/

  147. css-tricks.com/the-great-divide/

  148. It's time for our industry to realize the title "frontend

    developer" is obsolete. Benjamin De Cock – @bdc

  149. Developers and software engineers put their job satisfaction above their

    users or customers.

  150. Your users don't care about your technical implementation.

  151. DX (developer experience) UX (user experience)

  152. DX (developer experience) UX (user experience)

  153. I love shiny tools and I love writing JavaScript...

  154. ... but maybe we should take a step back? And

    consider the right tools for the best user experience?

  155. 2020+ 2017 - 2020

  156. 2020+ Reduction of overall page weight by 64%.

  157. 2020+ Reduction of build time from 4min to 40s.

  158. 2020+ No JavaScript build pipeline leading to reduced complexity.

  159. 2020+ No JavaScript build pipeline leading to reduced complexity.

  160. 2020+ A green lighthouse score.

  161. 2020+ A site with a better user experience.

  162. Is a JavaScript-driven stack really that bad?

  163. Not at all, use whatever makes you happy!

  164. Every technology decision has tradeo!s. Kevlin Henney

  165. But maybe we should focus more on building sites that

    just work... (And worry less about the technology powering them)

  166. Slides my-links.online/did-we-lose-direction Yes! I own that domain! !

  167. @stefanjudis www.stefanjudis.com newsletter.stefanjudis.com Thanks.