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

The Unbearable Weight of Massive JavaScript

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.

Ryan Townsend

May 25, 2023

More Decks by Ryan Townsend

Other Decks in Technology


  1. 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
  2. • 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
  3. “Only 9% of businesses think they receive a poor ROI

    on their marketing technology spend.” - Storyblok
  4. “Technical mastery implies a high ratio of value shipped to

    hours worked.” - Addy Osmani, Google
  5. • Accessibility • Performance • Usability • Talent Availability, Cost

    & Retention • Maintainability • Security • Reliability / Robustness • Onboarding & Training
  6. “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?”
  7. “Consider users over authors over implementors over speci f iers

    over theoretical purity” - W3C HTML Design Principles
  8. “42% [of consumers] say they decide whether to stay on

    or leave a website within 10 seconds - 20% within 5 seconds” - Storyblok
  9. Input Long-running Event Handler Render & Paint Interaction to Next

    Paint Input (2) Interaction to Next Paint (2) Input Delay
  10. “Do we need this to be an SPA?” - Too

    few people in the past 10 years* *🌶
  11. 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
  12. ⌚ 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): 
  13. ::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 } }
  14. navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async handler()

    { const content = await loadContent(event.destination.url) renderContent(content) } }) })
  15. .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 }
  16. @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; } }
  17. 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)
  18. 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)
  19. ✅ Progressive Enhancement * ✅ No dependencies ✅ No build

    pipeline ✅ Can even make custom form elements!
  20. • Push Noti f ications • Badging API • WebShare

    API • Anchor Positioning • Container Queries • Cascade Layers • Popover API • Deferred Fetch • Internationalisation • Web Workers • OffscreenCanvas • WASM • WebGPU
  21. ✅ 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