Component JS is a package manager of client-side components, in the similar way npm works for server-side code.
“Components” is a standard way of packaging js, stylesheets and declaring dependencies so that they can be used across different applications. It is agnostic to the type of server-framework used, i.e. you can use it with asp.net, php etc.
However, the utility itself is built around npm infrastructure (I think!), so you will need a working npm Node Package Manager to get started.
Declaring components required
Just like package.json declares dependencies for nodejs, and Gemfile declares dependencies for Ruby on Rails, component.json declares dependencies on client-side components.
Next install the components declared:
teyc@seotoma:~/myapp$ component install
install : component/popup@master
install : component/popover@master
install : component/tip@master
install : component/dialog@master
complete : component/tip
complete : component/popup
complete : component/dialog
complete : component/popover
You can also install components from the command-line using
component install component/dialog
Building aggregated js and css
teyc@seotoma:~/myapp$ component build -v
write : build/build.js
write : build/build.css
js : 315kb
css : 1kb
duration : 65ms
Using build.js and build.css
The HTML page should refer to two compiled files – build.css and build.js:
<link rel="stylesheet" type="text/css" href="build/build.css" />
Points of interest
The components aren’t all thrown into one namespace. They use github-style namespacing. In fact, you have to use standard requirejs style declarations to use components. For example:
var Popover = require("component-popover");
For larger apps, it may be better to declare a super-component that requires all the subcomponents. In component.json, declare a single script
and index.js does all the requires. Interestingly, note that a namespace is not required. You can declare “popover” instead of “component-popover”.
var Popover = require("popover");
popover = new Popover("A hello world message", "header - Component.io");
Then the require script
<link rel="stylesheet" href="build/build.css" type="text/css"></link>
<p id="example">Pop over me</p>