Client-side Package Manager: How I Love Bower

  • Mar 19, 2014 at 7:47 PM
  • Shawn Wildermuth
  • 6 Comments

2353845688_36a304eb95_zDepending on your environment, you’re probably already using some package manager for your server-side code. Gems for Ruby, Nuget for .NET, NPM for Node…whatever. In any of these cases you’re used to being able to get the piece of code you need and the other requirements. For the web this is more difficult…or used to be.

For web projects, we’ve needed a way to get these client-side scripts. Sure Nuget or other package manager *can* do this but it’s been a round peg in a square hole. That’s where Bower comes in.

Bower is a simple package manager for the web. Bower depends on node and npm so you need them installed first. And if you do, then installing Bower is as simple as using NPM:

npm install –g bower

Once you have that, you can use bower to install your packages in the same way:

bower install underscore

By default, bower installs everything in a bower_components directory which makes me crazy:

3-19-2014 7-38-55 PM

If you’re going to use bower, take the time to create a new file called .bowerrc file:

{
  "directory" : "resources/libs"
}

This tells bower what directory to use as the root of the file. In this example, a new directory called “resources” with a subdir called “libs” is created and all installed components are under that new directory. This allows us to specify the directory that makes the most sense depending on what technology we’re using for the front-end.

The structure under this directory is completely dependent on the component. Some are really simple like underscore (just underscore.js):

3-19-2014 7-49-13 PM

Other libraries have a structure that you need to dive down into. For example, jQuery keeps it’s library in the dist folder (dist/jquery.min.js):

3-19-2014 7-52-07 PM

Remember that part of the magic of a package manager is that it knows the dependency chain. For example, if you install bootstrap, it knows you also need jQuery which the output of the install makes clear:

3-19-2014 7-55-30 PM

So go out right now and get Bower and start playing:

http://bower.io

 

Comments

Gravatar

jeff Thursday, March 20, 2014

One useful command would be

bower list --path

letting you know the location of the actual files you might be interested in, without the need for you to dig into the directories.

Gravatar

Shawn Wildermuth Thursday, March 20, 2014

Jeff,

Thanks...that's very cool!

Gravatar

Kristofer Joseph Friday, March 21, 2014

`npm install bower` should be your first clue that it is redundant.

npm is a feature complete package manager, meaning everything works. There has never been a need for bower.

The ability to save a package at an arbitrary path is actually a bad idea.
Just wait until you work on a project where an overly clever engineer has specified a path for every single "¿type?" of front end package.

Heaven forbid you ever need to unregister a package. The current way is to "know a guy" who can remove it. You would think a MVP for a "package manager" would be the ability to unregister. What if your project switched orgs i.e. Bootstrap, then what?

The breaking point for me was when we had a use case for requiring nested dependencies. Bower flattens your tree on ¿purpose?. This is actually a bad idea. There are times when you really want to depend on a different version of a lib for a specific component.

The main reason people still quote as needing bower today is that historically libraries have been written as monolithic LOC that pollute the global space jQuery, Backbone, etc. This is a worst practice that is slowly being refactored away by the use of module systems like CommonJS, AMD, UMD etc. Start writing smaller, single use, well tested modules today and forget about wasting your time or mental model on bower or any other system that will end up wasting lots of your time in the near future.

Gravatar

Shawn Wildermuth Friday, March 21, 2014

Kristofer,

I am confused by several of your assertions but mostly I don't get what you mean by "ability to save a package at an arbitrary path is a bad idea"? I don't see that in bower unless you mean being able to configure the package directory. The ".bowerrc" is the single directory for all packages (like NPM's node_modules).

Also, "Heaven forbid you ever need to unregister a package." DO you mean "bower uninstall underscore"? I don't why this isn't simple and clear?

Gravatar

Keith Saturday, April 12, 2014

Shawn, you always cover the topics just right for us .NET developers needing to get up to speed quickly on new tech.
I was wondering how and when I would want or need to use Bower.
I've done Javascript since the web came out but all of these client side frameworks and libraries that are coming out is forcing us to determine what is relevant or irrelevant for us today and your dedication to this client side movement shortens our learning.

Thanks.




Leave a Comment

*
*
*