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".
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 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.
You can search the Bower package directory from the command line. For instance, you might wonder if you can get Kendo UI from Bower.
Searching The Bower Registry
bower search kendo
You can alternatively use the Bower Components site built by Sindre Sorhus to browse the Bower Component registry.
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.
Install jQuery With Bower
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?
- Bower visits the Kendo UI Repo on GitHub
- Bower checks out Kendo UI
- The Kendo UI Repo Specifies that jQuery is a dependency AND which version it needs
- Bower visits the jQuery repo on GitHub and sees that it has no dependencies
- Bower checks out jQuery
- Bower copies Kendo UI to the project
- 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.
Install Bootstrap With Bower
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.
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.
Uninstall Twitter Bootstrap
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.
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.
Sample .bowerrc File
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.
.bowerrc File For Internal Bower Server
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
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.