Did we(b development) lose the right direction?

22725c2d3eb331146549bf0d5d3c050c?s=47 stefan judis
March 05, 2020
Programming
1
700

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
640
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
280
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
200
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
5
3.1k
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
130
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
1
270
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
2
340
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
540
22725c2d3eb331146549bf0d5d3c050c?s=48 stefanjudis
0
66

Other Decks in Programming

See All in Programming
0ea7f61aec8fee539be0cf39b7bab77c?s=48 eregon
0
650
9ec05c5a1b9b0ce9cd53ec3a63838b9a?s=48 yuuu
2
160
A760a90c9afd981004343b9861f1e8b4?s=48 daipresents
1
180
977c74bb044a9d4fa90b305824eda390?s=48 olivergierke
2
610
A1b4b398630bbd32b77a82cbc37fae9a?s=48 freekmurze
1
140
953d2907b80dd5955c561d695ea9a494?s=48 kazumanagano
1
120
52711e2157a6fed933b0361cc06a6953?s=48 marcelgsantos
2
130
D79e3b0b78ca7027eb61d73028d45ad6?s=48 uchi_k
0
380
82d6167c4d14393c2e20b37a74b363c5?s=48 kasacchiful
1
210
917c89046a8ba98f398ea16b7b335779?s=48 nomadblacky
1
160
0aa238a274c2397214b20d6eed58939b?s=48 moomooya
2
380
04df7340898eac3a0536d3b47c55501c?s=48 hirotokirimaru
0
120

Featured

See All Featured
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
310
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
80
3.9k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
119
7.7k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
281
46k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
12k
24fc194843a71f10949be18d5a692682?s=48 gr2m
82
11k
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
18
900
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
79acae287842acf29084005533a7fb3b?s=48 hursman
103
9.1k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
607
54k
E195ae45320d9202eaa01c9f1d31a416?s=48 marktimemedia
5
140

Transcript

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

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

  3. None
  4. None

  5. yslow.org

  6. 4waisenkinder.de

  7. None
  8. None
  9. None

  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 minif ed!

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

  16. www.fmboschetto.it

  17. None
  18. None

  19. webpagetest.org/video/

  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.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 92
  24. None

  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!

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

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

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

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

    JavaScript!

  30. Page weight is not equal page weight!

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

  32. None

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

    the rest of the internet..."

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

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

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

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

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

    session length of 1.17 pages)

  37. ... for "better performance".

  38. Making a very fast website is extremely hard!

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

    it really?)

  40. twitter.com/philhawksworth/status/1038440732741259265

  41. None

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

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

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

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

    overhead?

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

  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> </body> </html>

  48. <!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>

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

  50. Your content in HTML The same content in JavaScript

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

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

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

    works!
  54. None
  55. None

  56. Updated search results Updated URL Submittable form

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

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

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

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

    "old school" HTML links

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

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

  62. reactjs.org with JavaScript reactjs.org without JavaScript 527KB / 1.7MB 41KB

    / 121KB Initial weight 547KB / 2.3MB 200KB / 1.0MB Weight after 4 navigations

  63. I'm guilty of that, too!

  64. Does this architecture improve user experience?

  65. None

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

    to use them! Right...

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

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

  69. Maybe app frameworks are for apps after all?

  70. None

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

  72. None

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

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

  75. "Benefits" of client-side routing

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

  77. twitter.com

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

  79. None

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

  81. 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

  82. We ship tailored experiences!

  83. We ship tailored experiences! But do we really?

  84. Aka... Could your parents deal with it?

  85. .nav { animation: vibrate 0.3s linear; } @media (prefers reduced

    motion: reduce) { .nav { animation: none; } } window.matchMedia('(prefers reduced motion: reduce)')

  86. People with vestibular disorder People on low battery People with

    limited time

  87. .day { background: #eee; color: black; } .night { background:

    #333; color: white; } @media (prefers color scheme: dark) { .day { } .night { } } window.matchMedia('(prefers color scheme: dark)')

  88. People sensible to bright screens People sitting in the dark

    People with a headache

  89. .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 Lite mode isn't available for desktop

  90. twitter.com No consideration of save-data settings.

  91. twitter.com No consideration of color theme settings.

  92. None

  93. People with LIFI People tethering with their phone People unable

    to afford much data

  94. navigator.connection.effectiveType 'slow-2g', '2g', '3g', or '4g'

  95. You can't know the user's context.

  96. It should be easy for the user to adjust.

  97. None

  98. https://....

  99. Save data https://.... Prefer reduced motion Prefer a dark interface

  100. www.youtube.com/watch?v=_cMLVqyYCzU

  101. Are we failing to ship a tailored user experience after

    all? (developers, browsers and operating systems)

  102. A great site just works.™

  103. HTML CSS JavaScript The foundation of the web

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

  105. 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?

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

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

  108. It's "just" HTML...

  109. HTML defines over 100 elements

  110. HTML defines 22 input types

  111. None

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

  113. <div aria label="twitter" tabindex="0" role="button"> Twitter div>

  114. ... it's not "easy".

  115. webaim.org/projects/million/

  116. webaim.org/projects/million/

  117. webaim.org/blog/webaim-million-one-year-update/

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

  119. 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

  120. USE CSP DON'T USE CSP 94% 6%

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

  122. The web loses quality...

  123. ... but at least developers get more productive!

  124. None
  125. None

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

  127. exports.sayHello = async (event) { return { statusCode: 200, body:

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

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

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

    / 130KB Complexity

  130. 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. :)

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

    …

  132. 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?

  133. Where are we going with this trend?

  134. None

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

    AWS GCloud Netlify Zeit Heroku * * a very incomplete list

  136. Complexity is king! (but what for?)

  137. twitter.com/_developit/status/1214258470226190350

  138. (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

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

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

    the best user experience.

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

    you make today. Henrik Joreteg

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

    experiences!

  143. 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

  144. 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)

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

    AWS GCloud Netlify Zeit Heroku * * a very incomplete list

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

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

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

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

    developer" is obsolete. Benjamin De Cock – @bdc

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

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

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

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

    consider the right tools for the best user experience?

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

    consider the right tools for the best user experience? twitter.com/slightlylate/status/1232147434727280640

  155. Maybe our focus should be more on building sites that

    just work! (And less on the technology behind these)

  156. Slides my-links.online/did-we-lose-direction

  157. @stefanjudis www.stefanjudis.com Thanks.