lightning talk: making js better with browserify

Download Lightning Talk: Making JS better with Browserify

Post on 18-Jul-2015

94 views

Category:

Software

0 download

Embed Size (px)

TRANSCRIPT

  • browserifyJavascript module management for mere mortals

  • My ApplicationjQuery

    underscore

    Application Code Library Code

  • My ApplicationjQuery

    underscore

    Application Code Library Code

    Linker

  • My ApplicationjQuery

    underscore

    Application Code Library Code

    global variables

  • Module management with globals

    Modules individually included on the page

    Share a global namespace

    Inclusion order must be manually calculated

  • browserify.org

    Browserify lets you require('modules') in the browser

    by bundling up all of your dependencies.

  • 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

  • var $ = require(jquery);

    $(body).html(Browserify saves the day);

    main.js

  • ~/$ npm install jquery --save

    ~/$ browserify main.js -o bundle.js

    Build process

  • var MyModel = function() {

    }

    module.exports = MyModel;

    models/MyModel.js

  • var $ = require(jquery),

    _ = require(underscore),

    MyModel = require(../models/MyModel);

    main.js

  • 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.

  • Any questions?