Automated analysis of what frameworks give you 'out of the box'
This is a follow-up to JavaScript Framework Battle: ‘Hello World’ in each CLI
How does it work?
For each CLI tool, the following happens
- First, the 'scaffold' command is run to create a default application
- Then the 'build' is run to produce the production ready assets
- A lightweight server is then spun up pointing at the newly created production app
- Then we run Lighthouse against the app to gather metrics.
Currently I'm just added JS bundle size as it's of particular interest to me (wanting to begin projects with as little vendor code as possible to reduce size). But I will add more metrics soon.
| Framework | JS Bundle Size (compressed, as served in the browser) |
|---|---|
| Preact (Create Preact App) | 9.29 kB |
| Inferno (Create Inferno App) | 17.5 kB |
| Glimmer (Ember CLI) | 34.7 kB |
| Vue (Vue CLI) | 45.9 kB |
| React (Create React App) | 47.7 kB |
| Angular 2 (Angular CLI) | 94.6 kB |
| Ember (Ember CLI) | 205 kB |
Up next
Once we have the setup to run all of these tools in a uniform way, it will make it easier for more automated benchmarks in the future. For example, we could compare hacker-news clones etc using the massive amount of detail you can get out of Lighthouse.
Crossbow tasks
The following tasks have been defined by this project's Crossbow configuration. Run any of them in the following way
$ crossbow run <taskname>| Task name | Description |
|---|---|
|
Create production Glimmer app & test in lighthouse |
|
Create production Ember app & test in lighthouse |
|
Create production React app & test in lighthouse |
|
Create production *Preact app & test in lighthouse |
|
Create a production NG2 app & test in lighthouse |
|
Create a production Vue app & test in lighthouse |
|
Alias for: - @sh yarn global add create-react-app create-preact-app ember-cli/ember-cli vue-cli @angular/cli perf-battle |
|
Alias for: - @sh rm -rf $GLIMMER_DIR |
|
Alias for: - @npm ember new $GLIMMER_DIR -b @glimmer/blueprint |
|
Alias for: - @sh cd $GLIMMER_DIR && ember build --environment="production" |
|
Alias for: - @sh pushstate-server $GLIMMER_DIR/dist $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/glimmer.json |
|
Alias for: - glimmer:perf-battle- @cb exit |
|
Alias for: - @sh rm -rf $EMBER_DIR |
|
Alias for: - @npm ember new $EMBER_DIR |
|
Alias for: - @sh cd $EMBER_DIR && ember build --environment="production" |
|
Alias for: - @sh pushstate-server $EMBER_DIR/dist $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/ember.json |
|
Alias for: - ember:perf-battle- @cb exit |
|
Alias for: - @sh rm -rf $CRA_DIR |
|
Alias for: - @npm create-react-app $CRA_DIR |
|
Alias for: - @sh cd $CRA_DIR && yarn run build |
|
Alias for: - @sh pushstate-server $CRA_DIR/build $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/cra.json |
|
Alias for: - cra:perf-battle- @cb exit |
|
Alias for: - @sh rm -rf $CPA_DIR |
|
Alias for: - @npm create-preact-app $CPA_DIR |
|
Alias for: - @sh cd $CPA_DIR && yarn run build |
|
Alias for: - @sh pushstate-server $CPA_DIR/build $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/cpa.json |
|
Alias for: - cpa:perf-battle- @cb exit |
|
Alias for: - @sh rm -rf $NG_DIR |
|
Alias for: - @npm ng new $NG_DIR |
|
Alias for: - @npm cd $NG_DIR && ng build --aot --target=production |
|
Alias for: - @sh pushstate-server $NG_DIR/dist $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/ng.json |
|
Alias for: - ng:perf-battle- @cb exit |
|
Alias for: - @sh rm -rf $VUE_DIR |
|
Alias for: - @npm vue init webpack $VUE_DIR |
|
Alias for: - @npm cd $VUE_DIR && yarn && yarn run build |
|
Alias for: - @sh pushstate-server $VUE_DIR/dist $PORT |
|
Alias for: - @npm perf-battle http://localhost:$PORT --reporter size --output json --outFile results/vue.json |
|
Alias for: - vue:perf-battle- @cb exit |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent