Bower

What is Bower?

• Bower is a package manager like NPM and it  primarily deals with Front End Dependencies.
• It works with GitHub to install the Dependencies in the Local Directory and is written in JavaScript.

Installation of Bower:

• Bower is installed with npm using the command npm install -g global.

[Note: -g flag places Bower globally]

• To validate if Bower has been installed correctly run the command bower --version

Installation of Dependencies:

• Let's try to install a bower component [which is none other than Front End Dependency like Angular, JQuery, JQueryUI etc]

• Navigate to the project root directory and run the command bower install angular and this command would place the angular related entities inside the directory named bower_components which is located right underneath Project Root where we run the command.

          [ Note: In case if we are unable to reach github.com, that's because firewall is preventing it and we get the error message as below

and we ought to use https:// for connecting to github.  hence run the command git config --global url."https://".insteadOf git:// as below

This would make Installed Git Client to fetch the contents]

Generation of bower.json

bower.json file helps in maintaining all the bower components and we can generate the file by running the command bower init at the root directory. This would generate the bower.json file

The use of generating bower.json is that we don't need to have to check in the bower_components directory and it's contents into version control system. Checking In just the bower.json would do. At the other side, when the Users check out the bower.json file, they run the command bower install command and that would place all the required contents into the bower_components directory. Try this command by deleting the bower_components directory and run this command .

Difference between NPM Vs Bower

When we closely observe, Bower and NPM may look to work the same but there are subtle differences.

• The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree(puts the burden of dependency resolution on the user).
• A nested dependency tree means that your dependencies can have its own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end. Imagine a site having to download three copies of jQuery.
• Nested Dependencies could offer stability with maintenance of different versions of dependencies possible in the sense as below

[node_modules]

 -> dependency A Version 1.4

 -> dependency B

    -> dependency A Version 1.2

 -> dependency C

    -> dependency B

       -> dependency A Version 1.3

    -> dependency D

• The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp etc where nested dependencies is imparted to give stability.