What Is Bower And Why You Need It

So you've heard everyone talking about this mythical creature called Bower. But what exactly is it? Better to see once than to hear 100 times, so before we proceed any further take a peek at their site.

The problem

Recall how you used to manage, and maybe still do, your 3rd party libraries. Firstly you went to their official site or maybe github repository. After finding the latest minified version, you would get something like this - xxx-1.0.1.min.js, then downloaded and saved it into your project. At last referencing it in the HTML would do the trick by copy pasting the script tag - <script src="//code.jquery.com/jquery-1.11.0.min.js">.

But what would have happened if a new version came up? Well, if you were aware of the update, you would repeat the process again and put xxx-1.0.2.min.js in your library folder. Then you would change the reference in your HTMLs or JavaScript files. You could of course rename the file to xxx.js and omitting the version and 'min' suffix, but then you'd need to enter the file itself to verify the version; that is if the version was written there of course.

All this should have been done just for one library, but you well know that today's applications depend upon dozens of 3rd libraries. Each of them has its own version and keeping track of their changes has become a tedious if not impossible task for a man who just wanted to use some cool library. This is where Bower comes to help.

The solution

Basically, Bower is a package manager of JavaScript libraries. It was designed specifically to maintain the front-end related libraries like JQuery, Underscore and so on. You can use Bower to download libraries from the command line, without having to manually download each project from their respective sites. Bower keeps track of these packages in a manifest file called bower.json. Once you downloaded the package, the usage is up to you - Bower doesn't interfere nor assists with the loading process of the libraries.

The rumors

There is a lot of confusion among newcomers to the JavaScript package management world about the purpose of each tool and needs they come to solve. Let's talk about the most common rumors.

Bower vs npm

npm is most commonly used for managing Node.js modules, but some front-end libraries has crept into its repositories and may be downloaded from there as well.

Bower is created solely for the front-end and is optimized with that in mind. 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.

Bower vs Requirejs

Bower is intended to keep track of the packages, whereas Requirejs for managing the dependencies inside the project. Once you've downloaded all the required libraries using the Bower, you would still need to reference all of them in your code in the right order. This is what Requirejs does.

The usage

Let us see how to install and use the Bower. In order to install it, just get it from the npm using the following code:

npm install -g bower

If you don't know what npm is or don't have one installed on your machine, please read the JavaScript developer toolkit article. Go to the project's folder and initiate the bower configuration file. The tool will ask you couple of question like naming and versions before it starts. To do this, type the following:

bower init

Once everything is set up, start downloading packages by typing their name:

bower install jquery

or typing the github repository directly:

bower install https://github.com/jquery/jquery

Bower supports many options to make your life easier like downloading specific version or auto-update all or some packages at once. All these can be read about on their site.