a-gambit / css-in-js-benchmarks Goto Github PK

I'm interested in seeing the results for styled-components v2.2.0, which has some performance improvements. Opening this issue as I'll try to PR the upgrade later.

Cheers!

We created a new package https://github.com/cssinjs/styled-jss

Can you add freestyler to the benchmarks, I've tried but I get some kinda Webpack error that I cannot decript.

Is it possible to also show a case of react + a css file?

Steps

1. go to packages/big-table/jss
2. npm start

 jss git:(master) npm start
(node:25237) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:25237) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:25237) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
(node:25237) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

> [email protected] start /Users/kof/work/projects/opensource/CSS-IN-JS-Benchmarks/packages/big-table/jss
> webpack-dev-server

Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from ./client
404s will fallback to /index.html
Time: 2289ms
           Asset       Size  Chunks             Chunk Names
      index.html  240 bytes          [emitted]  
    js.bundle.js     793 kB       0  [emitted]  js
vendor.bundle.js     534 kB       1  [emitted]  vendor

ERROR in ./client/index.js
Module not found: Error: Can't resolve 'big-table-utils' in '/Users/kof/work/projects/opensource/CSS-IN-JS-Benchmarks/packages/big-table/jss/client'
 @ ./client/index.js 3:0-34
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.js
webpack: Failed to compile.

I am missing a doc about how to install run and calculate all the stuff. I figured it now but it was a struggle.

Lets rename it to make clear that its uses react-jss, because pure jss will perform differently and we should add pure jss with and without plugins. Right now react-jss has almost all plugins built in and this is way more functionality than all others.

In the results, react-css link goes to https://github.com/facebook/react.

Is that correct, or is it supposed to go to https://github.com/casesandberg/reactcss ? I'm confused about what react-css means in this case?

We have added experimental preprocessing support to our babel plugin a while ago, and that should improve our performance quite a bit.

I'll open a PR later, if I have time :)

We've been internally developing a CSS-in-JS solution, and I wanted to make it go through the test.

As I try to run benchmark (haven't yet made any changes) I get

async function runTestCase(url) {
      ^^^^^^^^
SyntaxError: Unexpected token function
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ benchmark: `node ./packages/tests/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ benchmark script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any ideas?

Is there a version of this repo for react native or a way to support it here?

I remember that @tkh44 added emotion to this benchmark, but I can't seem to find it in this repo. Any ideas where that went?

This is very helpful.

1. However, I couldn't understand from the Readme file what React application (which we style with Css In Js) is the basis for the comparison.
2. According to https://reactjs.org/docs/faq-styling.html#are-inline-styles-bad and also https://www.ctheu.com/2015/08/17/react-inline-styles-vs-css-stupid-benchmark/ CSS is more efficient than inline-Style. However, surprisingly, the results show contrary results:
   a. react (with inline-styles) is in the second row.
   b. styled-jsx-inline-styles - is third
   c. Glam Inline Style - also gets a high result.
   Is there any explanation for this somewhat unexpected results?
3. Perhaps it would be helpful to add to the comparison table a column of the generated file size. This measurement dramatically effects the time it takes to the app to first load.

Would be also nice to have a column with generated bundle size less the bundles size of React (without styles) benchmark.

Unless you use something like bench.js, those results vary so much that they are almost useless.

Have you seen https://github.com/PepijnSenders/css-in-js-perf-tests ?

They use proper benchmark, though the way the tests are written is suboptimal, because not the full render cycle happens. Maybe you should team up with that project and use their test running infrastructure but add your rendering in a real browser through karma.

The emotion css-mode test is not actually using emotion for colouring of the cells, which is the heaviest part. It just uses inline styles:
style={{ background: `rgba(74, 174, 53, ${x})` }}
which has to be super quick.

Instead, it should be using class generation like the glamorous/glamor-css test does.

I can submit a PR to fix this. It considerably changes the results table.