Choosing Between npm, Bower and component

by Brian Rinaldi on August 26, 2013

The modern web is always changing, and this article is more than two years old.

package_mgmt_header

By Seth Vincent

There is still no best answer to client-side package managers and dependency management. We still have to cobble together the solutions that work best in the context of each project, but at least we’re not downloading js/css manually through the browser, using wget or writing bash scripts to download/update our client-side dependencies.

We have better options.

In this article I will focus on three that fit best with my development workflow and discuss my personal strategy for when and how to use them:

All three are quite different:

npm

npm nominally started out as a package manager for Node.js but can be used for any JavaScript. Along with a tool like browserify, it’s easy to use npm packages and Node-style modules in the browser. It’s not super useful for CSS libraries – but it’s easy to imagine a tool (built on something like brfs) that could make bundling CSS npm packages very pleasant.

You install npm by installing node. Packages are installed using npm install <package name>.

Example:

npm install --save request

The optional --save option adds the package as a dependency to the project’s package.json file. You can create a package.json file using the npm init command.

Bower

Bower is a hero of client-side code: it’s great for both CSS and JavaScript. It’s easy to manage dependencies, even if those dependencies don’t have a config file for Bower. You can install a file or Git repository as a dependency alongside packages in the Bower registry. Bower doesn’t make any assumptions about how you build or deploy code, so it is compatible with AMD modules.

Bower is distributed as an npm package, so install it with: npm install -g bower

The -g option installs the Bower package globally and exposes the bower command. Packages are then installed like this:

bower install --save <package name>

The optional --save option adds the package as a dependency in the project’s bower.json file. If a bower.json doesn’t already exist, you can create one with the bower init command.

component

component is a tool with a more focused and defined goal for front-end code than npm and Bower. It uses CommonJS style modules. Each component may contain JavaScript, CSS, fonts and images. Some JavaScript-only components can also be used in Node.js. See the component FAQ for more details.

component is also installed using npm:

npm install -g component

The syntax of the component command is a little different. It relies on GitHub repositories and uses the same namespace, so a package is identified by a /.

Installing looks like this:

component install <username>/<package name>

For example:

component install component/dom

The above command installs the dom component, which is a collection of small components that replicate the functionality of jQuery.

To add dependencies to component.json, you can use the component-set command.

You can learn more about component here: https://github.com/component/component

When I use npm for browser code

Games. There’s been a lot of interesting activity in JavaScript game development in the Node.js community using browserify. voxel.js is one of the biggest examples, with a goal of creating Minecraft-like games in the browser. For more examples, check out this wiki of game-related modules and projects that use Node, npm and browserify: https://github.com/hughsk/game-modules

npm and browserify are be useful for creating applications that might share JavaScript code on the server and the browser. This approach also works well when the JavaScript requirements for the client-side are minimal, or if you prefer to write client-side code in a Node style.

If I’m using npm and browserify, I’m almost always using beefy as the live-reload development server. It’s great.

I sketch ideas in requirebin.com sometimes. It’s a pretty great little service that let’s you require modules from npm, run them through browserif, and view the results of that code – all in the browser.

You can learn more about npm at npmjs.org

When I use Bower for browser code

When the project requires a front-end framework like Backbone or Angular, I use Bower as the package manager. It’s currently the best way to package the arbitrary dependencies of a JavaScript application. It’s possible to use Backbone and jQuery with browserify, but so far that hasn’t made sense for me yet.

Typically using Bower means that I am also using the Grunt build tool and its associated plugins as the live-reload development server as well as for packaging builds and any other task automation.

To learn more about Bower, visit bower.io.

I don’t really use component yet…

…but I definitely want to. It looks like there’s some great work happening around component. I expect that there will be instances when I’ll want to use some of the available components. Many components have Node.js support and should just fit into my usual npm/browserify workflow without issue. However, I would likely be installing those components via npm rather than the component command.

Use all three at once!

Check out this great guide for using components, bower packages, AMD modules and even global variables with browserify: Browserify and the universal module definition

This article is part of learnjs e-book guide to building projects with JavaScript and was originally published at http://superbigtree.tumblr.com/post/58075340096/my-strategy-for-client-side-package-managers-choosing

© 2017 Modern Web & our authors. All rights reserved.