x_team_css_in_js
x_team_css_in_js copied to clipboard
Thoughtscript
X-Team CSS in JS Example
x_team_css_in_js
X-Team CSS in JS Example: A comparison of CSS in JS libraries updated for 2018.
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/
Thoughtscript