Lightning Talk: Making JS better with Browserify
- 1. brows·er·if·y Javascript module management for mere mortals
- 2. My Application jQuery underscore Application Code Library Code
- 3. My Application jQuery underscore Application Code Library Code Linker
- 4. My Application jQuery underscore Application Code Library Code global variables
- 5. Module management with globals Modules individually included on the page Share a global namespace Inclusion order must be manually calculated
- 6. –browserify.org “Browserify lets you require('modules') in the browser by bundling up all of your dependencies.”
- 7. Module management with browserify Modules are scoped in their own namespace Uses CommonJS standard interface Dependencies defined using require function Modules are defined by assigning an object to module.exports Exactly like node.js
- 8. var $ = require(‘jquery’); $(‘body’).html(“Browserify saves the day”); main.js
- 9. ~/$ npm install jquery --save ~/$ browserify main.js -o bundle.js Build process
- 10. var MyModel = function() { … } module.exports = MyModel; models/MyModel.js
- 11. var $ = require(‘jquery’), _ = require(‘underscore’), MyModel = require(‘../models/MyModel’); main.js
- 12. Where to from here? Detailed documentation: http://bit.ly/1kbozFB grunt-browserify: wrapper for integration into Grunt build with other tools, like uglify. exorcist: extract source maps for browsers. Very useful, terrible name. watchify: CLI file watcher for performing automatic builds during development.
- 13. Any questions?