I remember learning separation of concerns and then react popped in and just threw that out the window and yet everyone adopted it. I still haven't recovered from the idea that these guidelines are very bendable etc.
There is separations of concerns and separation of technologies.
A component with its styling, markup structure, and behavior, is one concern. These components can than be combined and nested in every which way you need, they are very modular.
If you separate concerns into markup, styling, behavior, than this form of component-based reuse is difficult. But it could conceivably be easier to reuse an html template or css class for different features.
Hooks are also a way to separate concerns in a different way than lifecycle methods. Lifecycle methods group code by specific points in a component's life, but then the logic can't be extracted and reused. Hooks on the other hand encapsulate reusable logic that can then be used in different components.
Thank you for saying this so clearly. I find React to be one of the few systems that actually allow separation of concerns when used idiomatically, rather than drawing boundaries based on technologies. (And I dislike frontend programming, to be clear!)
So where is the booming community of CSS styles for popular websites, so that I can just change the way they look how I wish? Surely making one for Facebook would be no issue, right?
This would certainly be possible if developers/corps weren’t absolutely gaga for piling up complexity and ceaselessly changing shit for the hell of it. Facebook could and should serve stable, semantic HTML instead of javascript-ridden, ever-changing div soup. It wouldn’t make their development work any harder. In fact it would probably make it easier.
Unfortunately, in capitalism that’s too much to ask, because it would improve everyone’s lives except the ad industry’s.
Perhaps some sites can be excused from this because they really do fall on the app side of the document–app spectrum. Google Maps comes to mind, but Facebook? They’re just bad internet citizens.
I’m more on HTMX’s side of this discourse, but even going all-in on Separation Of Concerns one can’t ignore that different concerns doesn’t mean siloing everything off from each other. There must be interfaces/contracts between concerns and CSS Zen Garden teaches us one such interface: the markup. As long as it’s stable, you can separate styling concerns from it. Bonus points if it’s also sane and semantic.
CSS was brand new. It was a showcase to show a generation of web developers who used HTML tables for layout (probably using Dreamweaver) how CSS and semantic HTML could be used to achieve the same result, but with readable code. In some ways, component-based architectures are just a re-hashing of the old paradigms we worked out of.
Did it though? I've worked with React for some time, and we simply put all the non-view things into separate modules, or at least separate functions. React is (still) a library, it doesn't prevent anyone from mixing the layers and making spaghetti.
