Why I can't stand the React Ecosystem

|
Why I can't stand the React Ecosystem

I’ve been harbouring a deep rage, that left unabated, I fear may harm my mental and physical well being. This deep rage arose whilst trying to make a small change to a React app. The result was an anger that prompted me to not only write this blog post, but to actually create this blog again, after a several year hiatus.

I have a freelance client I’ve worked with for a number of years, in fact, he’s one of the first, if not the first person who paid for me to write code outside of my day job. The site was initially static HTML, CSS and bits of jQuery here and there, cobbled together in Dreamweaver (after all, it was 2012) by a friend who could no longer maintain the site, thus recommended me to take over.

The scope of the requests for this website are typically so small since the initial changes that I don’t charge my client, it would actually feel somewhat petty. Or so it should be.

The problem is, at some point down the road, I learnt React. The promise of developer productivity through components was all too tempting. At the time, I was having to manually copy changes across multiple pages. So the promise of updating everything in one place was too great to ignore. So I set about rebuilding the website in React. I had to rewrite whatever logic I had in jQuery to React’s state management system, I knew Redux at the time, so that’s what I used. I noticed that everyone was using scss instead of css these days, so I rewrote all the css to scss and configured my React app to load scss files. Great!

My work on the site from the initial changes was largely done. My client was happy enough, not being particularly interested in the online side of things, but complying because all businesses big or small have to these days. And given his business domain was largely in the ‘real world’, he largely left the site as it was. So requests would come in maybe a couple of times a year.

This is when I began to spot problems with the React ecosystem. Almost a year had passed since the last batch of small tweaks and changes, and now React looked completely different. No one was using Redux anymore, scss was becoming controversial. BEM, as I had spent hours learning about, despite not being a front-end developer, was now slightly ‘uncool’. Haven’t you heard? Everyone’s using ‘styled-components’ now! Redux? You’re still using that? You need to be using the new React hooks now…

But what was I actually trying to do? Update a phone number, correct a few copy mistakes and change an email address. Changes which should have taken ten minutes. But what was I doing instead? Changing the entire state management, ripping out all of the scss and rewriting everything as styled-components, and a number of other pointless side-quests the React world had kindly insisted on, for my benefit, you understand.

So what should have been ten minutes became several hours. And you might argue ‘well you didn’t have to make all of those changes, you could have just left it as is’. And that’s largely true. But the pace with which the React ecosystem moves, you grow anxious that one might be left behind entirely, without some efforts to keep up. And eventually, that’s exactly what happened.

After a lengthy period without any changes requested. I get a request come through to update the phone number, and remove a link from the top nav. No problem, easy. I cloned the repo again (I had a new laptop since I last worked on this site), ran $ npm install, only to be faced with a litany of errors.

SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?

What? Isn’t that Python? What the hell does Python have to do with this? As it turns out, some scss library, for whatever reason uses Python under-the-hood, despite being used almost entirely within the JavaScript ecosystem. Not only that, the error itself was because it was using Python 2, which was deprecated some time ago now. After some Googling, I found that this library had gotten rid of the Python dependency in newer versions. Excellent! But wait… we got rid of it and replaced it with Dart. Dart?! From what little I knew about Dart, it was a language created by Google that largely failed to live up to the initial hype and fell into relative obscurity since then. So why do I need this language to render my website now?

I tried in vain to remove or update various dependencies that were out-of-date, including React itself which had to be updated because many of the other dependencies I had updated now relied on a newer version of React. And of course, JavaScript being the language it is, my relatively small website had hundreds of dependencies and sub-dependencies.

So what was my punishment? For the crime of not running this app locally for just under a year? I had to start again. I had to create a brand new React app, and copy over all of the components and wire them back up in a completely new React app. Ten minutes became more like seven hours.

I’m a Go engineer for the most part, I avoid front-end where possible. And I am reminded why that is, every time I have to do any front-end. If I wrote an application in Go, for example, the chances are I could leave it several years and it would work exactly the same. So I know it’s possible to create languages or ecosystems that are designed for the long-haul. As an outsider to front-end, it seems like the aim isn’t for longevity, or backwards compatibility. Instead, the primary objective seems to be re-inventing the wheel.

I see new front-end frameworks released at such a cadence, that the latest framework has already been superseded by the time I’ve reached the bottom of the getting started page. It doesn’t always feel like progress either. Sass and scss were touted as the future of css. Need not we subject ourselves to writing another line of boring old CSS ever again. Only for things to go full-circle again a few years later, back to boring old CSS.

I have no suggestions or solutions, other than my own vow to stay away from front-end as much as I can get away with. I’m sure seasoned pro’s in the front-end world are full of “why don’t you just“‘s. But the point is, I shouldn’t have to have a deep knowledge of the ecosystem and its quirks to use the most popular tool in order to change a line of text.