The Unbearable Weight of Massive JavaScript (v3, Pixel Pioneers 2024)

Follow Ryan on Mastodon @ https://webperf.social/@ryantownsend

For the past 10+ years, JavaScript frameworks and Single Page Applications have been marketed as the solution to all our performance, robustness and productivity problems, but things haven’t worked out the way we’d all hoped, have they?

* Simple marketing and ecommerce sites are still getting heavier and slower.

* Features fail in weird and wonderful ways meaning we need an ever-increasing array of tooling to monitor and debug problems.

* Teams armed with the latest Apple Silicon Macs, expensive CI tooling and complex build pipelines still can’t ship effectively.

But it’s not all doom-and-gloom: we live in a time of unprecedented opportunity to give our users a fantastic experience – the web platform has never been more capable than it is today.

Let’s look at what we can achieve by simplifying our web architecture, utilising new and upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly front-ends.

Transcript

1. The Unbearable Weight of Massive JavaScript
2. twnsnd.com/pixelpioneers source: https://httparchive.org/reports/state-of-javascript
3. twnsnd.com/pixelpioneers source: https://web.dev/articles/inp
4. twnsnd.com/pixelpioneers source: https://web.dev/articles/inp First Input Delay (FID)
5. twnsnd.com/pixelpioneers source: https://httparchive.org/reports/techreport/landing
6. twnsnd.com/pixelpioneers As little as 40% pass-rate Ignores the worst 25% of interactions 200ms is a generous threshold
7. twnsnd.com/pixelpioneers 100ms source: Response time in man-computer conversational transactions – Robert Miller, 1968
8. twnsnd.com/pixelpioneers source: https://www.speedcurve.com/blog/INP-user-experience-correlation/
9. twnsnd.com/pixelpioneers source: https://x.com/ID_AA_Carmack/status/1787850053912064005
10. twnsnd.com/pixelpioneers source: https://httparchive.org/reports/techreport/landing
11. twnsnd.com/pixelpioneers How did our priorities get misaligned? What it really means to be productive How we can improve things with the Web Platform
12. twnsnd.com/pixelpioneers Web Platform- fi rst
13. twnsnd.com/pixelpioneers Up to 2 years 3 to 5 years 5 to 10 years 10 to 20 years How long?! 😬 0% 1,600% Years of Experience
14. twnsnd.com/pixelpioneers
15. twnsnd.com/pixelpioneers img.png { behavior: url(png.htc) }
16. twnsnd.com/pixelpioneers No ever-green browsers Front-end development ‘Not SERIOUS’ Inaccessible Macromedia Adobe Flash What even is ‘Automated testing’? Rudimentary web performance tooling
17. twnsnd.com/pixelpioneers Reach a global audience Iterate faster than any other platform Lower disparity in connectivity and compute ‘Progressive Enhancement’ and ‘Graceful Degradation’ coined Web Standards movement headway on consistency
18. Real world projects BIG TECH & VC DEMOS
19. twnsnd.com/pixelpioneers
20. twnsnd.com/pixelpioneers
21. twnsnd.com/pixelpioneers Trickle-down User Experience
22. twnsnd.com/pixelpioneers “92% [of businesses] think their website’s poor user experience is costing them sales” — Storyblok research
23. twnsnd.com/pixelpioneers Janky sliders Multi-megabyte JavaScript resources for static landing pages Tracking-dependent add-to-cart Unhoverable mega-menus In fi nite loops Skeletons for infrequently changed content Accept cookies! Live chat now! Sign-up for 10% o ff ! Client-side rendered forms 2.5mb marketing landing pages
24. twnsnd.com/pixelpioneers
25. twnsnd.com/pixelpioneers We can do better
26. twnsnd.com/pixelpioneers Developer Experience Convenience
27. twnsnd.com/pixelpioneers Productivity is more than npm ins ta l l
28. twnsnd.com/pixelpioneers
29. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
30. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
31. twnsnd.com/pixelpioneers A necessary but costly decision
32. twnsnd.com/pixelpioneers
33. twnsnd.com/pixelpioneers
34. twnsnd.com/pixelpioneers Tell me you’ve migrated to an SPA without telling me you’ve migrated to an SPA
35. twnsnd.com/pixelpioneers “It would be better if it was more ’APP-LIKE’” — Nobody, not a single end-user
36. twnsnd.com/pixelpioneers
37. twnsnd.com/pixelpioneers Consistently working Reasonably fast Accessible Usable
38. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
39. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
40. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
41. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
42. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
43. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training
44. twnsnd.com/pixelpioneers Performance Accessibility Usability Talent Availability & Retention Maintainability Security Reliability & Robustness Onboarding & Training “It depends”
45. twnsnd.com/pixelpioneers Few are ready
46. twnsnd.com/pixelpioneers Embracing the Web Platform
47. twnsnd.com/pixelpioneers “Consider users over authors over implementors over speci fi ers over theoretical purity” — W3C’s Priority of Constituencies (within the HTML Design Principles) That’s us!
48. twnsnd.com/pixelpioneers
49. twnsnd.com/pixelpioneers 55,000 lines of JavaScript
50. twnsnd.com/pixelpioneers source: https://www.rumvision.com/tools/core-web-vitals-history/
51. twnsnd.com/pixelpioneers source: https://www.rumvision.com/tools/core-web-vitals-history/
52. twnsnd.com/pixelpioneers 1000ms+ “likely mental context switch” source: High Performance Browser Networking, Ilya Grigorik
53. twnsnd.com/pixelpioneers 1. Custom Elements 2. Scroll-snapping / Scroll-linked Animations 3. View Transitions 4. Navigation API 5. Speculation Rules
54. twnsnd.com/pixelpioneers BUT FIRST! A few important words on approach
55. twnsnd.com/pixelpioneers Progressive Enhancement
56. twnsnd.com/pixelpioneers Sending useful HTML: forms, links, buttons Accepting there will be bugs in your software Ensuring every feature works without JavaScript, regardless of importance Going cold-turkey on frameworks & libraries
57. twnsnd.com/pixelpioneers Browser support
58. twnsnd.com/pixelpioneers
59. twnsnd.com/pixelpioneers
60. twnsnd.com/pixelpioneers Waiting for all browsers to support a feature Waiting for everyone to update their browser Developing against the lowest common denominator Using features which bene fi t signi fi cant portions of your customer base
61. twnsnd.com/pixelpioneers Poly fi lls, Shims & alternative code paths
62. twnsnd.com/pixelpioneers Making it work for everyone, regardless of performance impact Using poly fi lls that provide support back to the stone age Using massive fully-featured poly fi lls, when an if/else would do Never reviewing what poly fi lls you still have in play Giving more of your customer base a great experience
63. twnsnd.com/pixelpioneers <custom-elements> 16.4 for FORM ELEMENTS
64. twnsnd.com/pixelpioneers Shadow DOM Light DOM
65. twnsnd.com/pixelpioneers Shadow DOM Light DOM
66. twnsnd.com/pixelpioneers <my-custom-element> <img src="..." width="200" height="200" alt="..." /> <img src="..." width="200" height="200" alt="..." /> <img src="..." width="200" height="200" alt="..." /> </my-custom-element>
67. twnsnd.com/pixelpioneers class MyCustomElement extends HTMLElement { connectedCallback() { // added to DOM, attach events, initialize etc } disconnectedCallback() { // removed from DOM, detach events, cleanup etc } } customElements.define("my-custom-element", MyCustomElement)
68. twnsnd.com/pixelpioneers class MyCustomElement extends HTMLElement { static get observedAttributes() { return ["my-attribute"] } attributeChangedCallback(name, oldValue, newValue) { // action attribute changes } }
69. twnsnd.com/pixelpioneers class MyCustomElement extends HTMLElement { static observedAttributes = ["value"] static formAssociated = true #internals constructor() { super() this.#internals = this.attachInternals() } attributeChangedCallback(name, oldValue, newValue) { this.#internals.setFormValue(newValue) } }
70. twnsnd.com/pixelpioneers my-custom-element:defined { /* active styling */ } my-custom-element:not(:defined) { /* inactive styling */ }
71. twnsnd.com/pixelpioneers You may not need to use slots or the (Declarative) Shadow DOM Your custom element can just use querySelector and innerHTML You may not need isomorphic rendering Some duplication is probably fi ne (though, alternatives do exist) Don’t over-complicate it LIT, WEBC, ENHANCE
72. twnsnd.com/pixelpioneers Scroll Snapping & Scroll-Linked Animations
73. twnsnd.com/pixelpioneers Progressive Enhancement ~10 lines of CSS Zero JavaScript GPU-accelerated Scroll Snap
74. twnsnd.com/pixelpioneers .parent { overflow: hidden; overflow-x: auto; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-behavior: smooth; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .parent::-webkit-scrollbar { display: none } .parent > * { scroll-snap-align: start }
75. twnsnd.com/pixelpioneers
76. twnsnd.com/pixelpioneers Progressive Enhancement ~10 lines of CSS Zero JavaScript Poly fi lled with Intersection Observer Scroll-Linked Animation (Position: Support) IMPLEMENTATION EN-ROUTE!
77. twnsnd.com/pixelpioneers @supports (scroll-timeline: --name inline) { @keyframes fade-in { 0% { opacity: 0 } 1% { opacity: 1 } } scrollable-element { scroll-timeline: --scroll-shadow inline; } scrollable-element .scroll-shadow-inline-start, scrollable-element .scroll-shadow-inline-end { animation: auto fade-in linear forwards; animation-timeline: --scroll-shadow; } scrollable-element .scroll-shadow-inline-end { animation-direction: reverse; } }
78. twnsnd.com/pixelpioneers if (!CSS.supports("(scroll-timeline: --name inline)")) { customElements.define("scroll-indicator", ScrollIndicator) if (window.matchMedia("(min-width: 1024px)").matches) { customElements.define("scroll-shadow", ScrollShadow) } }
79. twnsnd.com/pixelpioneers
80. twnsnd.com/pixelpioneers View Transitions
81. twnsnd.com/pixelpioneers SPAs are a big trade-o ff just for page transitions
82. twnsnd.com/pixelpioneers Nobody likes having their toys taken away
83. twnsnd.com/pixelpioneers Progressive Enhancement As little as 3 lines of HTML CSS Zero JavaScript GPU-accelerated Cross-document Transitions Position UNKNOWN POSITIVE, COMING SOON This WEEK!
84. twnsnd.com/pixelpioneers <!-- HTML: deprecated --> <meta name="view-transition" content="same-origin" /> /* CSS: Chrome 126+ */ @view-transition { navigation: auto; }
85. twnsnd.com/pixelpioneers view-transition-name: my-element
86. twnsnd.com/pixelpioneers ::view-transition-old(my-element) { animation: fade 0.3s ease forwards } ::view-transition-new(my-element) { animation: fade 0.3s ease reverse } @keyframes fade { from { opacity: 1 } to { opacity: 0 } }
87. twnsnd.com/pixelpioneers
88. twnsnd.com/pixelpioneers Progressive Enhancement ~5 lines of JavaScript (inc. fallback) Customise with CSS GPU-accelerated Single-document Transitions (POSITIVE, COMING)
89. twnsnd.com/pixelpioneers function navigateWithTransition(callback) { // fallback if (!document.startViewTransition) { callback() return } document.startViewTransition(callback) }
90. twnsnd.com/pixelpioneers Speculation Rules POSITION: PENDING See: https://developer.chrome.com/docs/web-platform/prerender-pages#speculation-rules-api
91. twnsnd.com/pixelpioneers <script type="speculationrules"> { "prerender": [ { "urls": ["/next"] }, { "where": { "href_matches": "/products/*" }, "eagerness": "moderate" } ] } </script> See: https://developer.chrome.com/docs/web-platform/prerender-pages#speculation-rules-api
92. twnsnd.com/pixelpioneers As close to instant as possible Zero JavaScript, just inline JSON or via header Standard HTTP caching headers apply Exposed to analytics via request headers Managed by browser (e.g. battery/data saver modes) Speculation Rules
94. twnsnd.com/pixelpioneers
95. twnsnd.com/pixelpioneers Navigation API (BUGS OPEN, IN DEV)
96. twnsnd.com/pixelpioneers Manually attach submit/click event listeners Manually implement loading feedback Manually announce page changes Manually manage scroll position History API
97. twnsnd.com/pixelpioneers navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler() { const content = await loadContent(event.destination.url) renderContent(content) } }) })
98. twnsnd.com/pixelpioneers navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler() { const content = await loadContent(event.destination.url) document.startViewTransition(() => renderContent(content)) } }) })
99. twnsnd.com/pixelpioneers Decoupled from the DOM Native browser loading state Native accessibility technology integration Handles restoring scroll position for you Navigation API
100. twnsnd.com/pixelpioneers Use the Web Platform, don’t reimplement it
101. twnsnd.com/pixelpioneers How’re those stats looking?
102. twnsnd.com/pixelpioneers 55,000 lines of JavaScript 55,000 650 lines of JavaScript
103. twnsnd.com/pixelpioneers
104. twnsnd.com/pixelpioneers source: https://www.rumvision.com/tools/core-web-vitals-history/
105. twnsnd.com/pixelpioneers source: https://www.rumvision.com/tools/core-web-vitals-history/
106. twnsnd.com/pixelpioneers 1. Know your audience 2. Don’t limit yourself to fully-adopted features 3. Consider the standard positions of browsers, not just support 4. Consider the maturity of standards 5. Consider how far back and how wide your poly fi lls need to go
107. twnsnd.com/pixelpioneers “You don't need to have extraordinary e ff ort to achieve extraordinary results. You just need to do the ordinary, everyday things exceptionally well.” — Warren Bu ff et
108. twnsnd.com/pixelpioneers THANK YOU!