1. Bower
Electronic supplementary material
The online version of this chapter (doi: 10.1007/978-1-4842-0662-1_1 ) contains supplementary material, which is available to authorized users.
Great things are done by a series of small things brought together.
Vincent Van Gogh
The concept of package managemen t , also known as dependency management , is not new. Utilities within this category provide developers with a mechanism for managing the various third-party libraries that a project relies on. Widely used examples include
npm : The package manager for Node.js
Composer : A tool for dependency management in PHP
pip : The PyPA recommended tool for installing Python packages
NuGet : The package manager for the Microsoft development platform including .NET
While package management is hardly a new idea, a practice that has only recently begun to see widespread adoption is the application of this concept to the management of front-end web assetsthe JavaScript libraries, stylesheets, fonts, icons, and images that serve as the building blocks of modern web applications. The need for such structure has become evident as the foundations on which modern web applications are built have grown in complexity. Web applications that once relied on a small selection of broadly defined, one size fits all third-party libraries (e.g., jQuery) now find themselves using the work of many more smaller libraries, each with a tightly defined purpose. Benefits of this approach include smaller modules that are easier to test, as well as an enhanced degree of flexibility on the part of the parent application, which can more easily extend third-party libraries or replace them altogether when necessary.
This chapter is designed to get you up and running quickly with Bower, the front-end package manager whose roots lie in open source initiatives at Twitter. Topics covered include
Installing and configuring Bower
Adding Bower to a project
Finding, adding, and removing packages
Semantic Versioning
Managing the dependency chain
Creating Bower packages
Getting Started
All interaction with Bower occurs through a command-line utility that can be installed via npm. If you do not already have Bower installed, you should install it before you continue, as shown in Listing .
Listing 1-1. Installing the bower Command-Line Utility via npm
$ npm install -g bower
$ bower --version
1.3.12
Note
Nodes package manager (npm) allows users to install packages in one of two contexts: locally or globally. In this example, bower is installed within the global context, which is typically reserved for command-line utilities.
Configuring Bower
Bower is configured on a per-project basis through a single (optional) JSON file that exists in your projects root folder, .bowerrc . For the purposes of this introduction, well only look at the most frequently changed setting within this file (see Listing ).
Listing 1-2. The .bowerrc File from This Chapters Sample Project
// example-bootstrap/.bowerrc
{
"directory": "./public/bower_components"
}
By default, Bower will store your projects dependencies in the bower_components folder. You will likely want to change this location, and the directory setting allows you to do so.
The Manifest
Bower provides developers with a single point of entry from which third-party libraries can be found, added, upgraded, and removed. As these actions occur, Bower updates a JSON file referred to as the manifest with an up-to-date list of the projects dependencies. The Bower manifest for this chapters sample project is shown in Listing . In this example, Bower is aware of a single dependency, the Bootstrap CSS framework.
Listing 1-3. Bower Manifest for This Chapters Sample Project
// example-bootstrap/bower.json
{
"name": "example-bootstrap",
"version": "1.0.0",
"homepage": " https://github.com/username/project ",
"authors": [
"John Doe "
],
"dependencies": {
"bootstrap": "3.2.0"
}
}
If we were to accidentally delete all of our projects dependencies by removing the public/bower_components folder, we could easily restore our project to its previous state by issuing a single command, as shown next. Doing so would cause Bower to compare its manifest with our projects current file structure, determine what dependencies are missing, and restore them.
$ bower install
As a result of this behavior, we have the option of ignoring our projects /public/bower_components folder within version control. By committing only Bowers manifest, and not the dependencies themselves, our projects source code can be kept in a cleaner state, containing only files that pertain directly to our own work.
Note
Opinions differ as to whether or not keeping your projects dependencies out of version control is a good idea. On the one hand, doing so results in a cleaner repository. On the other hand, this also opens the door to potential problems should you (or the Bower registry, or GitHub, etc.) encounter connection issues. The general consensus seems to be that if you are working on a deployable project (i.e., an application, not a module), committing your dependencies is the preferred approach. Otherwise, keeping your projects dependencies out of version control is probably a good idea.
Creating a New Manifest
When you begin to use Bower within a project for the first time, its typically best to allow Bower to create a new manifest for you, as shown next. Afterward, you can modify it further if necessary.
$ bower init
Finding, Adding, and Removing Bower Packages
Bowers command-line utility provides a number of useful commands for locating, installing, and removing packages. Lets take a look at how these commands can help simplify the process of managing a projects external dependencies.
Finding Packages
One of the primary ways in which Bower can improve your development workflow is by providing you with a centralized registry from which third-party libraries can be found. To search the Bower registry, simply pass the search argument to Bower, followed by a keyword to search for, as shown in Listing . In this example, only a short excerpt from the returned list of search results is shown.
Listing 1-4. Searching Bower for jQuery
$ bower search jquery
Search results:
jquery git://github.com/jquery/jquery.git
jquery-ui git://github.com/components/jqueryui
jquery.cookie git://github.com/carhartl/jquery-cookie.git
jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
Adding Packages
Each search result includes the name under which the package was registered, along with the URL of the GitHub repository at which it can be accessed directly. Once we have located the desired package, we can add it to our project as shown in Listing .
![Nicholas C. Zakas [Nicholas C. Zakas] - Professional: JavaScript® for Web Developers, Third Edition](/uploads/posts/book/121419/thumbs/nicholas-c-zakas-nicholas-c-zakas.jpg)
