Consuming and Packaging of Web Components

Consuming and Packaging of Web Components

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

- solutions for package consuming
- tips about package publishing

306b63b79c78a1b67e1789790ad2db86?s=128

Adam Stankiewicz

April 28, 2014
Tweet

Transcript

  1. None
  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
  23. None
  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?