Bower FTW

In May of 2013, Mike Taylor of Opera Software declared that we can no longer use the "All The Things" meme. He didn't say anything about FTW, so I think I'm still in the clear.

If you haven't yet heard about Bower, it is essentially a node module built by Twitter and is billed as a "package manager for the web". You may be familiar with other package managers such as Node Packaged Modules (npm), NuGet, dpkg, Chocolatey or Homebrew. Apparently, even Steam is considered a "package manager". Given that we already have quite a few package managers, it begs the questions: Do we need yet another?

Package Management Is Hard

Simply put, a package manager is a system for installing, upgrading and removing shared software installs from a computer. Think of it this way, you install software A which depends on B. You then install C which depends on B. As this pattern continues, you are building up a giant game of Jenga. Each piece may or may not be important, but you won't know it until you remove it and the entire thing hits the floor. This is commonly known as "DLL HELL".

JavaScript in particular has an obscene amount of third party libraries available. If you follow EchoJS on Twitter, it seems like we get at least 5 new ones every day. Fortunately, JavaScript requires no installation to use. That's just one of the reasons why we love it. It can still be a bit of a pain each time you create a new project to add in your favorite libraries, and as your shared library base grows for JavaScript you begin to inherit all the complexities of a proper system, such as dependencies and upgrade conflicts.

Introducing Bower

Twitter introduced Bower late last year.  It's dead simple, and that is the very reason that you are going to love it. Bower copies packages from Git endpoints into your project, along with their dependencies. That is all. It also exposes some API's if you want to tie it into your build system. let's have a look at how to use it.

Installation

Installation is via an npm package with the global (-g) flag. This means that we are installing Bower as a system wide - or global package.

npm install -g bower

That's it. You are ready to go.

Finding Packages

You can search the Bower package directory from the command line. For instance, you might wonder if you can get Kendo UI from Bower.

bower search kendo

You can alternatively use the Bower Components site built by Sindre Sorhus to browse the Bower Component registry.

Installing Packages

It's use is just as simple. Let's say you have a project and you want to add Kendo UI. Kendo UI Web GPLv3 is now available via Bower. This means that you can add Kendo UI to your compatible open source project with one line. You can also of course use this with your valid license. Normally you would probably browse to your downloads directory or wherever you downloaded Kendo UI to, and then manually copy in the JavaScript and CSS files. If you are like me, then you can't ever find it and you are always downloading a new zip file.

No more! Bower is at your service and would be more than happy to go get the files for you and copy them into your project.

From the project directory, tell Bower to install Kendo UI.

bower install kendo-ui

That will add a components directory to your project. You may notice that not only has Kendo UI been added, but jQuery was added as well. What actually happened when you asked Bower to install Kendo UI?

1. Bower visits the Kendo UI Repo on GitHub
2. Bower checks out Kendo UI
3. The Kendo UI Repo Specifies that jQuery is a dependency AND which version it needs
4. Bower visits the jQuery repo on GitHub and sees that it has no dependencies
5. Bower checks out jQuery
6. Bower copies Kendo UI to the project
7. Bower copies jQuery to the project

By default, these files get copied to a "components" directory. Bower kindly requests that you not ever touch the contents of this directory.

If you inspect the "components" folder at this point, you will see both a "kendo-ui" and a "jquery" folder inside of it. If you open the jQuery folder, you will see both the minified and regular versions of jQuery.

So what happens when we install something else that depends on jQuery?

Just for fun, lets go ahead and install Twitter Bootstrap as well.

bower install bootstrap

Twitter Bootstrap also has a dependency on jQuery. If you check out the components folder, it still has one jQuery folder with 1 copy of jQuery. That's because booth Bootstrap and Kendo UI are compatible with the same versions of jQuery.

Removing Packages

We might decide that we don't need Twitter Bootstrap's help this time and go ahead and remove it. Like I mentioned before, Bower doesn't take too kindly to us manually removing a folder from the "components" directory. Bower does this for you in the form of the "uninstall" command.

bower uninstall bootstrap

Now Bootstrap is removed, but jQuery and Kendo UI are still there. If you were to uninstall Kendo UI, Bower would remove jQuery too because there is no longer anything present that requires it as a dependency.

But I Don't Want A "Components" Directory!

That's fair. You can configure Bower to put the packages wherever you like using a .bowerrc file.

.bowerrc Files

This file allows you to override defaults for Bower. You can define a global .bowerrc file by placing it in your home folder (i.e. ~/). As you might have guessed, if you put a .bowerrc file in a project directory, it will overwrite the global one.

JSON is used as the format for the file. To put your scripts in a folder creatively named "scripts", your .bowercc file might look like this.

{
  "directory": "scripts"
}

The Real Power Of Bower

While having an internet facing package manager is great, you can actually download the Bower Server and setup your own internal private package repository.

Then you can expand your .bowerrc files to specify that custom endpoint for your packages. You can also define a custom search path to add additional endpoints that you might want to search aside from the main endpoint.

{
  "directory": "bower_components",
  "endpoint": "http://localhost/bower",
  "searchpath": [
    "http://bower.domain.com"
  ]
}

This allows you to control your own internal packages to share amongst the team, but not necessarily with the world. All you need is a backing internal Git store and you are good to go.

Let Bower Do The Grunt Work

Bower is really the missing piece of your development workflow when it comes to JavaScript. Let Bower handle the grunt work so you can spend more time building apps, and less time hunting down dependencies. Once you realize that you never again need to download and copy files to get a web project going, it seems positively Cro-Magnon to ever go back.

Additional Reading

• Bower GitHub Repo 
• Meet Bower: A Package Manager For The Web

Be sure to check out the README on the Bower GitHub repo. There are quite a few commands that I didn't list here. Remember when in doubt, just type "Bower" and it will give you some hints on what you can do next.