JS dependencymanagementin a post-Node world

Oct 2013 Romain Prieto

<script src="jquery-1.9.3.js" /><script src="underscore.js" />

<script src="premium.js" /><script src="products.js" /><script src="ui.js" />

in the old days

multiple requests

multiple requests

dependency management

window.Premium = { calculate: function() { return [ {name: 'Income', price: 40 }, {name: 'Life', price: 60 } ]; }};

premium.js

dependency management

window.UI = { refresh: function() { var all = window.Premium.calculate(); return _.sortBy(all, 'price'); }};

ui.js

dependency management

window.UI = function(_, premium) {

function refresh() { var all = premium.calculate(); return _.sortBy(all, 'price'); }

...

define('ui', ['underscore', 'premium'], function(_, premium) {

return { refresh: function() { var all = premium.calculate(); return _.sortBy(all, 'price'); } }

});

run-time vs. build-time

_.js

premium.js

ui.js

dynamic loaderapp.js

_ module

premium module

ui module

run-time vs. build-time bundle.js

dynamic loader

require.js

Config can get complexAsync mode VS build modePay syntax price

PR

OS

CO

NS

Ensures dependent modules are loadedConfigurabilityDocumentation

define('module',

['dep1', 'dep2'], function(dep1, dep2) {

return { foo: function() {}, bar: function() {} }

});

http://jquery.com/download

- 1.9.0- 1.10.2- 2.0.3

version management ?

CDN or local download

exports.calculate = function() {

return [ { name: 'Income', price: 40 }, { name: 'Life', price: 60 } ];

};

premium.js

syntax

var _ = require('underscore');var premium = require('./premium');

exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price');};

ui.js

syntax

var _ = require('underscore');

/* ???? */

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

/* relative file path */

npm registry

$ npm install underscore --save$ npm install underscore@1.4 --save

var _ = require('underscore');[…]var sorted = _.sortBy(all, 'price');

semantic versioning

1.4.3

major minor patch

incompatible API changes

bug fi xesnewfunction

ality

var _ = require('underscore');var premium = require('./premium');

exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price');};

ui.js

underscore

premium

ui

other

build-time bundle bundle.js

dynamic loader

var p = require('./premium');

it('prints the prices', function() {

sinon.stub(p, 'calculate').returns(...); ui.refresh();

});

unit testing ui-spec.js

$ npm install coffeeify –-save-dev

$ browserify –t coffeeify app.coffee > bundle.js

transform modules

source maps

sharing modules ?

<script src="premium-calculator-1.3.2.js" />

a private registry

public

private

a private registry

$ npm install premium-calculator@1.3.2

var premium = require('premium-calculator');

$ cd premium-calculator

$ npm publish

The ecosystem is changing fast!

A lot of evolving practices

Make your own opinions :)

keep your eyes open