Choosing wisely: SPA vs HTMX for your next web project

As web developers, we want to select the right architecture pattern for our projects. Web applications are inherently complex, and your choice will affect how you manage that complexity.

Choosing a SPA pattern offers rich user experiences with rich interactivity and navigational transitions, but it also introduces complexity in state management, development cost, maintenance, security, and performance.

On the other hand, server-rendered applications have been around for decades and have, until recently, struggled to match the user experience of SPAs. However, thanks to the evolution of browser standards and a crop of lightweight JavaScript frameworks, server-rendered apps have caught up and are once again a compelling option.

By the end of this talk, attendees can confidently choose when to use a SPA or server-rendered pattern based on their project's needs and constraints. They will identify the trade-offs between complexity, performance, and user experience, enabling them to deliver high-quality web applications efficiently and effectively.

Transcript

1. everyday superpowers Choosing wisely: SPA vs. HTMX for Your Next Web Project
2. everyday superpowers Photo by Dmitriy Demidov on Unsplash
3. everyday superpowers
4. everyday superpowers —Thoughtworks SPAs incur complexity that… teams blindly accept by default even when business needs don’t justify it. Source: https://www.thoughtworks.com/radar/techniques/spa-by-default
5. everyday superpowers —Thoughtworks Source: https://www.thoughtworks.com/radar/techniques/spa-by-default “Some developers aren't aware of an alternative approach because they've spent their entire career in a framework like React.”
6. everyday superpowers Alex Russell https://infrequently.org
7. everyday superpowers —Alex Russell “The SPA pattern promised better user experiences but has utterly failed to deliver on that promise… These… stacks have proven to be expensive duds.” Source: https://infrequently.org/2023/02/the-market-for-lemons/
8. everyday superpowers Single Page Application (SPA)
9. everyday superpowers Single Page Application (SPA) Save
10. everyday superpowers This is not an anti- JavaScript talk
11. everyday superpowers This is about patterns
12. everyday superpowers Hi, I’m Chris May! Python technical coach https://everydaysuperpowers.dev
13. everyday superpowers Outline • Three options • Focus on SPAs • Reducing complexity • A new pattern • Success stories
14. everyday superpowers Location of data Server Client Length of session Short Long Static HTML Progressive Enhancement Single Page App Source: https://infrequently.org/2024/08/caprock/ Refresh for updates Ajax-powered partial updates Optimistic commits
15. everyday superpowers Progressive Enhancement • The website works when JavaScript is not initialized (as the page is loading) or disabled. • As JavaScript components or scripts initialize, they enhance the experience. Source: https://www.gov.uk/service-manual/technology/using-progressive-enhancement
16. everyday superpowers Outline • Three options (static HTML, Progressive enhancement, SPA) • Focus on SPAs • Reducing complexity • A new pattern • Success stories
17. everyday superpowers “Any system that puts JavaScript in the critical path starts at a disadvantage.” Source: https://infrequently.org/2024/08/caprock/ —Alex Russell
18. everyday superpowers “When using JavaScript you pay a performance tax no less than four times.” Source: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks —Tim Kadlec
19. everyday superpowers “The main thread is responsible for handling user input, style calculation, layout, and painting.” Source: https://timkadlec.com/remembers/2020-04-21-the-cost-of-javascript-frameworks —Tim Kadlec
20. everyday superpowers • Does the average session feature more than 20 updates to, or queries against, the same subset of global data? • Does this UI require features that naturally create long-lived sessions, and are those the site's primary purpose? • Is there a reason the experience can't be progressively enhanced? Source: https://infrequently.org/2024/08/caprock/ —Alex Russell When SPAs could be worth their weight:
21. everyday superpowers Outline • Three options (static HTML, Progressive enhancement, SPA) • Focus on SPAs (beware) • Reducing complexity • A new pattern • Success stories
22. everyday superpowers “A massive investment in controlling complexity is the only way to scale JS-driven frontends.” Source: https://infrequently.org/2023/02/the-market-for-lemons/ —Alex Russell
23. everyday superpowers “JavaScript bundles tend to grow without constraint in the development phase and can easily tip into territory that creates an unacceptable experience for users on slow devices.” Source: https://infrequently.org/2024/08/caprock/ —Alex Russell
24. everyday superpowers How the front-end is coping Front-end frameworks have been incorporating server-side rendered (SSR) components into their workflows • Pre-rendering • SSR with hydration • Streaming SSR • Progressive hydration Server-side rendering
25. everyday superpowers Katie Sylor-Miller’s “Component Islands” pattern Source: https://jasonformat.com/islands-architecture/
26. everyday superpowers Component Islands benefits: • Removing the need for a root JS component greatly reduces complexity. • The browser can handle most things without JS.
27. everyday superpowers What you return from the server { } JSON HTML
28. everyday superpowers Django Unicorn
29. everyday superpowers How Django-Unicorn works
30. everyday superpowers Outline • Three options (static HTML, Progressive enhancement, SPA) • Focus on SPAs (beware) • Reducing complexity (should always be our goal) • A new pattern • Success stories
31. everyday superpowers Streamed HTML Components
32. everyday superpowers Streamed HTML Components { } • Stream page loads • Components vary in complexity • Components talk to server • Server defaults to returning HTML • Cross-component communication via JS events
33. everyday superpowers Django Unicorn Datastar django-template-partials
34. everyday superpowers Outline • Three options (static HTML, Progressive enhancement, SPA) • Focus on SPAs (beware) • Reducing complexity (should always be our goal) • A new pattern (Streamed HTML components) • Success stories
35. everyday superpowers Sheena O’Connell CTO
36. everyday superpowers • Junior developers contribute meaningfully without significant oversight • Every developer got a significant productivity boost • Remote learners had improved accessibility, reduced network usage, and able to use older clients on lower- powered devices Sheena O’Connell CTO Source: https://www.sheenaoc.com/articles/2024-06-30-htmx
37. everyday superpowers • Transitioned from a SPA to Django-Components and HTMX • First load TTI dropped from 6 to 2 seconds • Even though they went from showing 50 items to up to 3,000 • Memory usage was nearly cut in half • Reduced the lines of code by over 90% • All team members felt empowered to tackle most tasks David Guillot Senior Developer Source: https://david.guillot.me/en/posts/tech/following-up-mother-of-all-htmx-demos/
38. everyday superpowers • Reduced the code base size by 61% • Developer velocity improved by at least 500% • Rather than prototyping in Figma, “UX development” is now done directly in HTML • This project is open source and available to examine the transition Source: https://www.linkedin.com/feed/update/urn:li:activity:7109116330770878464/
39. everyday superpowers Taylor Hunt “Making the world’s fastest website, and other mistakes” Source: https://dev.to/tigt/making-the-worlds-fastest-website-and-other-mistakes-56na
40. everyday superpowers
41. everyday superpowers
42. everyday superpowers Outline • Three options (static HTML, Progressive enhancement, SPA) • Focus on SPAs (beware) • Reducing complexity (should always be our goal) • A new pattern (Streamed HTML components) • Success stories