JavaScript Dependencies, Modules & Browserify

Dependencies & Modules

Wednesday, January 8, 14

To handle dependencies and modules in a simple way we need some proper tooling.


Then talk a bit about Browserify.


I’ve been writing JS for quite a while, then I was off doing mostly backend & Android for while.
This is Theo, I felt like him here towards JS for a while I feel that the tools around for JS has increased and grown in complexity quite fast. It also feels like it is
changing quite rapid. This is also what attracts me to JS, for me it feels like this is where a lot of creativity and innovation is happening.
But picking the right tools is a/has been challenge.

Web Sites vs Web Apps
What’s the difference?


I ﬁnd this quite interesting. And is there a difference and why do we make a difference?

We’re all building sites that people visit, do
something, and leave. Differentiating websites vs. web
apps is no good to anyone.
– Jack Franklin
https://speakerdeck.com/jackfranklin/port80-practical-javascripting


Why do you want to make that distinction?
What beneﬁt do you gain by arbitrarily dividing
the entire web into two classes?
– Jeremy Keith
http://adactio.com/journal/6246/


A lot of people ignore new JavaScript tools, methods
or approaches because those are just for “web apps.”
– Jack Franklin
https://speakerdeck.com/jackfranklin/port80-practical-javascripting


I’ve done this for too long.

Dev Environment
•

Module System: A way to programmatically load scripts when they’re
needed.

•

Package Manager: Fetch scripts from online sources like GitHub, taking
dependencies into account.

•

Build Tool: Combine scripts and other assets together into something
usable by browsers.
http://dailyjs.com/2013/01/28/components/


And to handle modules and dependencies properly we need to use proper tools to cope with a modern development environment

Modules
A way to programmatically load scripts when they’re needed


Let’s start with modules.
What is a module? Keep it simple, it’s basically just a script that we can load whenever we need it.

SRC_DIR = src
BUILD_DIR = build
JS_SERVER_FILES = $(SRC_DIR)/js/namespace.js
! $(SRC_DIR)/js/vendor/buffer-loader.js
! $(SRC_DIR)/js/vendor/requestanimframe.js
! $(SRC_DIR)/js/vendor/stats.min.js
! $(SRC_DIR)/js/vendor/minpubsub.js
! $(SRC_DIR)/js/app.js
! $(SRC_DIR)/js/utils.js
! $(SRC_DIR)/js/sound.js
! $(SRC_DIR)/js/shape.js
! $(SRC_DIR)/js/main.js
JS_BUNDLE = $(BUILD_DIR)/app.js
BUILD_BUNDLE = $(BUILD_DIR)/app-min.js
.DEFAULT_GOAL := all
all: bundle
! java -jar $(GCC_COMPRESSOR) $(GCC_OPTION) --js=$(JS_BUNDLE) -js_output_file=$(BUILD_BUNDLE)
debug: bundle
! cat $(JS_FILES) >> $(JS_BUNDLE)

To assemble this for production we would need a build script. This is a Makeﬁle from an old project of mine. Sure we can have grunt but it is still conﬁguration
clean:
we need to add.

! rm -Rf $(BUILD_DIR)/*

For me this isn’t really prototyping friendly.

<% if (production) { %>
<script type="text/javascript"
<% } else { %>
<% } %>

src="/js/app-min.js"></script>
src="/js/namespace.js"></script>
src="/js/vendor/buffer-loader.js"></script>
src="/js/vendor/requestanimframe.js"></script>
src="/js/vendor/stats.min.js"></script>
src="/js/vendor/minpubsub.js"></script>
src="/js/app.js"></script>
src="/js/utils.js"></script>
src="/js/sound.js"></script>
src="/js/shape.js"></script>
src="/js/main.js"></script>


And we add a conditional to check if we are in production. Personally I don’t like this since it means that we’re during development will most likely run a different
version of the site than we will in production.

The Problem
•
•
•
•

Code complexity grows as the site gets bigger
Assembly gets harder
Developer wants discrete JS ﬁles/modules
Deployment wants optimized code in just one or a few HTTP calls

http://requirejs.org/docs/why.html#1

Why do we want modules. Require.JS outlines a few arguments on there website.
We basically want it because we need better structure in our code.

Current Landscape
•
•
•
•
•
•

Globals
Globals + Namespace
AMD (Asynchronous Module Definition)
CommonJS
UMD (Universal Module Definition)
(ES6)


Alternatives for modules, not taking framework specific ones like Angular into account.

var isEven = function(i) {
return i % 2 === 0;
};


I like small bits of code that can be separated and re-used. Here’s a quite simple re-usable bit of code but is short enough to ﬁt a slide.
Simple re-usable code

Globals


even.js

return i % 2 === 0;
};


app.js
console.log(1,
console.log(2,
console.log(3,
console.log(4,


isEven(1));
isEven(2));
isEven(3));
isEven(4));

index.html
<!doctype html>
<script src="even.js"></script>
<script src="app.js"></script>


Globals + Namespace


app-even.js
var App = App || {};
App.isEven = function(i) {
return i % 2 === 0;
};


app.js
var App = App || {};
console.log(1,
console.log(2,
console.log(3,
console.log(4,


App.isEven(1));
App.isEven(2));
App.isEven(3));
App.isEven(4));

index.html

<!doctype html>
<script src="app-even.js"></script>
<script src="app.js"></script>


AMD
Asynchronous Module Deﬁnition
With Require.JS


even.js
define([], function() {
return i % 2 === 0;
};
return isEven;
});


app.js
require(['even'], function(even){
console.log(1, even(1));
});


index.html

<!doctype html>
<script data-main="js/app.js"
src="js/require.js"></script>


//Allow for anonymous modules
if (typeof name !== 'string') {
//Adjust args appropriately
callback = deps;
deps = name;
name = null;
}
//This module may not have dependencies
if (!isArray(deps)) {
callback = deps;
deps = null;
}

require.js

//If no name, and callback is a function, then figure out if it a
//CommonJS thing with dependencies.
if (!deps && isFunction(callback)) {
deps = [];
//Remove comments from the callback string,
//look for require calls, and pull them into the dependencies,
//but only if there are function args.
if (callback.length) {
callback
.toString()
.replace(commentRegExp, '')
.replace(cjsRequireRegExp, function (match, dep) {
deps.push(dep);
});

//May be a CommonJS thing even without require calls, but still
//could use exports, and module. Avoid doing exports and module
//work though if it just needs require.
//REQUIRES the function to expect the CommonJS variables in the
//order listed below.
deps = (callback.length === 1 ? ['require'] : ['require', 'exports', 'module']).concat(deps);
}
}
//If in IE 6-8 and hit an anonymous define() call, do the interactive
//work.
if (useInteractive) {
node = currentlyAddingScript || getInteractiveScript();
if (node) {
if (!name) {
name = node.getAttribute('data-requiremodule');
}
context = contexts[node.getAttribute('data-requirecontext')];
}
}
//Always save off evaluating the def call until the script onload handler.
//This allows multiple modules to be in a file without prematurely
//tracing dependencies, and allows for anonymous module support,
//where the module name is not known until the script onload event
//occurs. If no context, use the global queue, and get it processed
//in the onscript load callback.
(context ? context.defQueue : globalDefQueue).push([name, deps, callback]);
};
define.amd = {
jQuery: true
};


/**
* Executes the text. Normally just uses eval, but can be modified
* to use a better, environment-specific call. Only used for transpiling
* loader plugins, not for plain JS modules.
* @param {String} text the text to execute/evaluate.
*/
req.exec = function (text) {
/*jslint evil: true */
return eval(text);
};

Quite a massive ﬁle that is required //Set load these ﬁles. Not sure exactly what goes on here, but it works.
to up with config info.
req(cfg);
}(this));

Makeﬁle / Build step

build:
! node r.js -o name=app out=js/app-built.js baseUrl=./js
build-even:
! node r.js -o name=even out=js/even-built.js baseUrl=./js


For production you might want to bundle your files into one bundle. You still depend on require.js though. And you will have one setup for development and another one
for production.

CommonJS / Node.js


even.js
return i % 2 === 0;
};
module.exports = isEven;


app.js
var isEven = require('./even');
console.log(1,
console.log(2,
console.log(3,
console.log(4,


isEven(1));
isEven(2));
isEven(3));
isEven(4));

UMD
Universal Module Deﬁnition


Makeﬁle / Build step
build:
! cat header.js even.js footer.js > even-lib.js


ES6
export function isEven() {}
import { isEven } from 'even';


It’s not here yet.

AMD & CommonJS


For me, there’s really only two options here. AMD or CommonJS. Both of these solves the issue of loading modules.


Various alternatives around for common js, as far as I know there is only require js for AMD

CommonJS



CommonJS

AMD



What I want
•
•
•
•
•

Simple
Active community
No complicated build environment
Works with existing libraries, with none or minimal adaption
Prototype friendly

require('modules') in the browser


http://browserify.org/, substack

Demo


Browserify
•
•
•


require & npm modules in the browser
Browser versions of core node modules (events, stream, path, url, ...)
Extendable

How does it work?
•
•
•
•

Small wrapper for the require function
Build process that keeps track of dependencies
Bundles to one ﬁle
No global leakage

;
(function e(t, n, r) {
function s(o, u) {
if (!n[o]) {
if (!t[o]) {
var a = typeof require == "function" && require;
if (!u && a) return a(o, !0);
if (i) return i(o, !0);
throw new Error("Cannot find module '" + o + "'")
}
var f = n[o] = {
exports: {}
};
t[o][0].call(f.exports, function (e) {
var n = t[o][1][e];
return s(n ? n : e)
}, f, f.exports, e, t, n, r)
}
return n[o].exports
}
var i = typeof require == "function" && require;
for (var o = 0; o < r.length; o++) s(r[o]);
return s
})({
1: [
function (require, module, exports) {
var isEven = function (i) {
return i % 2 === 0;
};
module.exports = isEven;
}, {}
],
2: [
function (require, module, exports) {
var isEven = require('./even');
console.log(isEven(2));
}, {
"./even": 1
}
]
}, {}, [2]);


voxel.js
http://voxeljs.com/


Dependencies
Package Manager
Fetch scripts, taking dependencies into account


Current Landscape
•
•
•
•
•
•

Ender (http://ender.jit.su/)
Volo (http://volojs.org/)
Jam (http://jamjs.org/)
Bower (http://bower.io/) 7 000+
Component (http://component.io/)
npm (http://npmjs.org) 53 000+


Quite a few alternatives around. Not likely that all of these will survive. Currently it seems like Bower is the one getting more and more attraction for front end
developers

Transformations
•
•
•
•
•

AMD via deamdify
Bower via debowerify
Global via deglobalify
ES6 via es6ify
& more


{
"name": "bower-demo",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Johan Nilsson",
"license": "BSD-2-Clause",
"devDependencies": {
"debowerify": "~0.5.1"
}
}


{
"name": "bower-demo",
"main": "index.js",
"version": "0.0.0",
"authors": [
"Johan Nilsson <johan@markupartist.com>"
],
"license": "BSD-2-Clause",
"private": true,
"dependencies": {
"jquery": "~2.0.3"
}
}


var $ = require('jquery');
$('body').append('<p>bla bla</p>');


browserify index.js -t debowerify > bundle.js


Additional Tools
•
•
•
•

Watchify – Watch mode for browserify builds
Beefy – Local development server
grunt-browserify
gulp-browserify

Johan Nilsson
johan@markupartist.com
@johanni


JavaScript Dependencies, Modules & Browserify

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to JavaScript Dependencies, Modules & Browserify (20)

More from Johan Nilsson (11)

Recently uploaded (20)

JavaScript Dependencies, Modules & Browserify