JavaScript dependency management
34
JS dependency management in a post-Node world Oct 2013 Romain Prieto
-
Upload
romain-prieto -
Category
Documents
-
view
54 -
download
1
Transcript of JavaScript dependency management
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 [email protected] --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 [email protected]
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
