Single-Page Application

Anyone that builds a SPA and breaks opening in new tab or history caching and back/forward nav isn't a good frontend developer (or lacks experience, which is something that's fixable!). These have been solved problems for a long time.
- I mean, for sure, and this meme isn't trying to say that all SPAs are bad. But defaults matter, even for experts.
  This meme was inspired after I had to use an SPA, which among those points in the meme, also broke using Alt+Left to navigate back. The normal back-button worked (even if it then had to load for ten seconds to re-display static content).
  Which is just a typical example to me. You don't even need much expertise to figure out why Alt+Left is broken. But you have to think of testing Alt+Left, because it's broken by default.
  
  My friend I've been using the Internet for 27 years and developing for it for most of that time and I can promise you I've never once hit Alt+Left
  
  Just here representing the Cmd+[ gang
- I’m guessing they aren’t using Vue, React, or similar, and they’re rolling their own for some reason.
  
  React doesn't handle any of this stuff out-of-the-box; it's just a UI library.
- Conversly a lot of static websites break new tab by incorrectly slapping target="_blank" on anchors. Luckily Lemmy doesn’t mess this up.
  
  I maintain a couple of Wordpress installations for clients, where new link targets are the same page, as you'd expect.
  They still, somehow, manually check "link opens in new tab". I don't know why some of these boomers are allowed to use computers, I swear.
- If your SPA website is done correctly the end user won't even notice and none of the bad things listed in this meme happen.

I FUCKING LOVE STATIC HTML PAGES
I LOVE NOT HAVING TO RELY ON SCRIPTS TO DISPLAY CONTENT
- Welcome to our homepage! We have implemented the navigation menu in Adobe Flash Player to maximize your audio visual experience.
  
  that's some PTSD comment right there, I'm getting flashbacks.

These things are true if you build a SPA wrong. Believe it or not there are lots of ways to build server side rendered pages wrong too.
- Yeah this meme and the OP have no idea how to build an SPA.
  
  I don't know what the hell you're interpreting into this 15-word-meme, but I do. I'm not saying all SPAs are shit, I'm saying far too many are. And "far too many" being more than one that I can think of. Even the Lemmy webpage breaks history caching.
  
  I know what an SPA is, but I would be laughing so hard at this thread if I didn’t know what it meant.
  “Yeah man. Dude doesn’t know his SPAs!”
  Reminds me of that Saturday Night Live skit with the woodworkers comparing everything to working on the lathe.
- implying there's a "right way" to build an SPA.
  
  There are a lot of standard practices like… using a router to load the content of your SPA according to the url.
  
  There's no one right way. Saying there are wrong ways doesn't imply the existence of one right way, though.

https://motherfuckingwebsite.com/
- http://bettermotherfuckingwebsite.com/
- You think your 13 megabyte parallax-ative home page
  Is parallax still a thing? I feel like ginormous hero images are more popular atm.
  
  motherfuckingwebsite is pretty old at this point. I remember seeing it on Reddit like 10 years ago. Parallax was all the rage back then, when we called "hero" images "jumbotrons" (because Bootstrap called it that, I think?)

As an elder developer... yea, we could use react to render complex web pages that erode expected functionality.
Or, like, I'm happy to just go back to server-side rendering... it's surprisingly cheap to build and dead fucking simple.
- Elder developer here too, correctly making my SPAs has made my work significantly more efficient and maintainable now that my back end is basically a rest api and my front end requires very little network interaction after the initial load, which has been made pretty minimal.
  
  I too have been doing this for years and I whole hearty agree with this comment.
  For large complex sites, I ain't never going back.
  Actually even for simple sites I'm not sure I'll go back.
- Elder developer too, you can easily render react server side and statically. Once you remove state, react simply becomes pure functions that output jsx nodes, it's also dead fucking simple, but gives the the possibility to add hydration and state later if you need it.
  
  This is actually excellent advice for performance - you can bake the initial page data in!
- I prefer just writing my html, js, css, as is, and then transpiling to pack it down, treeshake, hash, cache bust, CSP, etc etc.
  The amount if headache, overhead, inversion of control, mess, and bloat involved in frameworks tends to make me spend way too much time on writing boilerplate.
  template and slot exist now, and modern js can do most of the shit fancy libs used to.
  There's very little need for frameworks unless you meed a SUPER dynamic website that has tonnes of mutability.
  The amount if times i see people load in like 3 frameworks and 10mb of bullshit and ten js files to make a fucking static form that doesn't even do anything fancy is insane.
  Just fucking write the like... 8 lines of normal code to populate the form, wtf? Why are we using routers at all, HTTP already exists and does that, why did we re-invent http?
  Front-end devs need to spend less time installing npm packages to try and magically solve their issues and just learn how to actually write code, SMH.
- More Server side logic means more vulnerabilities on your end.
  
  I've seen front ends that build queries that are blindly executed by the backend - I've seen GraphQL that allows the client to read arbitrary users' passwords from the database - I've seen attack ships on fire off the shoulder of ori- whoops, wrong memory.
  Anyways, you can create vulnerabilities anywhere using anything - imo more server side logic might mean more vulnerabilities on the server but it means less vulnerabilities overall.

I was kindof chief architect for a project where I worked. I decided on (and got my team on board with the idea of) making it an SPA. Open-in-new-tab worked perfectly.
(One really nice thing about it was that we just made the backend a RESTful API that would be usable by both the JS front-end and any automated processes that needed to communicate with it. We developed a two-pronged permissions system that supported human-using-browser-logs-in-on-login-page-and-gets-cookie-with-session-id authentication and shared-secret-hashing-strategy authentication. We had role-based permissions on all the endpoints. And most of the API endpoints were used by both the JS front-end and other clients. Pretty nice.)
I quit that job and went somewhere else. And then 5 years later I reapplied and came back to basically the exact same position in charge of the same application. And when I came back, open-in-new-tab was broken. A couple of years later, it's not fixed yet, but Imma start pushing harder for getting it fixed.

What some folks are missing is that SPAs are great for web applications & unsuitable for web pages. There is more nuance than “SPA bad”.
Then dealing with a lot of dynamic content, piping thru a virtual DOM DSL is 100× nicer for a developer than having to manually manipulate the DOM or hand write XML where it’s easy to forget all the closing tags (XML is better as a interchange format IMO & amazing when you need extensibility… also JSX just makes it worse). That developer experience (DX) often can lead to faster iteration & less bugs even with a cost to the user experience (UX). But it’s not always a negative impact to the UX--SPAs can be used to keep things like a video or music player on while still browser & using the URL bar as a state reference to easy send links to others or remember your own state.
It’s equally silly that a landing page whose primary purpose is to inform users of content takes 40s to load & shows “This applications requires JavaScript” to the TUI browser users & web crawlers/search indexers that don’t have the scale of Google to be executing JavaScript in headless browser just to see what a site has to say.
The trick is knowing how & when to draw these lines as there’s even a spectrum within the two extremes for progressive enhancement. React isn’t the solution to everything. Neither is static sites. Nor HTMX. Nor LiveView. Nor Next/Nuxt/Náxt/Nüxt/Nœxt/Nอxt.
- I don't agree with this hard split between SPAs and MPAs anymore (ie. SPAs for apps, MPAs for websites/content). In my opinion SPAs are simply a progressive enhancement for MPAs which allow even faster page navigation. All frameworks now come with SSR solutions and if a website still requires JS to show content that's a skill issue.
  Looking at Astro the line between SPA/MPA is getting really blurry. Just slap a View Transition element on your page and you got a MPA which acts like a SPA when JS is enabled.
  
  In my opinion SPAs are simply a progressive enhancement for MPAs which allow even faster page navigation.
  While I agree that there is a spectrum (hinting at that with the last paragraph), this is where I hard disagree. To construct something like this, you are making an application massively complex by trying to re-implement everything on both ends. Using something like Astro is only hiding that complexity but it’s still there, & probably full of bugs & tons of JavaScript that most developers wouldn’t even understand their stack or know how to jump into the Astro code. The amount of time saved is largely minuscule in most cases with the assets cached when navigating to a new page. In fact, I just tested two of their showcased sites which loaded slower with JavaScript enabled & the content was pretty obviously 95% static. There’s probably some niche use cases for this, but it’s not a good default IMO.
- What is a web page vs web application? The web is so complex with features these days that pretty much everything is an application.
  
  Gmail is a (bad) web application. A marketing website or even an ecommerce store are not.
  
  I admitted it was a spectrum, but this recent article in particular does a good job explaining the axes of static vs. dynamic : online vs. offline. I think you will appreciate it. :)

It's fascinating how some SPAs come about. Often consultancies who win some bid to implement X features. Since "good user experience" is hard to quantify/specify, it ends up being a horrible end result.
Zalaris is one such that I'm in complete awe of. Set up user flows that are expected to take 30 minutes to complete. Yet, don't keep track of that state/progress withing your own SPA. Click the wrong tab within that SPA, and state is reset.
It's, just fascinating.

Remember when websites had a built-in loading indicator, and you didn't have to implement it yourself via JavaScript?
- I remember when the web didn't have JavaScript.
  Honestly, though it was much worse back then. I prefer the variety and features of modern browsing over (mostly) plain text.
  What I wish we could do away with on the web is videos. Let's go back to just images and text, thanks. Animations are fine though 👍
  
  What I wish we could do away with on the web is videos. Let's go back to just images and text
  Seconded. I really enjoyed pre-video Internet.

Building "applications" out of HTML documents -- a single one or otherwise -- is the sort of thing that belongs in one of those "stop doing X" memes, unironically.
- Why? I like that the Webplatform gives more Freedom to the Users.
  
  No. Users should be forced to install hundreds of apps, with two thirds of apps running simultaneously. And if they don't have memory left on the device for that, they should uninstall apps and reinstall them when necessary.
  ^/s

HTMX is great and is the only frontend development tool I don't absolutely loathe. It enables lightweight SPA development, and provides a very simple and efficient mechanism for doing HTML over the wire.
- Not sure I would call HTMX a SPA framework though? Like it all's easy async content fetching for sure, but it's usually done across a MPA?
  
  Where did I call it a framework?
- Unfortunately it also kicks Content Security Policy square in the nuts and shoots a giant hole right through your website security, so if anyone on my team brings up using it I inform them it's an instant security fail if we so much as touch it.
  It's a cute idea but horribly implemented. If your website has any security requirements, do not use htmx
  Edit: the fact so many people have no idea about this and are downvoting is sad. People need to learn how CSP headers work, and why inherently HTMX completely bypasses this as it currently is designed.
  
  Can you elaborate on that? I haven't used it, but just assume if you host it on your own domain you can have it play nicely with csp, there are docs in their site about it. Where did it fall short for your use case?
  
  HTMX comes with a variety of CSP options, though...

I understand the point of static websites, but Vue Router is pretty nice
- If you’re using a router you can still support opening in new tab, history, etc.
  
  Sure, but I don't want to. SPAs are nice, but I also try to include a JS-free fallback solution that is loaded when the client doesn't support Javascript. I think this is the best approach to web development. A good example for this is LocalMonero's No-JS mode. You can use the toggle in the upper-left corner to disable all Javascript on the website, and it will still have most features. I love it.

For React, you can use React Router. That doesn't mean you'll do it well though.
It's tough.

Every single page app should still be using the path to represent resources, so that history and linking work.

Skill issue

I think SPAs really only work for offline PWAs.

I was done with these the day I saw a one page sign-in form rewritten in react to “modernise” it.

my no-javascript SPA styled homepage broke and idk how to fix it :<