component

https://slid.es/swatinem/component

what component in NOT

So what is it?

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

Made with Slides.com

component

  • 1,653

More from Arpad Borsos