NPM vs. Bower

Monday, February 29th 2016

NPM vs. Bower

Let's start with the basics. What are NPM and Bower? They are both package managers for Javascript. NPM is for Node.js and Bower is everything else, specifically the front end (so javascript only).

The main difference between Bower and NPM is their dependency structure; NPM uses a nested dependency tree whereas Bower uses a flat tree. The distinction here is defining: because bower uses a flat tree that is easier to traverse through, retrieval of dependencies is faster, which is why it is often used on the front end, which is influenced by the performance of fast retrieval more so than the backend. However, the downside to this is that if a dependency relies on a specific version of another dependency, it may not work or break. It's for this reason that most people do not use many dependencies through bower and only stick to dependencies that are known to work together. For example, angular and angular-ui. The key point here is that bower does not like to download redundant dependencies, even if they are different versions, to boost the performance of the page load and reduce latency.

On the other hand, NPM resolves this problem by downloading any versions of dependencies that other dependencies rely on. (NPM solves the issue of dependency hell). This is why it is a nested tree instead of a flat tree: NPM will download the same dependencies more than once to ensure that all dependencies are compatible and functional. However, the downside to this is a hit to the performance, but in regards to the user experience, it is not noticeable because it is in the backend.

References:
http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm
http://maxogden.com/nested-dependencies.html