Day 1 : Bower — Manage Your Client Side Dependencies

From today onwards I have taken a challenge that I will learn a new technology every day for a month and will blog about it. 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 that. The goal of this activity is to get familiar with lot of new things happening in community. My main focus would 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 new topic each time within that technology. Wherever it makes sense I will try to show how it can work with OpenShift. So, I am expecting it to be fun and a good learning experience.

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

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. 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 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 just look up for any library information using bower info command.
2. Helps you work offline : Bower creates a .bower folder in user home directory where it downloads all the assets and keep them available for offline usage when you install any package. Its like .m2 repository in Maven Java. Each time you download any repository it will install that library in two folders one in your application folder and another in .bower under user home directory. So , next time you need this repository it will pick up that version from user home .bower folder.
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. So , 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 bower update and all your dependencies will be updates.

Prerequisite

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

1. Node : Download the latest version of Nodejs 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 command shown below.

npm install -g bower

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

Let’s Use Bower

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

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

As bower is a package manager so we can use it to install packages. Let’s install jQuery using bower. Create a new folder somewhere on your machine where you would like to install packages.

bower install jquery

After running this command you will have 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 then you can run

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'
}

Uninstall 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 day1.Hopefully this will give you enough information about bower to get started quickly.

Shameless Plug

If you are a Java, Python, Node.js, Ruby, or PHP developer then you should take a look at OpenShift. OpenShift is a public Platform as a Service, and you can use it to deploy your applications for free.