I’ve had the opportunity to dive into React quite extensively for the past two months. Large project. Many, many components. Rather complicated setup on the backend, including a Python CMS which hydrates the SPA, in many different ways, including acting as a REST intermediary service for some other 3rd party APIs.
My take away from this so far is: React is not as bad as what you would think based on the extensive framework flamewars all around the interwebs. It’s very easy to get sucked into this whole discussion, but you lose sight of what this thing really is: a bloody tool to get bloody things done. No religion there.
I actually ended up playing around with React in my spare time and gave styled components a go. That was actually quite interesting. This current gig requires me to write CSS according to BEM, which heavily componentizes CSS as a whole. But I noticed that the resulting CSS is huge – the more components, the more SASS mixins.. the more bloated the CSS becomes. Why to write componentized code when it all ends up in a huge bloody file at the end of the build process, anyways. But I do like components and tightly specified CSS.
Styled components basically force CSS to be inline at all times and takes care of the specifity of selectors on a component level. I spent a few hours trying out a few things based on a react boilerplate app and was surprised how easily I could get a fairly complex style definition going, still using a mixin approach (higher level components) for mediaqueries, typography and block level layout and the entire theming, like I’m used to with SASS.
The biggest downside for now is that for example VSCode can’t parse styled declarations well, no autocomplete and no linting. But I’d call that a minor annoyance.
So far, no surprises and components are as manageable as when you’re using CSS modules. With the added perk of not having to leave the JS mindset completely while styling components.
In terms of performance: this might become an issue for projects relying on 100+ components. Probably. But then, maybe the entire architecture should be revised instead of being concerned about loading time of inline CSS.
In a sense, styled components feel like more tightly integrated BEM patterns, without having to write the awkward class names yourself.
But what I’ve learned in terms of using React as a framework is probably, most importantly, the fact that if you decide to go with a frontend framework, you should embrace it and abstain from trying to merge and crank some other concepts in, around or on top of it. If you need serverside rendered content, use the framework’s approach and keep things separated and clean. Probably also try to abstain from migrating your old framework’s stuff blindly over to React and instead start completely from scratch, because you won’t need half of the crap you migrate, anyways. Embrace the frameworks flow and adjust your own accordingly. Try to keep dependencies as loose as possible (for example frontend/backend stacks), so you can act quickly to revise decisions on how the project develops as a whole. There’s nothing more frustrating than being stuck with a stack that you know “sort of sucks” but everything is already way too interwoven to change anything without causing a chain reaction.
I’m still looking around on how to best solve the content management aspects of SPAs in the simplest possible manner that doesn’t require a fancy build setup/deployment for smaller projects. If we’re completely honest, a flat file PHP cms for content editing that provides a REST API is probably going to cover the needs of at leat 90% of all projects we work on in the small and medium business website segment. While it sure is fun to run a dev ops mission and deploying docker containers and stuff, its not really necessary and overengineering things in most cases.
But anyways. I was proven again that you shouldn’t judge something before you got a good chunk of experience of actually using it and probably most important, join the flow of how things are being done, rather than questioning every bloody opinionated method. And, for the love of god, ignore all those medium articles and fiery rants in the first place.