Consuming and Packaging of Web Components

Presented on Meet.js Wrocław on April 28 2014

- solutions for package consuming
- tips about package publishing

Transcript

2. Adam Stankiewicz @sheerun Bower Rails Assets Monterail https://rails-assets.org https://bower.io https://join.hussa.rs
3. Consuming Web Components
4. General Process 1. Downloading components 2. Processing components 3. Requiring components
5. bower • downloads components and dependencies • generic endpoints, many formats • uses registry for name -> endpoint mapping • leaves processing to other tools • huge community
6. • like npm + browserify + grunt in one pack • does more than only downloading • no registry, github namespacing • can fetch components from npm registry
7. Other options • jspm.io - Module Manager + Module Loader ◦ Can convert packages on-the-fly ◦ Supports AMD, CJS, ES6, globals • ender - CommonJS • volo - CommonJS • jam - AMD, dead
8. npm install -g bower vim bower.json { "name": "myapp", "private": true, "dependencies": { "bootstrap-sass-official": "~3.1.1", "modernizr": "~2.6.2", "jquery": "~1.11.0" } }
9. Basic bower usage $ bower install modernizr#2.6.3 bootstrap-sass-official#3.1.1+2 jquery#1.11.0 $ ls ./bower_components bootstrap-sass-official jquery modernizr
10. Don’t require installed assets directly Use processing pipeline
11. Processing tools broccoli
12. Processing tools super powers get things done
13. bower dependencies with brunch npm install -g brunch brunch new gh:elving/brunch-with-hipsters
14. npm install -g yo generator-gulp-webapp yo gulp-webapp bower dependencies with gulp
15. gulpfile.js - example var gulp = require('gulp'); var plug = require('gulp-load-plugins')(); gulp.task('scripts', function() { return gulp.src('app/scripts/**/*.coffee') .pipe(plug.coffee()) .pipe(plug.uglify()) .pipe(plug.concat('all.min.js')) .pipe(gulp.dest('build/js')); });
16. 500+ plugins
17. Importing modules import "jquery" as $; $(function() { console.log("ok"); }); var $ = require ("jquery") $(function() { console.log("ok"); }); ES6 style CJS style
18. Creating Web Components for bower + gulp/brunch
19. bower.json { "name": "unicorns", "description": "Provides unicorns", // "version": "0.1.0", "main": [ "dist/unicorns.js", "dist/unicorns.css" ], "moduleType": [ "amd", "globals" ], "license": "MIT", "ignore": [ "test", "bower_components" ] }
20. bower.json - name, description { "name": "unicorns", "description": "Provides unicorns", // "version": "0.1.0", "main": [ "dist/unicorns.js", "dist/unicorns.css" ], "moduleType": [ "amd", "globals" ], "license": "MIT", "ignore": [ "test" ] }
21. bower.json - version { "name": "unicorns", "description": "Provides unicorns", // "version": "0.1.0", "main": [ "dist/unicorns.js", "dist/unicorns.css" ], "moduleType": [ "amd", "globals" ], "license": "MIT", "ignore": [ "test" ] } • No need to use it • Use git tags instead • Use semver
22. Semver (http://semver.org/) Good: • v0.1.0 • 0.1.0 • 0.1.0-rc1 • 0.1.0-rc2.alpha Bad: • 0.1 • 0.1.0.rc.1 • 0.1.x • no tags at all
24. bower.json - main { "name": "unicorns", "description": "Provides unicorns", // "version": "0.1.0", "main": [ "dist/unicorns.js", "dist/unicorns.css" ], "moduleType": [ "amd", "globals" ], "license": "MIT", "ignore": [ "test" ] } • Files should be present in repository • Also css entrypoint • No versioning like: dist/unicorns-0.1.0.js
25. bower.json - moduleType { "name": "unicorns", "description": "Provides unicorns", // "version": "0.1.0", "main": [ "dist/unicorns.js", "dist/unicorns.css" ], "moduleType": [ "amd", "globals" ], "license": "MIT", "ignore": [ "test" ] } • Very important for processing tools • Supported types: amd, node, es6, globals, yui • You don’t need to support all of them
26. Exporting modules 1. Use one of wrappers from umdjs/umd (function (root, factory) { if (typeof define === 'function' && define.amd) { define(['b'], factory); } else { root.unicorns = factory(root.b); } }(this, function (b) { return { run: function() { console.log('run!'); } }; }));
27. Exporting modules 2. Write new components in ES6! Use gulp! exports unicorns var unicorns = { run: function() { console.log('run!'); } }
28. Pro-tip: • Use separate repo for builds ◦ highslide-software/highcharts.com - 60 MB ◦ highslide-software/highcharts-release - 300 KB
29. Questions?