Bower and Require.js Integration

In the past we've talked about Bower package manager and God knows, I have been obsessively repeating myself about using Require.js and it's integration with object oriented programming. So how do they integrate with each other? In this article we'll cover the integration of both and see how they get along together.

Bower Initiation

Let's start by defining, which packages we want to use in our project by filling the bower.json. You can create one yourself or run bower init command for interactive creation.

{
    "name": "RequireJS Starter",
    "version": "1.0.0",
    "dependencies": {
        "jquery": "1.9",
        "underscore": null,
        "requirejs": null
    }
}

So we'll be needing jQuery, Underscore and of course Require.js. Putting null as a version number will download the latest version. Now run bower install to download all the packages into bower_components folder. You can change the location along with other thing using .bowerrc configuration file. After everything is in place, we'll configure our dependencies in our entry point JavaScript file and use the libraries once retrieved:

require.config({
    paths: {
        "jquery": "bower_components/jquery/jquery",
        "underscore": "bower_components/underscore/underscore"
    }
});
require(['jquery', 'underscore'], function($, _) {
    $('body').text(_.range(10));
});

Automagical wire-up

This is how it works according to the writter of bower-requirejs plugin. It looks at the libraries installed by Bower and creates a JavaScript file with require.config call with all the paths in place. Just run the following line in your bash console:

./node_modules/.bin/bower-requirejs -c destination/config.js

It has some interesting flags you can use, all of them well described in the documentation.

CDN Integration

But my mother told me local libraries are bad. She was right! We should always try to use CDN for common libraries, since chances are it had been already downloaded to user's computer and cached version would be used instead of downloading fresh version from our server. Let's edit our code and add cdnjs urls as a first priority. I prefer them over others because they offer the biggest variety of libraries and it's always good practice to work with a single provider. We'll leave our versions as a fallback if something bad happens to the CDN:

require.config({
    paths: {
        "jquery": ["http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min", "bower_components/jquery/jquery"],
        "underscore": ["http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min", "bower_components/underscore/underscore"]
    },
    waitSeconds: 10
});
require(['jquery', 'underscore'], function($, _) {
    $('body').text(_.range(10));
});

Notice the waitSeconds parameter we've added configuring how much time to wait for the CDN's versions. Hope things started to clear bit by bit. What to use and how to use it. I'll continue to write articles on this topic including Grunt integration.

What Is Bower And Why You Need It

So you've heard everyone talking about this mythical creature called Bower. But what exactly is it? Better to see once than to hear 100 times, so before we proceed any further take a peek at their site.

The problem

Recall how you used to manage, and maybe still do, your 3rd party libraries. Firstly you went to their official site or maybe github repository. After finding the latest minified version, you would get something like this - xxx-1.0.1.min.js, then downloaded and saved it into your project. At last referencing it in the HTML would do the trick by copy pasting the script tag - <script src="//code.jquery.com/jquery-1.11.0.min.js">.

But what would have happened if a new version came up? Well, if you were aware of the update, you would repeat the process again and put xxx-1.0.2.min.js in your library folder. Then you would change the reference in your HTMLs or JavaScript files. You could of course rename the file to xxx.js and omitting the version and 'min' suffix, but then you'd need to enter the file itself to verify the version; that is if the version was written there of course.

All this should have been done just for one library, but you well know that today's applications depend upon dozens of 3rd libraries. Each of them has its own version and keeping track of their changes has become a tedious if not impossible task for a man who just wanted to use some cool library. This is where Bower comes to help.

The solution

Basically, Bower is a package manager of JavaScript libraries. It was designed specifically to maintain the front-end related libraries like JQuery, Underscore and so on. You can use Bower to download libraries from the command line, without having to manually download each project from their respective sites. Bower keeps track of these packages in a manifest file called bower.json. Once you downloaded the package, the usage is up to you - Bower doesn't interfere nor assists with the loading process of the libraries.

The rumors

There is a lot of confusion among newcomers to the JavaScript package management world about the purpose of each tool and needs they come to solve. Let's talk about the most common rumors.

Bower vs npm

npm is most commonly used for managing Node.js modules, but some front-end libraries has crept into its repositories and may be downloaded from there as well.

Bower is created solely for the front-end and is optimized with that in mind. The biggest difference is that npm does nested dependency tree (size heavy) while Bower requires a flat dependency tree (puts the burden of dependency resolution on the user).

A nested dependency tree means that your dependencies can have its own dependencies which can have their own, and so on. This is really great on the server where you don't have to care much about space and latency. It lets you not have to care about dependency conflicts as all your dependencies use e.g. their own version of Underscore. This obviously doesn't work that well on the front-end.

Bower vs Requirejs

Bower is intended to keep track of the packages, whereas Requirejs for managing the dependencies inside the project. Once you've downloaded all the required libraries using the Bower, you would still need to reference all of them in your code in the right order. This is what Requirejs does.

The usage

Let us see how to install and use the Bower. In order to install it, just get it from the npm using the following code:

npm install -g bower

If you don't know what npm is or don't have one installed on your machine, please read the JavaScript developer toolkit article. Go to the project's folder and initiate the bower configuration file. The tool will ask you couple of question like naming and versions before it starts. To do this, type the following:

bower init

Once everything is set up, start downloading packages by typing their name:

bower install jquery

or typing the github repository directly:

bower install https://github.com/jquery/jquery

Bower supports many options to make your life easier like downloading specific version or auto-update all or some packages at once. All these can be read about on their site.