Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lightning Talk: Making JS better with Browserify

589 views

Published on

Slides from a short 5 minute lightning talk I gave in April 2015 about Browserify.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Lightning Talk: Making JS better with Browserify

  1. 1. brows·er·if·y Javascript module management for mere mortals
  2. 2. My Application jQuery underscore Application Code Library Code
  3. 3. My Application jQuery underscore Application Code Library Code Linker
  4. 4. My Application jQuery underscore Application Code Library Code global variables
  5. 5. Module management with globals Modules individually included on the page Share a global namespace Inclusion order must be manually calculated
  6. 6. –browserify.org “Browserify lets you require('modules') in the browser by bundling up all of your dependencies.”
  7. 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. 8. var $ = require(‘jquery’); $(‘body’).html(“Browserify saves the day”); main.js
  9. 9. ~/$ npm install jquery --save ~/$ browserify main.js -o bundle.js Build process
  10. 10. var MyModel = function() { … } module.exports = MyModel; models/MyModel.js
  11. 11. var $ = require(‘jquery’), _ = require(‘underscore’), MyModel = require(‘../models/MyModel’); main.js
  12. 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. 13. Any questions?

×