https://github.com/brunolemos/react-native-css-in-js-benchmarks
CSS in JS Benchmarks for React Native
https://github.com/brunolemos/react-native-css-in-js-benchmarks
benchmark css-in-js fela glamorous react-native styled-components
Last synced: about 1 year ago
JSON representation
CSS in JS Benchmarks for React Native
- Host: GitHub
- URL: https://github.com/brunolemos/react-native-css-in-js-benchmarks
- Owner: brunolemos
- Created: 2017-11-17T03:35:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-11-03T21:36:21.000Z (over 5 years ago)
- Last Synced: 2025-04-13T09:54:50.563Z (about 1 year ago)
- Topics: benchmark, css-in-js, fela, glamorous, react-native, styled-components
- Language: JavaScript
- Homepage: https://github.com/brunolemos/react-native-css-in-js-benchmarks/blob/master/RESULTS.md
- Size: 427 KB
- Stars: 47
- Watchers: 7
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CSS in JS Benchmarks
## for React Native
### Results
See [RESULTS.md](RESULTS.md) for the benchmark results.
### Technique
- Big table with random data and dynamic background color opacity
- Multiple implementations for each lib with small variations, e.g. using inline styles or not
- Multiple rerenders are executed per test and the result is their average render time
### Libs
- [fela-native](https://github.com/rofrischmann/fela/tree/master/packages/fela-native)
- [glamorous-native](https://github.com/robinpowered/glamorous-native)
- [react-native](https://github.com/facebook/react-native)
- [styled-components](https://github.com/styled-components/styled-components)
Know any other? Please open an [issue](https://github.com/brunolemos/react-native-css-in-js-benchmarks/issues) or, preferrably, a [pull request](https://github.com/brunolemos/react-native-css-in-js-benchmarks/pulls) :)
### Inspiration
The idea and some code pieces are heavily inspired by [A-gambit/CSS-IN-JS-Benchmarks](https://github.com/A-gambit/CSS-IN-JS-Benchmarks), which benchmarks were made for React Web.
### How to run
- Run `git clone git@github.com:brunolemos/react-native-css-in-js-benchmarks.git`
- Run `yarn` or `npm install`
#### Manually
- Run `react-native run-ios`
- Use the app as usual
#### Automatically
- Run `brew tap wix/brew`
- Run `brew install applesimutils`
- Start the iPhone X Simulator
- Run `npm run test:e2e:build`
- Run `npm run test:e2e`
[Detox](https://github.com/wix/detox) will run all benchmarks and show the results at the end.
### Author
Bruno Lemos (follow [@brunolemos](https://twitter.com/brunolemos) on twitter)