Bower : Why Front-End needs a Package Manager


How long does it take to identify and download different packages and dependencies for your project? Minutes.. Hours.. or maybe Days.. It is a time consuming and a lengthy process to get the correct dependencies and download them, and adding them to your project. So there needs to be something to manage those dependencies. Node developers love NPM . But does such a thing exist for front-end developers? Of course yes. Bower.

Of course yes. Bower is a package manager for the web where it helps to simplify the process of adding the dependencies and packages to our project. Bower comes as a light weight package and it can be easily obtained via the npm (Node Package Manager). Even though most front-end developers are afraid of using terminal windows , trust me, its the coolest package manager you could use.

Browsing all the library websites, downloading and unpacking the archives , copying these into projects, all these are replaced with a few commands in the terminal window with bower.Many programming languages have their own package managers like gem for Ruby, pip for Python , npm for server-side JavaScript etc. But the client-side JavaScript until recently was not having package managers.

Bower is not the Standard client-side package manager for JavaScript, but the most popular one. Currently it has more than sixteen thousand packages.

Installing Bower

To work with bower you will need node.js . we will talk about node.js in a future post. In the terminal window type in the following to install bower

> npm install -g bower

Make sure to add the -g which states as global, so that it is accessible from any where in the computer. no matter what directory you are in.

Working with Packages

For installing a package into a project all you have to do is to cd (Change Directory) into the project directory in the terminal window. In order to install a dependency , say jQuery into your project type in the terminal

> bower install --save jquery

The above command will create a new folder called bower_components and will download a folder with all the package files into it. The –save flag tells the bower to save the dependency to the bower.json manifest file. we don’t have a file called bower.json yet. so to create it type the command

> bower init

This command will create a bower.json with details like dependencies and their version informations.

The best part of the bower is, when you work on a project among a group of developers, you don’t have to  share the whole bower_components folder while sharing it. Just add all the dependencies to bower.json with init command and delete the bower_components folder. when the other developer gets the file, all he has to do is to cd into the folder and type bower install. bower will get all the dependencies from your bower.json and will add to a new bower_components folder.

When adding the packages into your pages via the script tag , you need the path to the correct file in the package. bower has a command called

> bower list --paths

Which will output the paths to the correct file dependency.

There are even more commands related to bower like

> bower uninstall 
> bower search 
> bower list

You can find more about Bower on their website . You can also find popular repositories on their website under search section . If you have been curious about wheather or not Bower is the right tool for you to use, this post may give the information you need to make that decision and get help in using it.

Leave a Reply