Stefan Judis "Did we(b development) lose the right direction?"
0 likes210 views
The document discusses the evolution of web development, examining the complexities and performance issues associated with modern JavaScript frameworks compared to simpler HTML and CSS solutions. It questions the necessity of heavy client-side frameworks and emphasizes the importance of user experience, suggesting that many sites sacrifice performance and accessibility for technological complexity. Ultimately, the author advocates for a return to focusing on what benefits users most, rather than chasing the latest tools and trends in web development.
![(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](https://image.slidesharecdn.com/are-we-doing-it-all-wrong-200317150531/85/Stefan-Judis-Did-we-b-development-lose-the-right-direction-133-320.jpg)
Stefan Judis "Did we(b development) lose the right direction?"
- 1. @stefanjudis Did we(b development) lose the right direction?
- 2. The state of web development ten years ago...
- 5. yslow.org
- 10. I love technology and I love writing JavaScript!
- 11. stefanjudis.com
- 12. Chrome – Cable iPhone 6 – 3G
- 13. Usually, any score above a 90 gets you in the top ~5% of performant websites. Lighthouse documentation
- 14. HTTP/2 Everything's compressed and minified!
- 20. webpagetest.org/video/view.php?id=200302_2df0157ba9ea8586f5d987f7a1c3d52ed5e2a874 Chrome – Cable
- 21. Stefan, you just messed it up!
- 22. Maybe, but how can it be so easy to mess up?
- 23. stefanjudis.comfmboschetto.it 4waisenkinder.de Overall page weight 340KB / 940KB265KB / 284KB 159KB / 300KB index.html 108KB / 340KB8KB / 32KB 6KB / 18KB CSS resources 10 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 92
- 25. 3X - first contentful paint 1X - first meaningful paint 2X - first cpu idle 5X - time to interactive 4X - speed index 0X - estimated input latency JavaScript blocks the main-thread!
- 28. A 150KB image is not comparable to 150KB of gzipped JavaScript!
- 29. Page weight is not equal page weight!
- 30. That's a 340KB index file for roughly 400 words, Stefan?
- 32. "It's great because it's fast! And it's still lighter than the rest of the internet..."
- 33. "It's great because it's still lighter than the rest of the internet..." "I'm really digging the tech-stack!"
- 34. That's a 340KB index file for roughly 400 words, Stefan? window.__DATA__=function( e,t,n,o,i,/* ... */ ){ return /* ... */ )
- 35. I decided to preload/inline 22 articles ... (at an average session length of 1.17 pages)
- 36. ... for "better performance".
- 37. Making a very fast website is extremely hard!
- 38. Making a very fast website is extremely hard! (But is it really?)
- 42. www.youtube.com/watch?v=88K8oO_dYbI Today, I 100% disagree with "past me", ...
- 43. www.youtube.com/watch?v=88K8oO_dYbI ... because where is the user's benefit from such overhead?
- 44. A common "best practice" Universal JavaScript apps for content-sites
- 45. <!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>
- 46. <!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>
- 47. <!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!
- 48. Your content in HTML The same content in JavaScript
- 49. Is this really the best way for the user?
- 50. "This architecture offers doors to progressive enhancement!"
- 51. Base functionality Enhanced experience If the enhancement fails, it still works!
- 56. "We don't have any non-JavaScript users" No, all your users are non-JS while they're downloading your JS. Jake Archibald
- 57. github.com POST github.com/stefanjudis/test/issue_comments handles a form and AJAX submit Five "old school" HTML links
- 58. I’m happy with GitHub's experience. A good site "just works".™
- 59. What's the enhancement in the wild, though?
- 60. reactjs.org with JavaScript reactjs.org without JavaScript 527KB / 1.7MB 41KB / 121KBInitial weight 547KB / 2.3MB 200KB / 1.0MB Weight after 4 navigations
- 61. I'm guilty of that, too!
- 62. Does this architecture improve user experience?
- 64. You get 6MB for 2Euros but you have only 24h to use them! Right...
- 66. httparchive.org/reports/state-of-the-web We ship more data for the same experience...
- 67. Maybe app frameworks are for apps after all?
- 69. 5.2MB / 17MB 25KB / 40KB
- 71. The web is not as cutting-edge as it seems...
- 72. ... boring is beautiful! (and fast)
- 74. Developers are "allowed" to re-implement an accessible navigation
- 75. twitter.com
- 79. 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
- 80. We ship tailored experiences!
- 81. We ship tailored experiences! But do we really?
- 82. Aka... Could your parents deal with it?
- 83. .nav { animation: vibrate 0.3s linear; } @media (prefers-reduced-motion: reduce) { .nav { animation: none; } } window.matchMedia('(prefers-reduced-motion: reduce)')
- 84. People with vestibular disorder People on low battery People with limited time
- 85. .day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day { /* ... */ } .night { /* ... */ } } window.matchMedia('(prefers-color-scheme: dark)')
- 86. People sensible to bright screens People sitting in the dark People with a headache
- 87. .image { background-image: url("images/heavy.jpg"); } @media (prefers-reduced-data: reduce) { /* Save-Data: On */ .image { background-image: url("images/light.jpg"); } } navigator.connection.saveData // true save-data: on
- 88. twitter.com No consideration of save-data settings.
- 90. People with LIFI People tethering with their phone People unable to afford much data
- 91. navigator.connection.effectiveType // 'slow-2g', '2g', '3g', or '4g'
- 92. You can't know the user's context.
- 93. It should be easy for the user to adjust.
- 95. https://....
- 96. Save data https://.... Prefer reduced motion Prefer a dark interface
- 98. Are we failing to ship a tailored user experience after all? (developers, browsers and operating systems)
- 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
- 109. <div aria-label="twitter" tabindex="0" role="button"> Twitter </div>
- 110. ... it's not "easy".
- 114. 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
- 115. USE CSP DON'T USE CSP 94% 6%
- 118. ... but at least developers get more productive!
- 121. exports.sayHello = async (event) => { return 'Hello from Lambda!'; };
- 122. exports.sayHello = async (event) => { return { statusCode: 200, body: JSON.stringify({"msg": "Hello from Lambda!"}) }; };
- 123. The options are limitless to build a product quickly!
- 124. Hello world! 2010 10KB / 50KB Hello world! 2020 40KB / 130KB Complexity
- 125. 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. :)
- 126. A text editor A text editor, Node.js, npm, framework knowledge, …
- 127. 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?
- 128. Where are we going with this trend?
- 130. HTML CSS JavaScript React Vue Angular Svelte webpack Rollup Parcel AWS GCloud Netlify Zeit Heroku * * a very incomplete list
- 131. Complexity is king! (but what for?)
- 133. (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
- 134. Maybe we'll have good enough abstractions one day, but today…
- 135. … you still have to know web fundamentals to create the best user experience.
- 136. You're shaping tomorrow's job market based on the technology choices you make today. Henrik Joreteg
- 137. Your job as a web developer is to build beautiful experiences!
- 138. 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
- 139. 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)
- 140. HTML CSS JavaScript React Vue Angular Svelte webpack Rollup Parcel AWS GCloud Netlify Zeit Heroku * * a very incomplete list
- 144. Your users don't care about your technical implementation.
- 146. I love shiny tools and I love writing JavaScript...
- 147. ... but maybe we should take a step back? And consider the right tools for the best user experience?
- 148. ... but maybe we should take a step back? And consider the right tools for the best user experience? twitter.com/slightlylate/status/1232147434727280640
- 149. Maybe our focus should be more on building sites that just work! (And less on the technology behind these)