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

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

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.

Ryan Townsend

June 13, 2024
Tweet

More Decks by Ryan Townsend

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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!
  7. 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
  8. 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
  9. 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
  10. 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>
  11. 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)
  12. twnsnd.com/pixelpioneers class MyCustomElement extends HTMLElement { static get observedAttributes() {

    return ["my-attribute"] } attributeChangedCallback(name, oldValue, newValue) { // action attribute changes } }
  13. 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) } }
  14. 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
  15. 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 }
  16. 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!
  17. 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; } }
  18. 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!
  19. 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 } }
  20. twnsnd.com/pixelpioneers Progressive Enhancement ~5 lines of JavaScript (inc. fallback) Customise

    with CSS GPU-accelerated Single-document Transitions (POSITIVE, COMING)
  21. 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
  22. 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
  23. twnsnd.com/pixelpioneers Manually attach submit/click event listeners Manually implement loading feedback

    Manually announce page changes Manually manage scroll position History API
  24. twnsnd.com/pixelpioneers navigation.addEventListener("navigate", (event) => { if (!event.canIntercept) return event.intercept({ async

    handler() { const content = await loadContent(event.destination.url) renderContent(content) } }) })
  25. 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)) } }) })
  26. twnsnd.com/pixelpioneers Decoupled from the DOM Native browser loading state Native

    accessibility technology integration Handles restoring scroll position for you Navigation API
  27. 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
  28. 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