component
what component in NOT
- The name is too ambiguous
- http://componentjs.com/
- Web Components
So what is it?
- what you get when you `npm install component`
- https://github.com/component/component
WTF do I know?!?
hai, itse me
- contributor to some component plugins/tools
- published tens of components
- used it for tens of projects
So what is it already?
- a package manager
- a build system
- a collection of tools
- a “best practices” on how to write modular js
package manager
- github based registry
- (development) dependencies
- how is it different from bower?
- how is it different from npm?
BUT: no semantic versioning (yet) :-(
build system
- an extensible build system
- builds/concats your js+css
- copies your assets
- has a lot of plugins
- how is it different from browserify?
BUT: fragmentation between CLI/js
tools
- component-size
- component-release
- component-test
“best practices”
I hate that phrase, usually when I hear “best practice” I’m getting ready to be confronted with total bullshit :-D
- CommonJS!
- = module.exports + require
- writing modules
- small
- reusable
- self-contained
- well tested?
examples
component.json
{
"name": "mycomponent",
"main": "index.js",
"scripts": ["index.js"]
"styles": ["style.css"]
}
$ component install
$ component build
I want … a font?
{
"dependencies": {
"FortAwesome/Font-Awesome": "*"
}
}
a css reset?
{
"dependencies": {
"ianstormtaylor/meyer-reset": "*",
"necolas/normalize.css": "*"
}
}
I want to have js templates written in jade
{
"templates": ["template.jade"]
}
$ component build --use component-jade
elem.innerHTML = require('template')
({locals: ['work', 'like', 'usual']});
I want tests with code coverage
package.json
{
"devDependencies": {
"component-test": "Swatinem/component-test",
"component-istanbul": "*",
"istanbul": "*"
}
}
$ component build --use component-istanbul
$ component test phantom --coverage
$ istanbul report text-summary
remember
- what works for me, need not work for you
- try new things
- make up your own mind
- challenge everything
the end
component
By Arpad Borsos
component
- 1,653