I am excited to announce that I have taken a personal challenge that I will learn a new technology every day for a month and will blog each new technology. I will also try to do a small screencast.  After my normal office working hours I will spend couple of hours learning a new technology and one hour writing about what I learned.

The goal of this activity is to get familiar with lot of new things happening in community. My main focus will be on JavaScript and related technologies but it can be Java or other technology as well. There will be some technologies on which I might spend multiple days but I will pick a new subtopic of that technology each time. Wherever it makes sense I will try to show how it can work with OpenShift. I am expecting this to be fun and a good learning experience so wish me luck!

As my first topic I have decided to learn about Bower.

Bower Dependency Management

What is Bower?

Bower is a package manager for client side technologies. It can be used to search , install, uninstall web assets like JavaScript, HTML, and CSS. It is not an opinionated tool and leaves lot of choice to the developers who are using the technology. There are various tools built on top of bower like YeoMan and Grunt. We will talk about them in future posts.

Why should I care?

  1. Saves time : The first reason why should learn about bower is that it will save the time you spend finding client side dependencies. Each time I have to install jQuery I go to the jQuery website and either download the package or use the CDN version. With bower, you can just type a command and you will get jquery installed on your local machine. You don't have to remember version numbers etc. You can look up any library information using bower info command.
  2. Helps you work offline : Bower creates a .bower folder in the users home directory where it downloads all the assets and keeps them available for offline usage when you install a package. If you are familiar with Java, Bower is similar to the *.m2* repository for the popular Maven build system. Each time you download any repository it will install that library in two folders -- one in your application folder and another in the .bower directory under the user's home directory. Given this, the next time you need this repository it will pick up that version from the user's home .bower directory.
  3. Makes it easy to express client side dependencies : You can create a file called bower.json where you can specify all your client side dependencies. Anytime you need to figure out what all libraries you are using you can refer to this file.
  4. Makes update easy : Suppose a new version of a library is released with an important security fix, in order to install the new version you just have to run a command and bower will update all of your dependencies with the new version.

Prerequisite

In order to install bower you need to have the following installed on your machine.

  1. Node : Download the latest version of node.js from http://nodejs.org/
  2. NPM : NPM is node package manager. It comes bundled with Nodejs installation. So, once you have installed Node you will have NPM installed as well.
  3. Git : You need to have git installed on your machine as some packages fetch code from git repositories. So, install git for your operating system.

Install Bower

Once you have installed all the prerequisites you are ready to install bower. To install bower type the following command:

$ npm install -g bower

The command shown above will install bower globally. The -g option is used to signify a global install.

Let's Use Bower

After you have installed bower, you will have ability to use the bower command line. To see all the things you can do with bower, type help command as shown below:

$ bower help
Usage:
 
bower <command> [<args>] [<options>]
 
Commands:
 
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
 
Options:
 
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root

Installing package

Bower is a package manager so we can use it to install new packages that we want to use in our applications. For example, let's look at how to install JQuery using the Bower system. Create a new folder somewhere on your machine where you would like to install packages and type the following:

$ bower install jquery

After running this command you will have a bower_components folder inside the directory you were working. The content of bower_components is shown below:

$ tree bower_components/
bower_components/
??? jquery
??? README.md
??? bower.json
??? component.json
??? composer.json
??? jquery-migrate.js
??? jquery-migrate.min.js
??? jquery.js
??? jquery.min.js
??? jquery.min.map
??? package.json
 
1 directory, 10 files

Using Package

Now we can use the jquery package in our application. Let's create a simple html5 file which will where we will jQuery.

<!doctype html>
<html>
<head>
<title>Learning Bower</title>
</head>
<body>
 
<button>Animate Me!!</button>
<div style="background:red;height:100px;width:100px;position:absolute;">
</div>
 
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</body>
</html>

As you can see you just reference the location of jquery.min.js file and you are done.

List All Packages

If you want to find out all the packages installed in your applications you use list command to get all the information:

$ bower list
bower check-new Checking for new versions of the project dependencies..
blog /Users/shekhargulati/day1/blog
??? jquery#2.0.3 extraneous

Searching Package

Suppose you want to use Twitter Bootstrap in your application but you are not sure its package name. To find the package name you can use search command:

$ bower search bootstrap
Search results:
 
bootstrap git://github.com/twbs/bootstrap.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
sass-bootstrap git://github.com/jlong/sass-twitter-bootstrap.git

Package Information

If you want to get information about a particular package then you can info command to get information about that package:

$ bower info bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.0.0.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.0.0
 
{
name: 'bootstrap',
version: '3.0.0',
main: [
'./dist/js/bootstrap.js',
'./dist/css/bootstrap.css'
],
ignore: [
'**/.*'
],
dependencies: {
jquery: '>= 1.9.0'
},
homepage: 'https://github.com/twbs/bootstrap'
}
 
Available versions:
- 3.0.0
- 3.0.0-rc1
- 3.0.0-rc.2
- 2.3.2
.....

If you just want information about single package, you can use the info command:

$ bower info bootstrap#3.0.0
bower bootstrap#3.0.0 cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#3.0.0 validate 3.0.0 against git://github.com/twbs/bootstrap.git#3.0.0
 
{
name: 'bootstrap',
version: '3.0.0',
main: [
'./dist/js/bootstrap.js',
'./dist/css/bootstrap.css'
],
ignore: [
'**/.*'
],
dependencies: {
jquery: '>= 1.9.0'
},
homepage: 'https://github.com/twbs/bootstrap'
}

Uninstalling a Package

To uninstall a package you can use uninstall command:

$ bower uninstall jquery

Using bower.json file

We can use bower.json file to make installing packages easier. You can create a file title bower.json in your application root folder and define its dependencies. You can use bower init command to create bower.json file as shown below.

$ bower init
[?] name: blog
[?] version: 0.0.1
[?] description:
[?] main file:
[?] keywords:
[?] authors: Shekhar Gulati <shekhargulati84@gmail.com>
[?] license: MIT
[?] homepage:
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No
 
{
name: 'blog',
version: '0.0.1',
authors: [
'Shekhar Gulati <shekhargulati84@gmail.com>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
],
dependencies: {
jquery: '~2.0.3'
}
}
 
[?] Looks good? Yes

You can view bower.json file

{
"name": "blog",
"version": "0.0.1",
"authors": [
"Shekhar Gulati <shekhargulati84@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.0.3"
}
}

You will notice that it added our jQuery dependency.

Now lets suppose we want to use twitter bootstrap as well. We can install twitter bootstrap and update the bower.json file using following command:

$ bower install bootstrap --save

It will install the latest version of Twitter Bootstrap and update the bower.json file as well:

{
"name": "blog",
"version": "0.0.1",
"authors": [
"Shekhar Gulati <shekhargulati84@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.0.3",
"bootstrap": "~3.0.0"
}
}

That's it for day 1! Hopefully this will give you enough information about bower and allow you try it out for yourself.

Next Steps

Automatic Updates

Stay informed and learn more about OpenShift by receiving email updates.