component and other front-end package manager

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

Transcript

1. Anton Wilhelm | @timaschew
2. agenda what is component? component vs. X philosophy component and components component 1.0.0 live coding history of component community lessons learned
3. 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.
4. 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
5. 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 ?
6. 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".
7. 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
8. 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
9. 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
10. 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
11. live coding
12. 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
13. 23.532 community 0 2.500 5.000 7.500 10.000 github stars npm downloads component duo browserify
14. community 0 150 300 450 600 npm dependents closed issues open issues component duo browserify
15. lessons learned - git submodules https://github.com/componentjs/development - modularity = initial costs / big fragmentation - semantic versioning & npm-shrinkwrap - public repositories & credentials for CI
16. 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