Bower is a package manager for front end web development. It stores all sorts of CSS and Javascript libraries.
Why do you need to use it? You don't. But as I see it, this is the scenario it addresses, and you should decide for yourself if you're fed up with that scenario or not.
You find a new library for javascript that you want to use in your project, maybe you're on the official site for the library, maybe you're on it's github, maybe those are the same thing. You download or clone the project to your computer. You then copy and paste the files into your project. That's pretty easy. Well a few months go by, and you realize the awesome guys that build your new library are really fast at releasing new versions, and you're a few behind. You make your way back to awesomelibjs.com, download the new version, copy it, paste it into your project, and delete the old version. Months go by, you've found 27 other awesomelib.com's, they all update all the time, you have employees now and everyone is confused. No one has any idea which versions of which libraries you're using, which ones need updated or why. You spend most of your life downloading, copying and pasting folders from the internet. Woe is you.
You can imagine a thousand ways this gets even worse, I think I've made the point though, so now let me introduce you to Bower. You can basically think of him/her as a new employee, you don't pay, to copy and paste things for you. Let's call it a her, because as you'll see, she's a thing of beauty.
Bower has a components registry with thousands of Javascript and CSS libraries. Most things you want to use, are already there. Let's say awesomelibjs is in the regristry. You will tell bower to get awesomelibjs for you, and she will make a components/ folder in your project and place awesomelibjs in it. She's an intelligent bird, she sees that awesomelibjs is a jQuery plugin. If you don't already have jQuery in your components/ folder, she will download it too. She is very dilligent, she keeps a record of all the libraries in your project, their dependencies, and their version numbers.
Move over employee of the month.
Install bower with npm. That sentence is short for - install a javascript package manager, with a javascript package manager. More on that later.
#!bash
$ npm install -g bower
Go to the registry. Or access it on the command line via:
#!bash
$ bower search awesomelibjs
When you find a component you want to install:
#!bash
$ bower install awesomelibjs --save
The --save flag tells bower you would like to keep a record of things. That record is stored in bower.json as a "dependency". If your project doesn't have a bower.json, you can make one with:
#!bash
$ bower init
She will ask you a few questions and give you something like this:
bower.json
#!javascript
{
"name": "mything",
"version": "0.0.0",
"ignore": [
"**/.*",
"node_modules",
"components"
],
"dependencies": {
"awesomelibjs": "~1.1.4"
}
}
Your project is now dependent on awesomelibjs versions between 1.1.4 and 1.2.x. That's what the ~ does.
This bower.json file is nice because, let's say someone else wants to work on your project. They can run $ bower install with no arguments and bower will reference the "dependencies" key, and go get all the components they need in order to get started.
Bower has other nice features, like update, uninstall, and list. I encourage you to read the online documentation or use $ bower help to get more info on what you can do.
The bower.json is also used when you want to register your project with bower. Your project needs to be hosted on github, and you need to add a "main" key to bower.json indicating which file is the entry point to your component.
#!bash
$ bower register mything git://github.com/username/mything.git
This will put the "mything" into the bower registry.
When someone else runs $ bower install mything --save they will recieve your entire mything github repo in components/mything/. This is just my opinion, but that's a litte excessive. Usually when you want a web package you don't want an entire git repository, you just want the white meat (i.e. relevant files). It's good etiquette, to utilize the "ignore" key in order to simplify the package for your consumers. Here is the bower.json from a component I recently published named backbone-gcm
backbone-gcm - bower.json
#!javascript
{
"name": "backbone-gcm",
"version": "0.1.0",
"main": "backbone-gcm.js",
"ignore": [
"lib",
"test",
"example",
"util",
"node_modules",
"components",
"Gruntfile.js",
"**/.*",
"**/*.json",
"**/*.html"
],
"dependencies": {
"backbone": "~1.0.0",
"underscore": "~1.4.4",
"jquery": "~2.0.2"
},
"devDependencies": {
"mocha": "~1.9.0",
"requirejs": "~2.1.6",
"chai": "~1.6.0"
}
}
When you run $ bower install backbone-gcm --save this is what you get.
#!bash
backbone-gcm/
- LICENSE.md
- README.md
- backbone-gcm.js
- backbone-gcm.min.js
All your consumer needs is the library, a min file, info about how they can steal it, and how they can use it. Please take the 10 seconds it takes to update your ignore list, you'll be contributing to the simplification of the world when you do.
No. Well, yes. But bower is more convenient for client side libaries. Like I stated at the top, its a copy/paster. NPM is more robust, is for node.js modules, and is just not a place you want to publish your jQuery plugins and CSS. My strategy is to keep npm clear of my client side libraries, they don't belong there. The opposite is true as well, don't publish your node packages to bower.
Thanks for reading, If you liked it, the best thing you can do to thank me is put it on reddit, follow me on github: nackjicholson or on twitter @nackjicholsonn, and please comment if you have questions, suggestions, or if you just want to make me moderate spam.