Upgrade to Pro — share decks privately, control downloads, hide ads and more …

component and other front-end package manager

Anton Wilhelm
September 29, 2014

component and other front-end package manager

- comparison with other tools like browserify, grunt and gulp
- features of component 1.0.0.

Anton Wilhelm

September 29, 2014
Tweet

More Decks by Anton Wilhelm

Other Decks in Technology

Transcript

  1. agenda what is component? component vs. X philosophy component and

    components component 1.0.0 live coding history of component community lessons learned
  2. what is component? Think of it as an opinionated npm

    + browserify + rework-npm + grunt/gulp/brocolli all wrapped into component build Component is a vertically integrated frontend solution, handling everything from package management to the build process, handling everything including HTML, JS, CSS, images, and fonts.
  3. component vs. X category pro contra npm package manager for

    Node.js publishing step don’t see the content on npmjs.org own namespacing
 downtime / caching problems browserify provide node-style require() for the frontend no configuration
 parse require() calls npm as registry
 primarily for JS bower pacakge manager for the frontend no manually download only blacklist for files different modules types
 loose assets RequireJS module loader
 not only for the browser no build process primarily for JS
 no repository Grunt/Gulp build tools for
 the frontend build process in JavaScript no repository component package manager
 and build tool
 for the frontend multiple registries build process
  4. component vs. X require JS CSS fonts, images, … repository

    modular npm + + - - npmjs only remote, locals since 2.* browserify + + Plugin Plugin npmjs node algorithm bower + + + + RequireJS + + - - - Grunt + + + — Gulp + + + - component + + + + github
 bitbucket + duojs + + + + github ?
  5. philosophy One of the main philosophies with Component is that

    each component should generally be independent of each other. If they are not independent, then they should only be dependent as a "dependency". One of the main philosophies with Component is that each component should generally be independent of each other. If they are not independent, then they should only be dependent as a "dependency".
  6. disambiguation https://github.com/componentjs/component/blob/master/disambiguation.md front-end pacakge manager ! & build tool github.com/componentjs/component

    registry for component component.github.io old: github.com/componentjs/component/wiki/Components official components github.com/component twitter @componentIO old: @component_js package manager-friendly distributions of many popular front-end modules github.com/components run-time component system for structuring HTML5-based rich clients componentjs.com webcomponents webcomponents.org
  7. component npm modules of component component ├─┬ component-build │ ├──

    builder-autoprefixer │ └─┬ component-builder │ ├── component-manifest │ └── component-require2 ├── component-consoler ├── component-flatten ├── component-ls ├── component-outdated2 ├── component-pin ├─┬ component-resolver │ ├── component-consoler │ ├── component-downloader │ └── component-validator ├── component-search2 ├── component-updater ├── component-watcher └─┬ component-remotes └─┬ component-validator └── component-consoler
  8. components { "name": "font-awesome", "repo": "FortAwesome/Font-Awesome", "description": "Font Awesome", "version":

    "4.1.0", "keywords": [], "dependencies": {}, "development": {}, "license": "SIL, MIT, CC BY 3.0", "styles": [ "css/font-awesome.css" ], "fonts": [ "fonts/fontawesome-webfont.eot", "fonts/fontawesome-webfont.svg", "fonts/fontawesome-webfont.ttf", "fonts/fontawesome-webfont.woff", "fonts/FontAwesome.otf" ] } { "name": "delegate", "repo": "component/delegate", "description": "Event delegation component", "version": "0.2.2", "keywords": [ "event", "events", "delegate", "delegation" ], "dependencies": { "discore/closest": "*", "component/event": "*" }, "scripts": [ "index.js" ] } component/delegate/component.json FortAwesome/Font-Awesome/component.json
  9. component 1.0.0 New Features: ! - Semantic Versioning - .development:

    {remotes, locals, scripts, styles} - Dependency Management - pin - outdated - update - duplicates - ES6 Module Support - Watcher - Glob Support
  10. history of component @visionmedia (segmentio) @jonathanong 0.* 1rc @timaschew @netpoetica

    … 1.* @jonathanong @MatthewMueller @yields (segmentio) component normalize.io duo http://www.jongleberry.com/the-future-of-component.html 08/2012 12/2013 04/2014 04/2014 08/2014
  11. community 0 150 300 450 600 npm dependents closed issues

    open issues component duo browserify
  12. lessons learned - git submodules https://github.com/componentjs/development - modularity = initial

    costs / big fragmentation - semantic versioning & npm-shrinkwrap - public repositories & credentials for CI
  13. THAT’S IT If you're into Node.js, CoffeeScript, NoSQL, Scrum get

    in touch, we're hiring ;) Twitter: @timaschew ! Source: https://github.com/timaschew/c8-experiments