Day 1: Bower--Manage Your Client Side Dependencies

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.

What's Next

How do you install bower on openshift? And how do you install your client dependencies on app Start ?

Hey Christian,

Check this thread out, it should help -> https://www.openshift.com/forums/openshift/bower-install-fails

I'd like to use bower in my PHP cartridge but I am not sure how to install it. Changing the $HOME dir doesn't seem to completely work, but pops up another "warning?"

npm WARN engine bower@1.3.1: wanted: {"node":">=0.10.0"} (current: {"node":"0.6.20","npm":"1.1.37"})

Would be cool if we could have bower available by default ;)

1) You describe how to create the bower.json file, with it's dependencies. But you don't explain what to use it for, or do you? I guess the bower.json file can then be shipped with a webapp, and then deployed on a server by running some bower command using the bower.json file. Or what?

2) You start the post by writing that it saves time. That you normally go to jQuery's website and download the js-file or copy the CDN address. But even when using Bower to install all the dependencies, you still need to go and look for the path to the dependencies. E.g. /bower_component/jquery/jquery.js. It doesn't really make it that much easier, does it?

3) Don't you need to pick out which files to put in your static files folder on your website? I guess you don't want to make all the jQuery files (including the src folder) public.