The tyranny of single page apps
There is no such thing as front-end engineer anymore. We are all single page app developers. And are you even a single page app developer if you don't know React? As someone who has over 10 years of experience in a non-React framework, I can confidently give that a no1.
Full disclosure: I'm just a little bit of a lefty. But honestly, I don't think you really need to be a hardcore lefty to see that technocapitalism has become a major problem of our time. Being against tech monopolies is now the moderate position.
So what exactly is a single-page app? The blog you are reading at the moment is an example of a multi-page app. You click on a link, and that link takes you to another webpage. The browser fires off a request and does a full reload so you're looking at a fresh new page, loading a new set of HTML, JavaScript, and CSS.
I think calling this blog an "app" is a bit of a stretch. It's more of a "webpage". It feels like calling something a "webpage" is antiquated, but there's a lot about Bearblog that's "antiquated". Anyway, I'm going to abbreviate them as MPW.
When I think of an "app", I think of gmail, Reddit, Facebook, GitHub2, and other big web apps.
When you're using Facebook and you click on a post, you aren't actually going to a separate page. A complex set of JavaScript intercepts that click, and tricks you into thinking you've gone to a new page. But you haven't. The browser just shows you at a new URL and loads a little bit more JavaScript and CSS.
The dark side
The wealth of those societies in which the technofeudalist mode of production prevails, presents itself as “an immense accumulation of memes”.
- Karl Marx probably
If you're not a front-end engineer, this probably sounds like an abstract idea that's meaningless to you. Why should you care about highly-technical models of making apps? Ultimately, I think it's not a coincidence that the premier framework for building front-end apps was written by the biggest social media company in the world.
Let's think of the value proposition of SPAs. Here's the tradeoff: SPAs have a very high up-front cost, but they're faster for future navigations. At least that's the theory. My experience has been that SPAs usually end up being bloated in general whether you're on the first page load or the 30th.
Regardless, the up-front cost is real. As someone who has put quite a lot of effort into improving the up-front performance of a SPA, I can attest to how hard it is to solve this. But don't take my word for it. Just Facebook's login page3 loads 3.8MB of CSS, and you can verify this in Chrome's dev tools4.
Again, what does this mean for you as a user? Well, speed is a feature, and it has a lot bigger impact on your usage of apps than you might expect. A lot of times non-technical people just look at improving performance as just being a bunch of engineers geeking out without concern for the end user experience. But there's plenty of research out there showing that an improvement of even 100ms makes users more likely to use given app.
So if you're on Facebook, there's a much lower cost to scrolling down a few more posts than there is to switching to say Reddit. SPAs are designed to lock you in. They're really not very efficient at all in general anyway.
By the time you've visited Reddit5 and click on a few posts, you've downloaded 33MB of stuff altogether. The bandwidth for all of those image posts and avatars you mindlessly scroll by really starts to add up. Here on Bearblog, you'd have to go through a lot of posts and blogs to even approach 1MB.
A vent about complexity
Once upon a time, programmers coded entirely in assembly, writing code instruction by instruction. Then one day, a thing called a "programming language"6 was invented, and developers rejoiced. But I'm sure that at this time, the people who had previously been writing ones and zeroes years ago started to complain about all this complexity new newfangled tools were adding and how we should just get back to simpler times.
Senior developers complaining about new tooling being created and wishing nostalgically for the way it used to be is a tale as old as time. But I think there are very real reasons to complain here though. So let me pull out my inner old fogey and complain about the whippersnappers.
How exactly do you get a single-page app set up these days? Well, you're already planning on using React because why aren't you? Nobody got fired for choosing React. Just think about the bus factor!
And of course if you're using React, obviously you want to use Tailwind CSS, right? Ok, you can certainly choose to use SASS or LESS if you seriously want to, but CSS post processors are all the rage these days.
And unless you plan on writing a bunch of components by hand, you've got to use a UI library. But which one? You've got 20 to choose from. Sorry, but you're on your own on that one.
And of course you need Typescript. And a dev server. And a minifier.
And Vite of course! What exactly does Vite do? Nobody really knows for sure. But I dare you to try setting up some sort of dev tool for your web app without it. Or c'mon at least Parcel or Webpack. Work with us a little bit!
But don't worry! You just need to run one command to get all of this set up. It's easy, I promise you.
Hopefully you don't need to change anything about this setup. You can't seriously be thinking about switching out Vite for Parcel can you? Do you know what that would mean? Neither do I, but I promise you, it's bad.
Do you find this all very complicated? Don't worry, I'm sure someone will come up with a new tool to help you manage this complexity.
Hey, just remember something! At any time you can look at any of these tools and see exactly what corporations have deemed these tools worthy of their usage. Or if they're really good, you'll see what companies have decided to give these tools money. I can only hope some day I can become good enough to be sponsored by mintlify, supabase, and SerpApi like Tailwind is!
A world of startup costs
Ok dear reader, I have to say that you're becoming pretty predictable, because I know what you're asking again. How does this affect me?
Well, again we're coming up against the subject of startup costs. It's hard to believe that there was a point in time when deploying a website meant FTP'ing some PHP scripts onto a commodity server, configuring MySQL, and calling it a day. There were absolutely problems with this setup to be sure. I have zero desire to go back to those days. We've fixed a lot of those issues. But even with shitty programming languages, underengineered databases, poor production hygine, and security holes so big you can drive a truck through, there's also a lot to miss.
Software has gotten more complex, but I don't think all of that complexity is really necessary. Writing the simplest of websites requires a ton of tooling now.
That's not a huge deal if you're Facebook and literally have building full of engineers working on developer tooling. But if you're a new startup or open-source project, this stuff is non-trivial.
For a CSS project I've been working on, the instructions for every tool assumes you're starting with a full-stack Vite/Webpack/Parcel setup, and there may be a simple CLI command you can run buried at the bottom somewhere. You know, if that's your thing.
Our tooling is set up to meet the needs of corporations, not people. I complain about how tools love to show off the corporations they're associated with, but the reality is that if a tool isn't built by a corporation, sponsored by corporations, or used by corporations, there's not really any guarantee it will stick around. Jane Developer might do a much better job of writing a tool, but she probably just doesn't have a serious amount of time to spend on writing good tooling in a world where having a job is a matter of life-or-death. [Bearblog] is a rarity in this world.
What's driving this complexity? Well it's you, dear reader. You've really gotten to be quite demanding. It's not your fault. Corporate social media has trained you to expect to be able to scroll past dozens, maybe even hundreds of high-resolution photos as though it were nothing. Infinite scroll means that there's a never-ending amount of low-quality slop to slog through.
And what's enabling this is Being locked-in by SPAs. Simple webpages that are so complex that a single developer can't hold it all in their brain. Having tooling that requires numerous corporations to build it all.
What's the future?
Again, I'm not trying to come at this from the standpoint of a stodgy old-timer complaining about newfangled technology. I want new technology that enables us to build new things. I want front-end frameworks that provide users with the interactivity they want without the bloat and complexity.
So in the name of ending this on as much of a high-note as I can, I want to give a shout-out to some tools that I think are what we need more of.
CSS post-processors like PostCSS and Lightning CSS. It turns out that CSS isn't so bad a language to work with when the most modern features are enabled. And there are a few "quality of life" features there. I feel that we're reaching a point where the bloat of tools like Tailwind and SASS are becoming less and less necessary.
Preact is a lightweight web framework that requires zero build tools to get started with. I have yet to try it out myself, but I hear really good things about it.
Backend frameworks like Astro are using an "islands" approach that was actually first described by the creator of Preact. This makes having front-end apps be full-blown JavaScript apps is becoming less and less necessary.
LazyVim makes getting set up with a new installation of Neovim a joy. If you've never used vim key-bindings, there's definitely a learning curve. But with the power that tools insalled by LazyVim gives you, there's just nothing like it. VSCode with vim key-bindings just doesn't come close.
This feels like a minor thing, but
wl-copymake a huge difference. No more trying to awkwardly copy things that were printed on the terminal screen. The tool may vary depending on your platform. I'm sure something similar exists though.
I'd definitely love to hear about more tools that are making a difference! If you know of one, drop me a line! (This is an alias for my actual email address)
Hire me, plzkthx↩
I'll save my rant about how much I hate GitHub for another day↩
I didn't go beyond that because I have zero desire to use Facebook↩
Hit Ctrl+J, switch to the network tab in dev tools, then got to facebook.com. You'll see how much data was transmitted over the network. As of this writing it's 3.8MB, but it might be different if you're reading this later↩
I hate Reddit slightly less than Facebook, so I'm willing to do some navigation there.↩
And Fortran was nothing like what we'd consider a programming language these days↩