Component.js

vs

Bower

We all know Bower

"A package manager, by Twitter"

Component.js

"Component package manager for
building a better web"

-- TJ Holowaychuk

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

Package identifier

Component

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