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
Tweet

More Decks by Ryan Townsend

Other Decks in Technology

Transcript

  1. The Unbearable Weight of
    Massive JavaScript
    Infoshare 2023
    @ryantownsend
    Slides: twnsnd.com/infoshare2023

    View Slide

  2. Today’s mission:
    Embrace the Web Platform

    View Slide

  3. First, some context

    View Slide

  4. I am

    img.png { behavior: url(png.htc) }


    years old

    View Slide

  5. View Slide

  6. I ❤ the web

    View Slide

  7. Real-world Projects
    VC-backed Web
    Framework Demos

    View Slide

  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

    View Slide

  9. Trickle-down User Experience

    View Slide

  10. Developer Experience Convenience

    View Slide

  11. “92% [of businesses] think their website’s
    poor user experience is costing them sales”
    - Storyblok

    View Slide

  12. We can do better… right?

    View Slide

  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

    View Slide

  14. “Only 9% of businesses think they receive a
    poor ROI on their marketing technology spend.”
    - Storyblok

    View Slide

  15. The JavaScript burden

    View Slide

  16. “Technical mastery implies a high ratio of


    value shipped to hours worked.”
    - Addy Osmani, Google

    View Slide

  17. View Slide

  18. Productivity > `npm install`

    View Slide

  19. • Accessibility


    • Performance


    • Usability


    • Talent Availability, Cost & Retention


    • Maintainability


    • Security


    • Reliability / Robustness


    • Onboarding & Training

    View Slide

  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?”

    View Slide

  21. If all you have is a hammer,


    everything starts to look like a nail.

    View Slide

  22. “Of
    f
    icers Eat Last”
    US Army

    View Slide

  23. “Consider users over authors over implementors
    over speci
    f
    iers over theoretical purity”
    - W3C HTML Design Principles

    View Slide

  24. Developers Eat Last

    View Slide

  25. “42% [of consumers] say they decide whether to stay on or
    leave a website within 10 seconds - 20% within 5 seconds”
    - Storyblok

    View Slide

  26. Source: Web Almanac 2022

    View Slide

  27. Source: Web Almanac 2022

    View Slide

  28. Source: Web Almanac 2022

    View Slide

  29. So what are we missing?

    View Slide

  30. First Input Delay

    View Slide

  31. ❌ Soft navigations


    🤫 Delaying execution

    View Slide

  32. Interaction to Next Paint (INP)
    Coming March
    2024

    View Slide

  33. Source: Web Almanac 2022

    View Slide

  34. Source: Tim Kadlec / CrUX Report

    View Slide

  35. View Slide

  36. 🖱 Click


    ☝ Tap


    ⌨ Keypress
    ✅ Feedback

    View Slide

  37. ⏳ Browser state


    🔄 Loading spinner


    🔤 Typed letter

    View Slide

  38. 1. Long-running event handlers


    2. Long tasks


    3.Complex rendering / painting

    View Slide

  39. Input
    Long-running Event Handler
    Render & Paint
    Interaction to Next Paint

    View Slide

  40. Input Long-running Event Handler
    Render & Paint
    Interaction to Next Paint
    Input (2)
    Interaction to Next Paint (2)
    Input Delay

    View Slide

  41. Yield Yield Yield Yield Yield Yield
    Input

    View Slide

  42. async function yieldToMain() {


    if (scheduler?.yield) return scheduler.yield()


    return new Promise(resolve => { setTimeout(resolve, 0) })


    }

    View Slide

  43. Lightening the load

    View Slide

  44. “Do we need this to be an SPA?”
    - Too few people in the past 10 years*
    *🌶

    View Slide

  45. Tell me you’ve migrated to an SPA


    without telling me you’ve migrated to an SPA

    View Slide

  46. HTML or JSON: we always render

    View Slide

  47. With SPAs, we render twice

    View Slide

  48. SPAs forgo streaming

    View Slide

  49. SPA, MPA, CSR, ESR, SSR, SSG


    It doesn’t need to be one or the other

    View Slide

  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

    View Slide

  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

    View Slide

  52. “It should be more app-like”
    - No actual end-user, ever*
    *🌶

    View Slide

  53. I know, you still want that app feel

    View Slide

  54. Platform APIs

    View Slide

  55. View Transitions
    SPA: Chrome 111+ (1st March), MPA: Chrome Canary only

    View Slide

  56. Animation in JavaScript is demanding

    View Slide

  57. SPAs are a burden just for page transitions

    View Slide

  58. ✅ Progressively enhanced


    ✅ GPU-accelerated


    ✅ Zero JavaScript (in MPA version)


    ✅ Native browser loading feedback

    View Slide


  59. View Slide

  60. View Slide

  61. view-transition-name: my-element

    View Slide

  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 }


    }

    View Slide

  63. View Slide

  64. function navigateWithTransition(data) {


    // fallback


    if (!document.startViewTransition) {


    updateDOM(data)


    return


    }


    document.startViewTransition(() => updateDOM(data))


    }

    View Slide

  65. Navigation API
    Chromium browsers only (102+, May 2022)

    View Slide

  66. link.addEventListener(‘click’, …)


    form.addEventListener(‘submit’, …)

    View Slide

  67. history.pushState(…)

    View Slide

  68. spinner.hidden = false

    View Slide

  69. window.scrollTo(🤷)

    View Slide

  70. ✅ Progressive enhancement


    ❌ No browser-level loading feedback


    👎 Manual scroll-handling


    👎 Events coupled to DOM

    View Slide

  71. navigation.addEventListener(‘navigate’, …)

    View Slide

  72. navigation.addEventListener("navigate", (event) => {


    if (!event.canIntercept) return




    event.intercept({


    async handler() {


    const content = await loadContent(event.destination.url)


    renderContent(content)


    }


    })


    })

    View Slide

  73. ✅ Progressive enhancement


    ✅ Native browser loading feedback


    ✅ Scroll-handling


    ✅ Decouples navigation from DOM

    View Slide

  74. Scroll Snapping
    Supported everywhere

    View Slide

  75. ✅ Progressively enhanced


    ✅ GPU-accelerated


    ✅ Zero JavaScript


    ✅ ~10 lines of CSS

    View Slide

  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 }

    View Slide

  77. View Slide

  78. Scroll-linked Animation
    Chrome 115+ (July 12th)

    View Slide

  79. ✅ Progressively enhanced


    ✅ GPU-accelerated


    ✅ Zero JavaScript


    ✅ ~10 lines of CSS

    View Slide

  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;


    }


    }


    View Slide

  81. Custom Elements
    Supported everywhere

    View Slide


  82. View Slide

  83. “2% of sites use Custom Elements”
    Web Almanac 2022

    View Slide


  84. View Slide

  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)

    View Slide

  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)


    View Slide

  87. if (window.matchMedia("(min-width: 1024px)").matches) {


    if (!CSS.supports("(scroll-timeline: --name inline)")) {


    customElements.define("scroll-shadow", ScrollShadow)


    }


    }

    View Slide

  88. ✅ Progressive Enhancement *


    ✅ No dependencies


    ✅ No build pipeline


    ✅ Can even make custom form elements!

    View Slide




  89. Submit











    Submit






    View Slide







  90. View Lightbox











    View Lightbox



    View Slide

  91. my-element {


    color: red;


    }


    my-element:defined {


    color: green;


    }

    View Slide

  92. CSS Toggles

    View Slide

  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

    View Slide

  94. Outcome

    View Slide

  95. View Slide

  96. View Slide

  97. 55,000 to 650 lines of JavaScript

    View Slide

  98. Takeaways

    View Slide

  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

    View Slide

  100. Thank you
    Reach me @ryantownsend & LessonsofaCTO.com
    Infoshare 2023 Slides: twnsnd.com/infoshare2023

    View Slide