Component.js

vs

Bower

a selective comparison

We all know Bower

"A package manager, by Twitter"

Un-opinionated
front-end package management

Component.js

"Component package manager for
building a better web"
-- TJ Holowaychuk

Opinionated
front-end package management


Installing the tool


Bower

$ npm -g install bower


Component

$ npm -g install component

Scope


Bower

Package management



Component

Package management

Build tool

Package identifier


Bower

  • Name registered with Bower,
    e.g, jquery ← no namespace!

  • Full remote git repo url
  • Local git repo path
  • Shorthand, e.g.
    someone/some-package (defaults to GitHub)

  • Any file URL (zip and tar.gz will be extracted)

Package identifier


Component

  • Shorthand, e.g.
    someone/some-package (defaults to GitHub)

Configuration file


bower.json

  • Specifies which files should be excluded
  • Specifies dependencies

component.json

  • Specifies which files should be included
  • Specifies dependencies
  • Some things differ vs bower.json

Restrictions


Bower

  • bower.json is optional

Component

  • Must have component.json
  • Must specify files to include
  • Must be CommonJS module
// my-component/index.js
module.exports = function MyComponent(args) {
    var dep1 = require("dependency1");
    dep1(args);
};

Download dependencies


Bower

$ bower install

Component

$ make    # actually `component install`

Dependency download mechanism


Bower

  1. git clone dependency's git repo, into local cache
  2. Copy specified files into project (default all)

→ Slow first time, then fast


Component

  1. Download & read dependency's
    component.json from github
  2. Parallel d/l only specified files into project (https)

→ Always fast

Use dependencies


Bower

<script src="bower_components/dependency1/index.js"/>
<script src="bower_components/dependency2/index.js"/>
<script src="bower_components/dependency3/index.js"/>
<script src="bower_components/dependency4/index.js"/>

Component

$ make    # actually `component build`
<script src="build/build.js"/>

Current adoption


Bower

2500+ packages registered

Recommended by yeoman, others


Component

1000+ components listed

Summary of differences


Bower

  • Un-opinionated, No build step
  • Manually use downloaded files,
    or build with e.g. Grunt
  • Widely adopted

Component

  • Opinionated, Builds CommonJS modules
  • Single <script/> tag
  • Not as widely adopted (yet?)

Thank you










hugo.josefson@jayway.com

Component.js vs Bower

By Hugo Josefson

Component.js vs Bower

Comparison between Component.js and Bower

  • 5,614
Loading comments...

More from Hugo Josefson