On: A tale of webpage speed, or throwing away React

[ricardobeat]

You can argue it is not React's fault as usual, but this is how:

    <Button styles={[...]}
      onPress={() => setState('active')} />

    const styles = StyleSheet.create({
        active: { backgroundColor: 'purple' }
    })

progressing into:

    <Button styles={[...]}
      onPress={() => setState('active')}
      onHover={() => setState('hover')} />

    const styles = StyleSheet.create({
        active: { backgroundColor: 'purple' }
        hover: { backgroundColor: 'blue' }
    })

which is frictionless and 'clean', vs the alternative:

    const styles = StyleSheet.create({
      button: {
        '&:hover': { backgroundColor: 'blue' }
      }
    })

The states here doesn't make a lot of sense, but I think it illustrates the idioms involved and how you end up focused on JS. This is so common I bet most devs who entered the market using React will see absolutely no issue in that.

Another familiar case is not having direct control over a parent/child component's styles, only their state, making it impossible to do it with CSS. Not exposing `style` is very common in component libraries, and using CSS-in-JS means you can't easily target them with CSS selectors.

[dceddia → ricardobeat]

The thing is, React works with plain CSS too. I think a lot of newcomers see that JSX looks like React-flavored HTML and naturally assume that React will have its own flavor of CSS, but it doesn’t. There are libraries for CSS-in-JS of course, third party ones. But implementing :hover on a button in React can be done just the same as in plain old HTML - with a bit of CSS in a .css file. Or for active/inactive states, you can use template strings to set a dynamic className, and target that className in the .css file.

[ricardobeat → dceddia]

That doesn't change the reality that there are a million projects out there using css-in-js - about 50% according to developer surveys. I doubt they are all written by newcomers.

The fact that React is a plain view library and doesn't provide / interfere with the rest of your tooling is precisely the problem in my opinion, and does not exempt it from the resulting mess. The lack of standards has led to the proliferation of a thousand supporting libraries, all special in their own way, in turn making the definition of 'good practices' nearly impossible; it also gives way to flavour-of-the-month development practices, where popularity (and not necessarily quality/fit) determines what libraries most people use. Similar discussions can be had around SSR, accessibility, bundling, compiling, code splitting, animations, component APIs, state management, persistence, fetching data, and so on.

[madeofpalk → ricardobeat]

Even if you do use a CSS-in-JS solution, which i'm not a fan of but have used in a few projects, they still don't do "hover in js"!

All they are are just fancy wrappers around putting more or less the same straight up CSS into the page. So you still use :hover or :active or whatever to do the appearance states in straight up css.

I still fail to see how React encourages adding event handlers to add hover appearances. A developer who thinks that's what to do with React was going to fuck that up with any technology.

[krzepah → ricardobeat]

Why on earth would you specify your styling in your JS ?

[crooked-v → krzepah]

Being able to dynamically supply theming is a big one. For example:

    const Header = styled('header')`
       font-family: ${({ theme }) => theme.fonts.header};
       color: ${({ theme }) => theme.colors.primary};
       backgroundColor: ${({ theme }) => theme.colors.primaryBackground};
    `

...where the theme object can be swapped out on the fly for different sections of a web app.

[krzepah → crooked-v]

Thanks i haven't thought about that one. But i'd definitely try to stick up to css even if I'd have to dev that feature. Maybe by trying to change the var(--color) i've setup in my colors.css ;

I'd note out that this feature is also so edgy that the pushed argument shouldn't even occur that much.

It would be like "Oh hei, I need to dig up that super edgy star shaped hole using that shovel so I'm using it that way. Oh see, when I use it that way i'm inclined to do X. Therefore my shovel is encouraging me to do X."

[crooked-v → krzepah]

It's only an edge case until you handle white-labeling services for other companies, at which point you immediately need a way to conveniently tweak the styling of everything in your web app per white-label client, preferably in a database-supplied way so that your support team doesn't have to handle every adjustment said client wants to make.

[madeofpalk → ricardobeat]

Low quality developers will end up with low quality code.

I understand that frameworks might push you in a certain direction, but not this for React.