Skip to content
This repository has been archived by the owner on Jun 23, 2024. It is now read-only.

Thoughtscript/x_team_css_in_js

Repository files navigation

x_team_css_in_js

X-Team CSS in JS Example: A comparison of CSS in JS libraries updated for 2018.

Popularity

We compare several libraries:

Aphrodite
CXS
Emotion
Glamorous
JSS
Radium
Styled-Components
Styletron

Testing for:

    (1) Phantom.js page load performance
    (2) Phantom.js I/0 performance
    (3) live-server 'http' request performance - time to complete 1000 requests
    (4) Webpack 3.6 compile time
    (5) Webpack 3.6 bundle size

Running the Tests

Build Tests:

    $ npm run build-all
    $ npm run number-request
    $ npm run phantom-page
    $ npm run phantom-io

Unminified (Development):

Testing build time for development-like scenarios (time to rebuild/recompile on change):

Library Vendor Size App Size First Run Second Run Third Run Average Run
Aphrodite 938 KB 4.02 KB 4237 ms 5450 ms 4952 ms 4879.66 ms
CXS 858 KB 3.94 KB 4952 ms 5023 ms 5399 ms 5124.66 ms
Emotion 890 KB 4.26 KB 5093 ms 6322 ms 6015 ms 5810 ms
Glamorous 1.02 MB 3.96 KB 5029 ms 4911 ms 6406 ms 5448.66 ms
JSS 937 KB 4.08 KB 5816 ms 5383 ms 5967 ms 5722 ms
Radium 1.02 MB 6.04 KB 7495 ms 6416 ms 6210 ms 6707 ms
Styled-Components 990 KB 4.29 KB 6107 ms 5732 ms 5650 ms 5829.66 ms
Styletron 875 KB 4.07 KB 6029 ms 3597 ms 5649 ms 5091.66 ms

Build Time Winner: Aphrodite (4879.66 avg ms)
Vendor Dependencies Size Winner: CXS (858 KB)
App Size Winner: CXS (3.94 KB)
Overall Size Winner: CXS (861.94 KB)

Minified (Production):

Testing build time and size for production-like scenarios:

Library Vendor Size App Size First Run Second Run Third Run Average Run
Aphrodite 184 KB 1.76 KB 10890 ms 4952 ms 9653 ms 8498.33 ms
CXS 165 KB 1.74 KB 9806 ms 5399 ms 9895 ms 8366.66 ms
Emotion 179 KB 1.91 KB 10251 ms 6015 ms 10628 ms 8964.66 ms
Glamorous 230 KB 1.72 KB 13597 ms 6406 ms 12359 ms 10787.33 ms
JSS 197 KB 1.79 KB 11285 ms 5967 ms 11029 ms 9427 ms
Radium 230 KB 2.77 KB 11854 ms 6210 ms 12343 ms 10135.66 ms
Styled-Components 205 KB 1.91 KB 11800 ms 5650 ms 11178 ms 9542.66 ms
Styletron 179 KB 1.79 KB 10163 ms 5649 ms 10879 ms 8897 ms

Build Time Winner: CXS (8366.66 avg ms)
Vendor Dependencies Size Winner: CXS (165 KB)
App Size Winner: Glamorous (1.72 KB)
Overall Size Winner: CXS (166.74 KB)

live-server - Time To Complete 1000 Requests

In this test, we see how well the different frameworks hold-up against each other in high-use scenarios. We want to see how much throughput our server can handle given the choice of a particular CSS in JS framework (Please note that this is a test of server-side performance rather than client page-loading performance):

    $ npm run number-request
Library First Run Second Run Third Run Average Run
Aphrodite 3304 ms 3302 ms 3134 ms 3246.66 ms
CXS 2811 ms 2823 ms 2994 ms 2876 ms
Emotion 2606 ms 2732 ms 2756 ms 2698 ms
Glamorous 2716 ms 2524 ms 2572 ms 2604 ms
JSS 2681 ms 2585 ms 2657 ms 2641 ms
Radium 2783 ms 2573 ms 2942 ms 2766 ms
Styled-Components 2133 ms 2551 ms 2790 ms 2491.33 ms
Styletron 2479 ms 2457 ms 2582 ms 2506 ms

The Winner: Styled-Components (2491.33 avg ms)

Phantom.js - Page Load Performance

In this test, we'll be testing the time to execute a request and receive a response back from our test server. We want to see how fast we can request, render, and receive a production page when equipped with a particular CSS in JS framework:

    $ npm run phantom-page
Library First Run Second Run Third Run Average Run
Aphrodite 3121 ms 3016 ms 3230 ms 3122.33 ms
CXS 2995 ms 2983 ms 3133 ms 3037 ms
Emotion 3002 ms 3042 ms 2917 ms 2987 ms
Glamorous 2947 ms 3047 ms 2968 ms 2987.33 ms
JSS 2906 ms 3018 ms 3178 ms 3034 ms
Radium 3000 ms 2691 ms 3118 ms 2936.33 ms
Styled-Components 3012 ms 2873 ms 3075 ms 2986.66 ms
Styletron 3031 ms 3044 ms 2995 ms 3023.33 ms

The Winner: Radium (2936.33 avg ms)

Phantom.js - I/O Performance

To further quantify overall I/O performance, we'll also test the time to load each supplied index.html with all production assets this time using Phantom.js and combining the results with our previous build size:

    $ npm run phantom-io
Library First Run Second Run Third Run Average Run
Aphrodite 57.3864 KB/S 54.3953 KB/S 56.3250 KB/S 56.0355 KB/S
CXS 53.8044 KB/S 50.7116 KB/S 55.0842 KB/S 53.2000 KB/S
Emotion 57.6513 KB/S 57.6697 KB/S 56.1657 KB/S 57.1622 KB/S
Glamorous 75.1118 KB/S 72.2544 KB/S 85.9495 KB/S 77.7719 KB/S
JSS 62.8684 KB/S 65.2198 KB/S 73.8447 KB/S 67.3109 KB/S
Radium 77.0251 KB/S 79.8251 KB/S 71.2706 KB/S 76.0402 KB/S
Styled-Components 66.6591 KB/S 71.7441 KB/S 62.3222 KB/S 66.9084 KB/S
Styletron 59.7652 KB/S 61.8508 KB/S 62.3222 KB/S 61.3127 KB/S

The Winner: Glamorous (77.7719 avg KB/S)

Resources and Tributes

Updating

https://engineering.hellofresh.com/the-css-in-js-battle-89c34a7a83ea

https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc

Testing Suite

https://github.com/tapio/live-server

http://phantomjs.org/quick-start.html

https://webpack.js.org/