2020 Frontend Frameworks Installation Comparison

Popularity Stat

In the beginning of 2020, React, Vue and Angular still dominate the market. So far we have dependencies with following:

• React (52491, 60.8%)
• Vue (23845, 27.6%)
• Angular (9990, 11.6%)

I’m pretty lucky that my current employer is using all of the frameworks, so I could have chance to keep updating across all communities.

Get Started with Project Creating

In order to start using the frameworks, we need create a project based on the framework. All of three frameworks provide handful cli tool to help us create the project in convenience.

I’m trying to compare and treat all of them fairly, so I will use default settings to create the corresponding project.

React

npx create-react-app a-react-app

React recommended use `npx` command to create the app. npx will basically install and run create-react-app first and then use create-reaact-app cli tool to create project for you.

At first npx install 99 packages.

npx: installed 99 in 5.381s

By default create-react-app use yarn to install the packages, it installed react, react-dom, and react-scripts with cra-template, which takes ~5s.

> [1/4] 🔍 Resolving packages…
> [2/4] 🚚 Fetching packages…
> [3/4] 🔗 Linking dependencies…
...
✨  Done in 15.07s.
...
Installing template dependencies using yarnpkg...
...
✨  Done in 5.98s.
Removing template package using yarnpkg...
✨  Done in 8.41s.

So totally, it takes 34.84 secs to setup an app. (I also verify the timer with my cell phone timer App manually, the final 34.84 secs is correct; react didn’t lie).

I also tested local create-react-app , but the result turns out that nothing improved. It would still take around 35 sec.

Vue

Vue is getting popular recently, growing faster than react, but the ecosystem hasn’t mature yet comparing with React (but Angular is actually more mature than any of them).

In size, Vue is about 80 kb which is the most lighted framework among those three tops (React, Vue and Angular), but the app initialization speed isn’t really that fast, it would take around 30 secs in total to setup an vue app.

$ vue create vue_app
Vue CLI v4.1.2
✨  Creating project in /Users/wlin/dev/vue_app.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
...
added 1228 packages from 862 contributors and audited 24736 packages in 24.821s
...
added 72 packages from 42 contributors and audited 25019 packages in 6.159s
$ cd vue_app
$ npm run serve

Angular

Angular app creating speed is actually faster than I expected. It takes about 33 secs to finish all process, yet it might ask for two inputs before you get started.

> ng new ng-app
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
...
added 1453 packages from 1067 contributors and audited 19432 packages in 33.146s
...
Successfully initialized git.

Conclusion

There isn’t that much speed differences on creating the app, Vue might be slightly faster, but the ecosystem could be a concern.

In my personal opinion, I would suggest use React as default choice for your production development. For heavy data handling, Angular could be the one. Vue would be nice to try out especially if you need a backup solution especially for international project (who knows what would happen if those big companies have to follow a certain regulations).