As is common when people rant about SPAs, your dislike (at least as written here) is not actually about SPAs but other things
> Works terrible in bad networks
Yes, software traditionally works shitty under bad network conditions unless the developer actively tests under bad network conditions or has previous experience of handling bad network conditions. This is as much true for anything developed ever that touches a network.
> the shifting of images
This is simply developers missing to add width and height attributes to their <img/> elements. This has been happening since the dawn of the <img/> element and is unlikely to disappear. Also has nothing to do with SPAs, same happens with server-rendered HTML.
> unless the developer actively tests under bad network conditions
> This is simply developers missing
That's the whole thing. SPA = state. It requires a lot of dev time to properly handle everything. With stateless applications, you can simply refresh your browser.
The sluggishness is not only because of bad network conditions, but it's multiplied by the huge application that has to be sent over the network, application initialization, and the many subsequent network requests.
> The sluggishness is not only because of bad network conditions, but it's multiplied by the huge application that has to be sent over the network, application initialization, and the many subsequent network requests.
A "huge" application can be broken up with code splitting/dynamic imports. Initialisation can be seeded with serverside data or saved in browser storage between pages.
The only semi-unavoidable part is the "subsequent network requests", but even these can be sped up with caching, batching, etc.
> It requires a lot of dev time to properly handle everything.
>Yes, software traditionally works shitty under bad network conditions
not everything is equally affected by bad network conditions, SPAs generally are very badly affected by bad network conditions, indeed what is a bad network condition for an SPA might be acceptable for a traditional static page.
SPAs can be built to work well offline. I've written them myself. There is nothing inherent in an SPA that make it poor at this, quite the opposite. SPAs have excellent tooling for offline use.
A SPA's network dependency or robustness totally depends on the product's design. Some types of applications lend well to offline first (anything where the user owns their content/data, todo, notes, documents, pictures, etc). Others are much more dependent on fresh data. Which pretty much means anything big enough it's unreasonable to replicate it to the device.
I'm a fan of "offline first" design and have been a proponent at various companies. To the point where I can build the feature in at very little additional cost if it is considered and decided in the design phase. Bolt-ons patterns are messy.
However, the reality is that very few customers see this as a significant advantage. Which means that it doesn't really translate to market success. If budget is the #1 priority I can't in good conscience advocate for offline first unless it's going to offer a significant win for the company somewhere.
I’m asking this from a genuine place of curiosity, because last time I checked a few years ago the answer was “terrible”. Has the “save a file locally and load it again later” story for SPAs improved any?
I have implemented plenty of SPA (for years) that use the pattern of A) allow the user to download their current state as JSON/EDN and then B) allow the user to upload a new state from JSON/EDN file and continue from where they last downloaded their state.
This has been easy to implement for as long as I can remember, so not sure why'd you say it's terrible. What stopped you previous times?
Ok, so that’s kind of what I figured was the current state of things. Compared to being able to hit “Save” and have a local copy updated, that’s a pretty subpar workflow. I get why it’s like that (preventing a sandboxed website from being about to update files on the local filesystem) but...
Why do you write <img/> in authoritative tone? It's not 2000 anymore where we pretended XHTML or polyglot HTML is a thing. It's particularly odd to see that old cargo cult idiom (or, worse, with additional random spaces) used in a post lecturing users about HTML5-era SPA supremacy.
? What's wrong with XHTML? <img /> is clearer than <img> for anyone familiar with XML, and XHTML documents are easier to parse (e.g. can be processed with XSLT stylesheets).
Nothing wrong with XHTML per se (did an internal site using XSLT in early/mid 2000s), but XML/XHTML has been on the way out for the better part of this millenium on the web at least. If you're developing web content and/or browser apps, you should know HTML IMO, and XML is the least of your concerns. Not looking forward to apps mixing XSLT and JavaScript ;)
Can't stand "<bla />" though with that pointless/clueless space. The only place where I've encountered these are older JSP, FreeMarker, or Thymeleaf/Spring MVC apps (ugh).
JSX (React's default markup language) expects all tags to be closed, and self closing tags are valid. If you spend a significant time writing React apps (with JSX) then it becomes pretty second nature to write self closing tags. It's not exactly XHTML (I can't think of any other of XHTML's idioms it uses).
I suspected that too, but I do not know enough about these reactive frameworks to be 100% sure. But as a user of such apps, it is absolutely frustrating.
To stop jumping you need to explicitly size yet-to-load sections. Without JS this means giving images explicit sizing, with JS this means any section can be dynamically loaded and, therefore, jump. So good design takes into account dynamic loading and places size bounds accordingly.
Reactive libraries/frameworks don't explicitly make this worse or better, except their presence implies a high chance of dynamic loading and, therefore, more opportunity for bad design. In addition most component libraries fail to communicate /who/ needs to size a component and if it is ever dynamic. It really doesn't help that most 'official' examples fail to resolve these issues.
A truly intolerable thing about SPAs and JavaScript is that regular HTTP caching of images and fonts had to be limited because JS APIs can be and are used for fingerprinting, driving the whole web thing ad absurdum.
Switching off JS/fingerprinting doesn't really help either since it'll just disproportionally benefit Google's stronghold on web analytics even more.
Fingerprinting is not just JS. Fingerprinting is possible just using CSS rules alone.
The bigger issue, which seems to be what you are complaining about seems to be the gaping hole in privacy provided by 3rd party storage/resources. That is not a particular problem with SPAs, and can even be exploited without JavaScript.
I'm not sure where you're coming from regarding Google and web analytics. When 3rd party storage is gone (or partitioned) it sounds like everyone would be on the same page in terms of what data they can collect.
So much truth, not once I was trying to click on some image that had link underneath, and it suddenly moved to some other place and I ended clicking something different.
> Works terrible in bad networks
Yes, software traditionally works shitty under bad network conditions unless the developer actively tests under bad network conditions or has previous experience of handling bad network conditions. This is as much true for anything developed ever that touches a network.
> the shifting of images
This is simply developers missing to add width and height attributes to their <img/> elements. This has been happening since the dawn of the <img/> element and is unlikely to disappear. Also has nothing to do with SPAs, same happens with server-rendered HTML.