What is Component?

(except for the most generic name ever)

By Jonny Strömberg / @javve

I'm @javve

Designer & engineer who've built web since 1998.
Creator of SilarApp.com, Listjs.com, Startuplocation.com & more.
Part time designer at Mynewsdesk

Component package manager for building a better web.

github.com/component/component

Features

  • Write modular Commonjs components (Node.js-style!)
  • Not only JS! Supports CSS, HTML, images, fonts & more.
  • Local & hosted components
  • Uses Github as registry
  • Installs dependencies from the commandline
  • Over 800 existing components

Where am I using it and why?

Getting started


> npm install -g component
...
> component create cool
> repo (username/project): javve/cool
> description: A cool component
> does this component have js? y
> does this component have css? y
> does this component have html? y
    

Files generated


cool/
    .gitignore
    History.md
    cool.css
    template.html
    Makefile
    component.json
    Readme.md
    index.js
    

component.json

https://github.com/component/component/wiki/Spec

{
  "name": "cool",
  "repo": "javve/cool",
  "description": "A cool component",
  "version": "0.0.1",
  "keywords": [],
  "dependencies": {
    "component/event": "*",
    "component/domify": "*"
  },
  "development": {},
  "license": "MIT",
  "main": "index.js",
  "scripts": [
    "index.js",
    "template.js"
  ],
  "styles": [
    "cool.css"
  ]
}
    

template.html


<div class="cool-box">
    Cool
</div>
    

cool.css


.cool-box {
    background-color:#c60505;
    padding:8px 20px;
    color:#fff;
    border-radius: 15px;
    display:inline-block;
    position: absolute;
    -webkit-animation: pulse .3s linear .1s infinite;
}

@-webkit-keyframes pulse {
      0% { box-shadow: inset 0 0 10px rgba(255,255,255,0.2); }
     50% { box-shadow: inset 0 0 20px rgba(255,255,255,1.0); }
    100% { box-shadow: inset 0 0 10px rgba(255,255,255,0.2); }
}
    

index.js


function Cool(id) {
    var events = require('event'),
        domify = require('domify'),
        coolHTML = require('./template');

    var coolEl = domify(coolHTML)[0],
        el = document.getElementById(id);

    events.bind(el, 'mouseover', function(e) {
        e.target.appendChild(coolEl);
    });
    events.bind(el, 'mouseout', function(e) {
        e.target.removeChild(coolEl);
    });
};

module.exports = Cool;
    

Build


> make

     install : component/event@master
     install : component/domify@master
       fetch : component/domify:index.js
       fetch : component/event:index.js
    complete : component/domify
    complete : component/event
    

New folders


cool/
    ...
    build/
        build.js
        build.css
    components/
        component-domify/
            component.json
            index.js
        component-event
            component.json
            index.js
    ...
    

Use the component


<html>
<head>
    <title>Cool test</title>
    <link rel="stylesheet" type="text/css" href="build/build.css">
</head>
<body>
    <div id="cool-el">Hover me!</div>

    <script src="build/build.js"></script>
    <script>
        var Cool = require('cool')

        new Cool('cool-el');
    </script>
</body>
</html>

Demo

Hover me!

Dislike require? --standalone


> component build --dev --standalone Cool -n cool
    

<html>
<head>
    <title>Cool test</title>
    <link rel="stylesheet" type="text/css" href="build/cool.css">
</head>
<body>
    <div id="cool-el">Hover me!</div>

    <script src="build/cool.js"></script>
    <script>
        new Cool('cool-el');
    </script>
</body>
</html>
    

Kind-of-weaknesses

  • Debugging
  • Build to try
  • Hard to google

It's a crowded space

Bower, Ender, Jam, Volo, NPM, Hipsterpackage2000.
Solution: Try them and use the one you like and suite your project!

github.com/wilmoore/frontend-packagers

Component vs Bower

Component Bower
August 2012 September 2012
800+ components 1700+ components
1500+ stars 5100+ stars
Github as registry Server as registry
Uses Commonjs Nothing
Builds stuff Nothing

More reading

github.com/component/component

Original component blog post

Thanks

Visit jonnystromberg.com • Follow @javve

Follow @javve