Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

reactcss.com

Post reply on HN
Print view View original

41–48 of 48 posts

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#41

Post by tracker1 »

gedy wrote: post #7
AndrewSB wrote: post #3

What happened to the separation of concerns between CSS and JS? In my experience most developers dont want anything to do with CSS. They want a designer who can code to do that.

The React ecosystem seems to be geared towards masking HTML/DOM/CSS behind Javascript/code, such as when developing mobile apps. I do not think "separation of concerns" is a priority. (Not agreeing with this BTW, but there is a subset of developers who seem to think this is just great.)

I can go almost either way... I often find it more natural to include a (s)css file in my component's .js, and have webpack bring it in... then in the component's rendering set the className to a matching container in the scss. With scss, I can start with my variables/mixins include, and keep the more hierarchal stuff straight... It works pretty well, but I see the appeal of things like this library, aphrodite and the like.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#42

Post by airnomad »

xirdstl wrote: post #18
jbob2000 wrote: post #6

Earlier quoted context omitted.

The component paradigm that react is built around is all about working with very small objects, where everything you need for that component is in one file. It's a fantastic model when you are working with a complex interface that has many components to it. It's a paradigm that needs to be managed and used carefully though, otherwise you'll end up with massive 2000 line files. I never thought there was a separation b…

Where I work, we're a small dev team of a few full stack developers and a designer. Our designer does the CSS, and the devs the JS. The separation works well enough for us. YMMV.

I'd say CSS is part of a stack for a long time now.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#43

Post by sotojuan »

tracker1 wrote: post #38
zeitg3ist wrote: post #12

This is slightly off-topic, but... this simple website is made of a single, static page without any kind of user interaction. Why does it load a 2.8 Mb javascript, and why is javascript needed to render the page at all?

First off, it's not compressed... that would probably bring it to 1/8 the size, I'm also assuming that the documentation as a project may well expand... Usually React+Redux project min + gz will come in around 200-300KB for a relatively simple app... If you go with preact, and are really judicious in what you bring in, you can hit half that. For most people, if your initial send is under 500kb, it won't be noticed ex…

> Usually React+Redux project min + gz will come in around 200-300KB for a relatively simple app... If you go with preact, and are really judicious in what you bring in, you can hit half that.

What stuff are you bringing in? Preact is 3kb, Redux + bindings for Preact probably bring it around 10kb or less (compressed). Unless you mean images and stuff.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#44

Post by insin »

zeitg3ist wrote: post #12

This is slightly off-topic, but... this simple website is made of a single, static page without any kind of user interaction. Why does it load a 2.8 Mb javascript, and why is javascript needed to render the page at all?

This looks like the build a typical webpack development config spits out (using its eval devtool [1]), could be that the author hasn't set up a production build yet.

[1] https://webpack.github.io/docs/configuration.html#devtool

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#45

Post by k__ »

Zikes wrote: post #29
k__ wrote: post #19

Earlier quoted context omitted.

I only see a ~800kb bundle.js, which could be smaller if minified, I think, but nothing strangely big.

I'm also getting a 2.8mb file, which the server is having trouble sending in a reasonable timeframe under the heavy load HN is putting it under right now. http://i.imgur.com/OmFGf7D.png

Interesting, to me it came compressed.

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#46

Post by k__ »

tracker1 wrote: post #39
teleclimber wrote: post #30

Earlier quoted context omitted.

The bundle is 2.8 Mb uncompressed, ~800Kb compressed. Even if compressed and minified, that's still a huge amount of JS statements that the interpreter has to go through. I'm getting about 2 seconds to DomContentLoaded on my iMac and a reasonably fast cable connection. Four seconds to visible content on my Nexus 5X on same connection. This is the kind of crap that makes the web feel so lame and clunky on mobile (and…

For reference, it's not necessarily react or redux, or whatever else is in use... I've managed to get preact+redux in a 20k (gz) bundle for a standalone, usable component, flushing out an app may triple that size, but if you're judicious with your components, it's not too hard. Then again, Immutable.js is about 15kb on it's own, and a few other heavy hitters and you'll hit 100kb (gz) load before much functionality. T…

lol, it IS react and the fact that you achieved 20k isn't thanks to react, but thanks to preact...

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#47

Post by gedy »

tracker1 wrote: post #41
gedy wrote: post #7

Earlier quoted context omitted.

The React ecosystem seems to be geared towards masking HTML/DOM/CSS behind Javascript/code, such as when developing mobile apps. I do not think "separation of concerns" is a priority. (Not agreeing with this BTW, but there is a subset of developers who seem to think this is just great.)

I can go almost either way... I often find it more natural to include a (s)css file in my component's .js, and have webpack bring it in... then in the component's rendering set the className to a matching container in the scss. With scss, I can start with my variables/mixins include, and keep the more hierarchal stuff straight... It works pretty well, but I see the appeal of things like this library, aphrodite and th…

I do exactly that too :-)

Re: Show HN: ReactCSS – Inline Styles with Support for React, Redux and React Native

#48

Post by tracker1 »

k__ wrote: post #46
tracker1 wrote: post #39

Earlier quoted context omitted.

For reference, it's not necessarily react or redux, or whatever else is in use... I've managed to get preact+redux in a 20k (gz) bundle for a standalone, usable component, flushing out an app may triple that size, but if you're judicious with your components, it's not too hard. Then again, Immutable.js is about 15kb on it's own, and a few other heavy hitters and you'll hit 100kb (gz) load before much functionality. T…

lol, it IS react and the fact that you achieved 20k isn't thanks to react, but thanks to preact...

React has a lot more sanity checks in place, but that comes at a cost. For a component, it's too much of a price to pay... for a full-blown application, it's usually well worth it. For a component, 20kb is pushing it... for an application, generally 500k would be the limit in my mind. Which is pretty easily hit regardless of the framework, but too many applications include various libraries willy nilly....

Often times you will wind up with competing libraries that both get installed... You'll get all of lodash, and all of Ramda... you'll get all of jQuery, and a few other tools because you're bringing in one component. Working on larger applications with people less judicious as to what they bring in results in a lot of bloat... more so when it's easier to bring something in (thanks to webpack/babel), and while I appreciate that, it's a tool that's easy to abuse.

In the end, you can get react+redux in under 100kb, you can get a lot of the app boilerplate for a mid-sized app well under 200kb... I would compare this to angular, or ng2 that tend to be much bigger. In the end it's how you are building.

Beyond this, as I said, I didn't really look into the bundle... depending on configuration it could be including images, fonts and css. Which would mean it's really not that bad, though it should probably be using url-loader for a lot of the assets to break into separate downloads. Also, react-icons is much better when only needing a few icons from the libraries, they're also well normalized to mix/match in terms of size/position than the fonts tend to be.

Post reply on HN