Wednesday 13 July 2016

Difference Between Bower and NPM



  • Npm and Bower are both Project dependency management tools. But the main difference between both is npm is used for installing Node js modules but bower js is used for managing front end components like html,css,js etc.



  • npm is most commonly used for managing Node.js modules, but it works for the front-end too when combined with Browserify etc



  • Bower is front-end Package Manager. The biggest difference is that npm does nested dependency tree that increases its size eventually while Bower requires a flat dependency tree No nested versioning of Packages

NESTED DEPENDENCY TREE
A nested dependency tree means the dependencies or Packages we added in our project can also be dependent on other dependencies and those can further have more dependencies and so on. This is not a problem for a website where you does not care about space and performance of application . It tells you need to care about dependency conflicts as all your dependencies use their own version of Underscore.This increases size and make heavy load for pages. Imagine a site having to download three copies of jQuery as due to different packages require different version of jquery

The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.

SEPARATE PACKAGE DEPENDENCY APPROACH
The main difference between npm and Bower is the approach for installing package dependencies. npm installs dependencies for each package separately, and as a result makes a big package dependency tree (node_modules/grunt/node_modules/glob/node_modules/...), where there could be several version of the same package. For client-side JavaScript this is unacceptable: you can't add two different version for jQuery or any other library to a page. With Bower each package is installed once (jQuery will always be in the bower_components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won't install the package incompatible with one that's already installed.

Share this

1 Response to "Difference Between Bower and NPM"

  1. Great Explanation ! Saved lot of my time and resolved many confusions . Thank you Admin .

    ReplyDelete