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
   

   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