Add styled-jss to benchmarks

[lttb]

Thank you a lot for this project!

And we would be glad to add styled-jss to benchmark list. There are two versions: the core and the default version with some plugins out of the box, so the core is a bit faster.

There are some results on my machine

 

Thanks!

[necolas]

react-jss is already included. What's different about styled-jss that makes it worth also testing?

[kof]

It has different performance characteristics and api is similar to styled-components. You will be surprised by the updates perf.

[necolas]

So which library is best to include here?

[kof]

those are 2 separate react integrations using same core, I would include both

[necolas]

I don't really want to include multiple variants for each library.

[kof]

well, its not a variant, a lot of overhead comes from integration with react, depending on how you do it, you get different results.
They have also very different API's.

I would also include just core jss library, because one can perfectly use it without any integrations and without plugins.

[kof]

I hope the selectbox will survive the list of libs haha. Great job by the way on benchmark itself.

[necolas]

I can include whichever react integration is fastest.

Multiple integrations running in the same app often end up with problems like this. At the moment, the different core libraries don't even avoid colliding with each other's styles (fela and styletron)

[kof]

I think you are not going to have this issue, you are not rendering both on the same screen. They were designed initially to use either of them, so we didn't think of what happens if one uses both on one screen, though, there are valid cases and we should support this behavior. In any case this should not be a problem for the benchmark.

If you get any troubles, I will personally fix it. You can always ask me to update the implementations if you want to update the bench and there is a breaking change or something.

[kof]

Regarding fela and styletron, how did that happen? Is there no cleanup operation after switching library?

[necolas]

Most libraries don't support being cleaned up, and tbh they should all work together if care is taken to namespace the CSS you create

[kof]

In that case mb an iframe is the right thing to do, environment for testing should be clean and isolated, ideally. Doesn't need to be remote document though.

[necolas]

This PR doesn't look like it includes vendor prefixing or camel case properties. jss is currently an implicit dependency too.

Using an iframe isn't feasible or important. Most libraries won't work rendering into an iframe from another document. Makes no difference to what is being tested either.

[kof]

@lttb you are using camel case, but no plugins!

[kof]

Is there any base features set that every other library is supporting? We could include camel-case for e.g. if it makes the comparison more fair.

[kof]

Also yeah, jss import here is implicit, should explicitly add the dependency.

[kof]

I just realized what you mean by 2 variants.

[kof]

Hmm, yeah 2 variants of styled-jss is a suboptimal thing to have, on one side jss-preset-default adds way more features than other libs have, so it makes it a bit slower on micro level, on the other hand it is what users will use most of the time.

cc @lttb

[kof]

I think we should probably just use the default styled-jss implementation, but instead add a pure jss version without plugins or with a minimal set of them.

[necolas]

I'll only include one jss example. The performance of styled-jss and react-jss seems about the same for the mounting tests, and react-jss seems to be the more popular way to use jss. styled-jss-core is faster but is missing expected features.

I noticed an issue testing this locally. If you run styled-jss before styled-jss-core, you get slower styled-jss-core results.

[necolas]

Closing this for now. Thanks for the PR