Single Page Apps

Manuel Matuzović´s article Why I’m not the biggest fan of Single Page Applications resonates in many ways. Single Page Apps (SPAs)^[1] are a fragile way of rendering content to a user. Using JavaScript on the main thread of the browser to create the HTML that will be rendered into what the user will see, is not what I would call straight forward. If a tiny thing goes wrong with the JavaScript, the entire frontend might not be operational anymore. It´s a very engineered – maybe overengineered – way for doing what the web is for: Rendering HTML pages.

Manuel is more differentiated. The quick notes:

• Performance is not ideal. There has been a lot of criticism^[2] early on because SPAs just don’t perform as well as thought leaders at Meta or Vercel used to make you think. To compare the performance of your website against others, try lightest.app.^[3][4]
• Complexity is high. Setting up a SPA from scratch is not simple, it involves many tedious steps. Even if you use one of the boilerplate setups, you’re handling a compound dependency monster that just waits to ruin your day because one tiny detail doesn’t work out of the box the way you want it. There’s so much complexity in these things that it makes some people doubt whether it’s worth the effort and if it’s not maybe smarter to spend the time working on something else, something that actually benefits users.
• SPA page navigation is inaccessbile by design.^[5] In a Single Page Application, you create only one HTML document and you replace the main content of the page when the user clicks a link. […] DOM content changes, focus is still on the link, the title in the browser tab doesn’t change, and a screen reader announces nothing. If you’re lucky, you know what happened, that something happened, and where you are. If you’re a blind screen reader user, you’ll most likely get no feedback at all. […] The more JavaScript we add to our page, the more fragile our interface gets and the more we have to manage and communicate manually, if we want to create equal experiences for all.
• The document and HTML structure moves out of focus. In SPAs, you create components. A component might be part of another component, and another component until it finally ends up in the wrapper <div> of your index.html. If you look at the final document of most SPAs, the page doesn’t look like a coherent entity, but more like a dump for components that happen to form a page visually.

Manuel is also referencing The market for lemons^[6] by Alex Russel, who is a Microsoft Partner on the Edge team. The text is a rant but nevertheless, especially the Sandy Foundations section is interesting to read.