The Unbearable Weight of Massive JavaScript

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 unparalleled opportunity to give our users a fantastic experience – the web platform has never been more capable than it is today.

Let’s look at upcoming Core Web Vitals to identify performance problems with our JavaScript, how we can simplify our web architecture and utilise new Web Platform APIs to get back to productively building maintainable, user-friendly front-ends.

Transcript

1. The Unbearable Weight of Massive JavaScript Infoshare 2023 @ryantownsend Slides: twnsnd.com/infoshare2023
2. Today’s mission: Embrace the Web Platform
3. First, some context
4. I am 
 img.png { behavior: url(png.htc) } years old
6. I ❤ the web
7. Real-world Projects VC-backed Web Framework Demos
8. Independent Reviews Myrtie Virgo Freda Gage Anna Sappington Lambert Yount Anselma Suess Urgency Messaging Jean-Pierre San Nicolás Mitzi Christians Sharalyn Watson Sévère Leroy Topsy Merchant Remarketing Siem Tremble Marloes Simón Cordell Wyndham Evelin Emmett Nick Masterson Analytics Yasmine Marcos Daniel Seward Detlev Pauwels Thomasina Coleman Demi Jaeger Live Chat Rens Abbingh Ola Dreier Ottoline Parish Diego Hubert Sylvestre Parra Loyalty Programme Aris Koole Hipolit Leclair Harlan Kirch Julienne Taylor Manuel Dabney Newsletter Sign-up Kade Kijek Ria Pape Stanford Stein Sjoerd Ridge Kiana Abrahams Consent Management Blaire Heijmans Willy Aalders Linsey Wagner Kit Boucher Flora Womack Search Milou Rietveld Elyzabeth Sharrow Maralyn Hurst Kyriaki Nosek Braxton Hiedler Session Recording Sheryll Jephson Iggy Abbott Darío Braddock Mannes Arterberry Lizbeth Marín Social Integration Xenia Van 't Hout Jayne Roux Estefanía Horton Amelia Meeuwes Lesley Adamczak Ad Serving Kandace Constable Maya Combs Madyson Summer f ield Thelma Wragge Juanito Kistner
9. Trickle-down User Experience
10. Developer Experience Convenience
11. “92% [of businesses] think their website’s poor user experience is costing them sales” - Storyblok
12. We can do better… right?
13. • Janky 2fps sliders • Static landing pages with 2.5mb of JavaScript • Broken add-to-cart from tracking dependencies • Login forms broken because an arbitrary third-party is of f line • Single Page Apps that in f inite loop due to a JSON parsing error • Menus that disappear before you can hover over them • Cookie permission and live chat and newsletter sign-up and get 10% off your f irst order
14. “Only 9% of businesses think they receive a poor ROI on their marketing technology spend.” - Storyblok
15. The JavaScript burden
16. “Technical mastery implies a high ratio of value shipped to hours worked.” - Addy Osmani, Google
18. Productivity > `npm install`
19. • Accessibility • Performance • Usability • Talent Availability, Cost & Retention • Maintainability • Security • Reliability / Robustness • Onboarding & Training
20. “To me it only matters what companies are hiring for. That’s why I keep using it.” Top-voted Reddit response to “why are you still using React in 2023?”
21. If all you have is a hammer, everything starts to look like a nail.
22. “Of f icers Eat Last” US Army
23. “Consider users over authors over implementors over speci f iers over theoretical purity” - W3C HTML Design Principles
24. Developers Eat Last
25. “42% [of consumers] say they decide whether to stay on or leave a website within 10 seconds - 20% within 5 seconds” - Storyblok
26. Source: Web Almanac 2022
27. Source: Web Almanac 2022
28. Source: Web Almanac 2022
29. So what are we missing?
30. First Input Delay
31. ❌ Soft navigations 🤫 Delaying execution
32. Interaction to Next Paint (INP) Coming March 2024
33. Source: Web Almanac 2022
34. Source: Tim Kadlec / CrUX Report
36. 🖱 Click ☝ Tap ⌨ Keypress ✅ Feedback
37. ⏳ Browser state 🔄 Loading spinner 🔤 Typed letter
38. 1. Long-running event handlers 2. Long tasks 3.Complex rendering / painting
39. Input Long-running Event Handler Render & Paint Interaction to Next Paint
40. Input Long-running Event Handler Render & Paint Interaction to Next Paint Input (2) Interaction to Next Paint (2) Input Delay
41. Yield Yield Yield Yield Yield Yield Input
42. async function yieldToMain() { if (scheduler?.yield) return scheduler.yield() return new Promise(resolve => { setTimeout(resolve, 0) }) }
43. Lightening the load
44. “Do we need this to be an SPA?” - Too few people in the past 10 years* *🌶
45. Tell me you’ve migrated to an SPA without telling me you’ve migrated to an SPA
46. HTML or JSON: we always render
47. With SPAs, we render twice
48. SPAs forgo streaming
49. SPA, MPA, CSR, ESR, SSR, SSG It doesn’t need to be one or the other
50. 1. HTML- f irst 2. Statically pre-rendered, if possible 3.Rendered on-demand, if not 4.Served from close to the user 5. Only reaching for JS to f ill the gaps
51. ⌚ Static Site Generation (SSG): 
 Landing Pages, Product Detail Pages 🔍 Edge Side Rendering (ESR): 
 Product Listing Pages, Search 🛒 Server Side Rendering (SSR): 
 Cart 💳 Client Side Rendering (CSR): 
 Checkout
52. “It should be more app-like” - No actual end-user, ever* *🌶
53. I know, you still want that app feel
54. Platform APIs
55. View Transitions SPA: Chrome 111+ (1st March), MPA: Chrome Canary only
56. Animation in JavaScript is demanding
57. SPAs are a burden just for page transitions
58. ✅ Progressively enhanced ✅ GPU-accelerated ✅ Zero JavaScript (in MPA version) ✅ Native browser loading feedback
59. <meta name="view-transition" content="same-origin" />
61. view-transition-name: my-element
62. ::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 } }
64. function navigateWithTransition(data) { // fallback if (!document.startViewTransition) { updateDOM(data) return } document.startViewTransition(() => updateDOM(data)) }
65. Navigation API Chromium browsers only (102+, May 2022)
66. link.addEventListener(‘click’, …) form.addEventListener(‘submit’, …)
67. history.pushState(…)
68. spinner.hidden = false
69. window.scrollTo(🤷)
70. ✅ Progressive enhancement ❌ No browser-level loading feedback 👎 Manual scroll-handling 👎 Events coupled to DOM
71. navigation.addEventListener(‘navigate’, …)
72. navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler() { const content = await loadContent(event.destination.url) renderContent(content) } }) })
73. ✅ Progressive enhancement ✅ Native browser loading feedback ✅ Scroll-handling ✅ Decouples navigation from DOM
74. Scroll Snapping Supported everywhere
75. ✅ Progressively enhanced ✅ GPU-accelerated ✅ Zero JavaScript ✅ ~10 lines of CSS
76. .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 }
78. Scroll-linked Animation Chrome 115+ (July 12th)
79. ✅ Progressively enhanced ✅ GPU-accelerated ✅ Zero JavaScript ✅ ~10 lines of CSS
80. @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; } }
81. Custom Elements Supported everywhere
82. ✋
83. “2% of sites use Custom Elements” Web Almanac 2022
84. ✋
85. 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)
86. class MyCustomElement extends HTMLElement { static get observedAttributes() { return ["my-attribute"] } attributeChangedCallback(name, oldValue, newValue) { // action attribute changes } // define accessor/mutator (optional) get myAttribute() { this.getAttribute("my-attribute") } set myAttribute(newValue) { this.setAttribute("my-attribute", newValue) } } customElements.define("my-custom-element", MyCustomElement)
87. if (window.matchMedia("(min-width: 1024px)").matches) { if (!CSS.supports("(scroll-timeline: --name inline)")) { customElements.define("scroll-shadow", ScrollShadow) } }
88. ✅ Progressive Enhancement * ✅ No dependencies ✅ No build pipeline ✅ Can even make custom form elements!
89. <form is="my-element"> <button type="submit">Submit</button> </form> <my-element> <form> <button type="submit">Submit</button> </form> </my-element>
90. <!-- before --> <button onclick="document.getElementById('dialog').showModal()"> View Lightbox </button> <!-- after --> <button opens="dialog"> View Lightbox </button>
91. my-element { color: red; } my-element:defined { color: green; }
92. <details> CSS Toggles <dialog>
93. • Push Noti f ications • Badging API • WebShare API • Anchor Positioning • Container Queries • Cascade Layers • Popover API • Deferred Fetch • Internationalisation • Web Workers • OffscreenCanvas • WASM • WebGPU
94. Outcome
97. 55,000 to 650 lines of JavaScript
98. Takeaways
99. ✅ Be mindful of what you’re building – avoid over-engineering ✅ Consider the wider impact of your work ✅ Don’t get too attached to your tools, get attached to outcomes ✅ Bet on the Web Platform: it’ll outlive in-vogue frameworks ✅ Build for robustness: fail well, sleep better
100. Thank you Reach me @ryantownsend & LessonsofaCTO.com Infoshare 2023 Slides: twnsnd.com/infoshare2023