Shawn Wang is talking about RedwoodJS here:
… it is the first time React components are being expressed in a single file format with explicit conventions.
Which is the RedwoodJS idea of Cells. To me, it feels like a slightly cleaner version of how Apollo wants you to do it with useQuery. Shawn makes that same connection and I know RedwoodJS uses Apollo, so I’m thinking it’s some nice semantic sugar.
There is a lot of cool stuff going on in RedwoodJS. “A highly opinionated stack” if its helpful to think of it that way, but Tom made clear in our last episode of ShopTalk that it’s not like Rails. Not that Rails is bad (it isn’t), but that this new world can do things in new and better ways that make for long-term healthy software.
What exactly single file components? Isn’t that something that we have been calling bad practice for years?
Not exactly
Well people have been telling that you have to separate different parts of your component into separate files (HTML, CSS, JS), but in the recent years with the big boom of frameworks where the primary UI building block is a component, it might not make sense all the time to split just for the sake of splitting. It might be better to have all the HTML, CSS and JS in a single file since it’s all tied to the same component anyway. If you need to work on a single component there’s no need to have 3 different files open in your editor, you can only have one file open and work on that. This especially got popular in React with the rise of CSS-in-JS approaches to styling. Vue for example has this baked in with their single file component approach, where HTML, JS logic and CSS styles all live together in a single file.
But it also really depends in the end what you think is the best approach, if the framework isn’t “forcing” a certain approach of course.
Vue uses SFCs. I have been working on them for 2 years now. I think it’s one of the best and easiest js framework to get you started if you come from a UI background.
I think we often forget that these are guidelines and not laws. So long us we can interpret and the machine can still be performant we got to do it the way we understand and makes sense to us.
Wait. Am I missing something. I write react all the time, Gatsby, Next, and create react app. My css jsx and react are always in a single file. Usually styled components for CSS.
Not having used React,but for the general use of is,HTML and CSS as a file,.sass can satisfy making parts of the ‘big’ idea albeit the conversions are where the CPU capabilities through the application browser is at a disadvantage .
This still requires using CSS-in-JS for styles, so not exactly an upgrade over what exists in React now.
The only frameworks that do this right in my experience are Vue and Svelte because they let you write actual CSS or SCSS, not the nightmare that is CSS-in-JS.