Browserify

Session with Demos

Hugo Josefson / Jayway 2014

• What is Browserify?
  
• What problem are we solving?
  
  
• CommonJS Modules
  
• DEMOS
  
  
• Resources

• Long JS files
• Too many JS files +
  Too many <script src='...'/>
• Polluting global namespace

        // multiply.js

        module.exports = function (x, y) {
            return x * y;
        };    
        

        // square.js

        var multiply = require('./multiply');

        module.exports = function (x) {
            return multiply(x, x);
        };    
        

        // index.js

        var square = require('./square');

        console.log( square(5) ); // 25
        

        $ npm install uniq             // creates node_modules/uniq/...
    

        // index.js
        var uniq = require('uniq');

        var data = [1, 2, 2, 2, 2, 3, 3, 3, 3, 3];

        console.log( unique(data) );            // [ 1, 2, 3 ]

        $ browserify index.js > bundle.js
    

        // index.html

        <script src="bundle.js"></script>       // [ 1, 2, 3 ]    

        $ npm install -g beefy

        $ beefy index.js:bundle.js --live
        listening on http://localhost:9966/
    

Untangle Your JavaScript with Browserify

inspirational blog post

Introduction to Browserify (Blake Embrey)

simple examples, also transforms

Browserify and the Universal Module Definition

transform anything to browserify

• CommonJS (no transform req'd)
• AMD with deamdify
• global with deglobalify
• ES6 with es6ify

how I write tests for node and the browser

simple, simple

by substack

Lots of small things

Tiny modules,

Browserify + npm + github = success

Stop using relative paths in your JavaScripts

Relative paths are indicative of
modules wanting to get out

Why I stopped using AMD

A case for Browserify

    var dep = require('dependency');
    // then use dep...

    require(['dependency'], function (dep) {
        
        // then use dep...
        
    });

    // index.js
    var $ = require('jquery');

    $('.buy-product').click(function () {
        require(['/shopping-cart'], function (shoppingCart) {
            // only downloaded shopping cart code
            // including jqueryui when necessary
            shoppingCart.open();
        });
    });
    

    // shopping-cart.js
    var $ = require('jquery');
    require('jquery-ui'); // imagine jquery-ui being heavy

    module.exports = {
        open: function () {
            // open modal with jquery ui
        }
    };