Teaching myself frontend development -- part 3


Frontend dependency trees seem terrifying

I did a little experiment today: I used my IDE’s (WebStorm) built-in “create new project” feature to create a vuejs, angular, and a react starter project. Then I compared the total number of installed dependencies for each project using

npm ls --all | grep -v deduped | grep -v OPTIONAL | wc -l

which should count all installed packages without duplicates. For comparison, I counted the installed packages on one of my python projects that is actually a full-blown production application:


FrameworkNumber of direct dependenciesTotal number of installed packages
Angular starter project251345
React starter project91951
Vue starter project111336
Python (Django) production app incl. all development libraries82113


Wow! These numbers seem excessive to me.

The JS starter project are newly created projects without any business logic whatsoever, while the python application is a real-life application that is used in production and serving paying customers. I thought the 234 python packages are already a lot, but the JS starter make them pale in comparison.

What I do like about npm is that it has a built-in mechanism to check for security vulnerabilities of packages, and that this is run when installing via npm install. It can also be manually invoked using npm audit. (If you are using python, you will need to use a third-party tool for security alerts. The package manager pipenv provides such a feature: pipenv check.)


See also