react-native-css-in-js-benchmarks's Introduction

CSS in JS Benchmarks

for React Native

Results

See 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

Know any other? Please open an issue or, preferrably, a pull request :)

Inspiration

The idea and some code pieces are heavily inspired by A-gambit/CSS-IN-JS-Benchmarks, which benchmarks were made for React Web.

How to run

Run git clone [email protected]: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 will run all benchmarks and show the results at the end.

Author

Bruno Lemos (follow @brunolemos on twitter)

react-native-css-in-js-benchmarks's People

Contributors

Stargazers

Watchers

react-native-css-in-js-benchmarks's Issues

Add emotion tests

Hi, Bruno! Could you add tests with Emotion library?

Encountered error trying to build your project

I cloned and tried to build your project and go this error. Wondering if you know what it is? I would love to play around with your project.

/Users/jausten/Library/Detox/ios/fa4c48a94cfa11d8640596338dad83dc666c8183 was found, but could not find Detox.framework inside it. This means that the Detox framework build process was interrupted.
deleting /Users/jausten/Library/Detox/ios/fa4c48a94cfa11d8640596338dad83dc666c8183 and trying to rebuild.
Extracting Detox sources...
Building Detox.framework from /Users/jausten/Documents/GitHub/react-native-css-in-js-benchmarks/node_modules/detox/ios_src...
child_process.js:651
throw err;
^

Error: Command failed: /Users/jausten/Documents/GitHub/react-native-css-in-js-benchmarks/node_modules/detox/scripts/build_framework.ios.sh
at checkExecSyncError (child_process.js:611:11)
at Object.execSync (child_process.js:648:13)
at Object. (/Users/jausten/Documents/GitHub/react-native-css-in-js-benchmarks/node_modules/detox/scripts/postinstall.js:2:27)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)

Recommend Projects

brunolemos / react-native-css-in-js-benchmarks Goto Github PK