I found myself wondering what technology stack to use for this site.
I’ve recently been working within Ruby on Rails, however my perception within the private sector, is this is not a Frontend web framework that is usually considered an option (I’m not entirely sure why).
Realistically, this site doesn’t even need to even use an single-page application (SPA) framework but learning-wise I felt I wanted to use some type of SPA.
I was looking at React as an obvious option but I wanted it to be accessible as possible out-of-the-box. With React, I started to notice some issues. This isn’t an anti-React post by any means, it’s more of a “here is what I’ve learnt in the context of React and Accessibility and why I chose Svelte.”
React doesn’t handle page titles in an accessible way without additional work. Typically when a user changes page, the page title is read-out-loud through a screen reader as the page is reloaded. However with React, as this is a SPA that does routing, this doesn’t happen quite the same. There’s some additional work or a plugin that’s needed.
Additionally, focus management appeared a bit more complicated as well. Should a keyboard user need to navigate correctly, there’s a host of plugins and techniques that need to be considered.
I also wanted progressive enhancement to “just work”.
What this means is if JavaScript is disabled or doesn’t load, the project will still render and work - to a point. Many users and use cases require a project to work without JavaScript, additionally it makes a project more robust. Give it a try, disable JS on this site to see this in action.
React (and React frameworks) have re-branded progressive enhancement, calling this server side rendering (SSR). By default progressive enhancement is not active within React. Some of the React frameworks have started to introduce progressive enhancement citing the benefits, like faster initial page load and enhanced performance on low-end devices.
I recently watched a documentary on the origins of React. It’s a really fascinating watch, however I think it might be fair to say that accessibility and disabled users were not necessarily at the forefront of priorities when this technology was created.
Enter Svelte
Svelte and Sveltekit was created later and after reviewing some of the features I started to feel it met of a lot of my requirements.
- Svelte handles page titles in accessible way with route announcements
- Progressive enhancement is setup ”out-of-the-box”
- Focus management was considered and is easier to control without plugins
Also, this is just a preference, but syntax wise it follows the same concepts that VueJS introduced. Namely, writing HTML CSS and JS just within the Svelte system rather than everything being written in a different syntax - JSX.
Side note, I also read an article titled “the Great Gaslighting of the JavaScript Era” which makes a lot of interesting points that I don’t feel are shared or explored widely, if at all.
Of course, there are many reasons behind choosing a technology including the ecosystem, plugins, integrations, hiring and long-term investment. However these are just some of my reasons for choosing Svelte for this project.