Untangle your JavaScript

with

Browserify


Session with Demos


Hugo Josefson / Jayway 2014

Overview


  • What is Browserify?
  • What problem are we solving?

  • CommonJS Modules
  • DEMOS

  • Resources




What is this thing?



"...lets you require('modules') in the browser by bundling up all of your dependencies."




What problem are we solving?

What problem are we solving?


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



CommonJS Modules

to the rescue!

CommonJS Module


        // 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
        




Looks like Node.js modules?




That's right!

CommonJS example
with npm


        $ 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 ]    

browserify + livereload === beefy


        $ npm install -g beefy

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


Beefy...

  • ...builds bundle.js just like browserify
  • ...serves html and bundle
  • ...livereloads browser on file change

Resources


More Introductions...

inspirational blog post

simple examples, also transforms

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

Testing


simple, simple
by substack

Opinion pieces


Tiny modules,
Browserify + npm + github = success

Relative paths are indicative of
modules wanting to get out

A case for Browserify

Eat the cake and keep it?


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

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

Promethify example


    // 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
        }
    };
    

Thank you!





Questions?





hugo.josefson@jayway.com

Untangle your JavaScript with Browserify

By Hugo Josefson

Untangle your JavaScript with Browserify

Browserify lets you write modules in the same well-structured way as with Node.js, in your browser.

  • 1,493
Loading comments...

More from Hugo Josefson