Home

Awesome

Front-End Package Manager Comparison

Why do this?

It is about time for front-end developers to have a decent package manager. Front-end development is serious business and there is no good reason for us to continue with sub-par tools or no tools at all.

I appreciate the effort that has gone into all of these. It is awesome to see really talented developers taking on the task and sharing the result with the rest of us.

Who are you?

The contenders

The following tools have caught my attention:

NOTES:

What is a package manager?

A package manager is a tool that allows you to specify a list of dependencies for your library or application. The tools depicted here are similar in scope to Bundler, NPM, or Composer.

How is this thing evaluated?

Since tool choice is extremely subjective, you (and/or your team) should come up with your own weighting system and score each tool accordingly.

Configuration File

The following table provides the name of the "manifest" file where you specify dependencies and/or the details of your package.

Configurationbowercomponentjamvolonpmspm
filenamebower.jsoncomponent.jsonpackage.jsonpackage.jsonpackage.jsonpackage.json

Sample bower enabled bower.json file:

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<name>": "<version>",
    "<name>": "<folder>",
    "<name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Sample component enabled component.json file:

{

  "name":        "tip",
  "repo":        "component/tip",
  "description": "Tip component",
  "version":     "0.0.1",
  "keywords":    ["tooltip", "tip", "ui"],
  "dependencies": {
    "component/emitter": "*",
    "component/jquery":  "*"
  },
  "scripts": ["index.js", "template.js"],
  "styles":  ["tip.css"]

}

Sample jam enabled package.json file:

{

  "name":        "csbp",
  "version":     "0.0.1",
  "description": "A Non-Framework Client-Side JavaScript/HTML5 Project Boilerplate",

  "dependencies": {
    "jamjs":         "*",
    "grunt-contrib": "*"
  },

  "devDependencies": {
    "chai":          "*",
    "mocha":         "*",
    "sinon":         "*",
    "grunt-mocha":   "*"
  },

  "jam": {
    "packageDir": "src/libs/js",
    "baseUrl":    "src/main/js"
  }

}

Sample volo enabled package.json file:

 {

  "name":            "csbp",
  "version":         "0.0.1",
  "description":     "A Non-Framework Client-Side JavaScript/HTML5 Project Boilerplate",

  "dependencies": {
  },

  "devDependencies": {
    "yeti":          "*",
    "docco":         "*",
    "jshint":        "*",
    "chai":          "*",
    "mocha":         "*",
    "sinon":         "*"
  },

  "amd":  {},

  "volo": {
    "baseUrl":       "src/js/lib",

    "dependencies":  {
      "page":        "github:visionmedia/page.js",
      "requirejs":   "*"
    }
  }

}

Sample npm + browserify enabled package.json file:

{
  "name": "{{project}}",
  "version": "1.0.0",
  "description": "{{description}}",

  "repository": "git://github.com/{{author}}/{{project}}.git",
  "main": "index.js",

  "dependencies": {
    "hyperquest": "~0.1.0"
  },
  "devDependencies": {
    "mocha": "*"
  },

  "licenses": "MIT"
}

Sample spm enabled package.json file:

{
  "name": "{{project}}",
  "version": "1.0.0",
  "description": "{{description}}",

  "repository": "git://github.com/{{author}}/{{project}}.git",

  "spm": {
    "main": "index.js",
    "dependencies": {
      "moment": "2.8.1",
      "jquery": "1.11.1"
    }
  },

  "licenses": "MIT"
}

NOTES:

Package Installation Location

The following table details where each tool stores downloaded packages.

Pathbowercomponentjamvolonpm + browserifyspm
default path./bower_components./components./jam./js, ./scripts, ././node_modules./spm_modules
custom path.bowerrc--out dirjam.packageDirvolo.{baseDir,baseUrl}, amd.baseDir---outputDirectory dir

NOTES:

volo has a fairly complex algorithm.

If not defined in package.json it:

Development Dependencies

The following table details whether each tool allows specifying development dependencies.

Development Dependenciesbowercomponentjamvolonpm + browserifyspm
devDependencies

NOTES:

Responsibilities

The following table details the responsibilities the given tool takes on.

Responsibilitiesbowercomponentjamvolonpm + browserifyspm
package management✓ (npm)
project bootstrapping--
project scaffolding-----
build automation-----
script/module loading----
compile/build---✓ (browserify)

NOTES:

Build/Compile

The following table details which tools require a build/compile step during development.

Build/Compile?bowercomponentjamvolonpm + browserifyspm
?-✓ (component build)--✓ (browserify)✓ (spm build)

NOTES:

Central Registry

The following table details which tools expose a central "registry".

Registry?bowercomponentjamvolonpm + browserifyspm
?-

NOTES:

Package installation sources

The following table details the method by which each tool allows you to specify each dependency (i.e. dependencies).

Sourcebowercomponentjamvolonpm + browserifyspm
git / github✓ (CLI ONLY)-
private repositories✓ (SEE NOTES BELOW)-
local repositories--
zip / tarball-✓ (CLI ONLY)✓ (ZIPBALL ONLY)-
HTTP/HTTPS URL----
NPM----
registry----

NOTES:

Speed

The following table details the speed of each tool.

Registry?bowercomponentjamvolonpmspm
~85 components~80s~10s~80s~80s~40s~20s

NOTES:

Supported JavaScript Module formats

The following table details the JavaScript format each tool expects/handles.

Formatbowercomponentjamvolonpm + browserifyspm
Global Script✓ (--standalone)--
AMD✓ (format agnostic)✓ (--standalone)--
CommonJS/NodeJS✓ (format agnostic)✓ (uses CJS style)--
CommonJS (WRAPPED)✓ (format agnostic)✓ (--standalone)--

NOTES:

There are several JavaScript formatting methodologies:

NOTES:

Module / Script Loader

The following table details the module/script loader supported by each tool.

Sourcebowercomponentjamvolonpm + browserifyspm
Bring your own loader--✓ (can create multiple bundles)-
Includes a Loader-✓ (custom require)✓ (RequireJS)-✓ (Sea.js)

NOTES:

Loaders that you might be interested in:

Package Contents

The following table details the the types of source files that can be contained in each package per tool.

Sourcebowercomponentjamvolonpm + browserifyspm
JavaScript
HTML--
CSS--

NOTES:

Final thoughts

Each package manager is built by talented, responsive, and friendly developers. Ultimately, to evaluate for your team, you will have to put a weight on each category and score per your needs.

Library and component authors may want to consider:

Complementary Resources

Below is a list of resources that will likely be useful to you if you found this comparison useful:

Contributing

I am sure I've made a few grammatical and spelling errors. I've probably even made comparison errors in a few spots. Please feel free to speak up or submit a pull request.

Symbols Used