javascript dependency management
TRANSCRIPT
![Page 1: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/1.jpg)
JS dependencymanagementin a post-Node world
Oct 2013 Romain Prieto
![Page 2: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/2.jpg)
<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
![Page 3: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/3.jpg)
multiple requests
![Page 4: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/4.jpg)
multiple requests
![Page 5: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/5.jpg)
dependency management
window.Premium = { calculate: function() { return [ {name: 'Income', price: 40 }, {name: 'Life', price: 60 } ]; }};
premium.js
![Page 6: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/6.jpg)
dependency management
window.UI = { refresh: function() { var all = window.Premium.calculate(); return _.sortBy(all, 'price'); }};
ui.js
![Page 7: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/7.jpg)
![Page 8: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/8.jpg)
dependency management
window.UI = function(_, premium) {
function refresh() { var all = premium.calculate(); return _.sortBy(all, 'price'); }
...
![Page 9: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/9.jpg)
![Page 10: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/10.jpg)
define('ui', ['underscore', 'premium'], function(_, premium) {
return { refresh: function() { var all = premium.calculate(); return _.sortBy(all, 'price'); } }
});
![Page 11: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/11.jpg)
run-time vs. build-time
_.js
premium.js
ui.js
dynamic loaderapp.js
![Page 12: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/12.jpg)
_ module
premium module
ui module
run-time vs. build-time bundle.js
dynamic loader
![Page 13: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/13.jpg)
require.js
Config can get complexAsync mode VS build modePay syntax price
PR
OS
CO
NS
Ensures dependent modules are loadedConfigurabilityDocumentation
![Page 14: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/14.jpg)
define('module',
['dep1', 'dep2'], function(dep1, dep2) {
return { foo: function() {}, bar: function() {} }
});
![Page 15: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/15.jpg)
http://jquery.com/download
- 1.9.0- 1.10.2- 2.0.3
version management ?
CDN or local download
![Page 16: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/16.jpg)
![Page 17: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/17.jpg)
exports.calculate = function() {
return [ { name: 'Income', price: 40 }, { name: 'Life', price: 60 } ];
};
premium.js
syntax
![Page 18: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/18.jpg)
var _ = require('underscore');var premium = require('./premium');
exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price');};
ui.js
syntax
![Page 19: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/19.jpg)
var _ = require('underscore');
/* ???? */
var premium = require('./premium');
/* relative file path */
![Page 20: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/20.jpg)
![Page 21: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/21.jpg)
npm registry
$ npm install underscore --save$ npm install [email protected] --save
var _ = require('underscore');[…]var sorted = _.sortBy(all, 'price');
![Page 22: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/22.jpg)
semantic versioning
1.4.3
major minor patch
incompatible API changes
bug fi xesnewfunction
ality
![Page 23: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/23.jpg)
![Page 24: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/24.jpg)
var _ = require('underscore');var premium = require('./premium');
exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price');};
ui.js
![Page 25: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/25.jpg)
underscore
premium
ui
other
build-time bundle bundle.js
dynamic loader
![Page 26: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/26.jpg)
var p = require('./premium');
it('prints the prices', function() {
sinon.stub(p, 'calculate').returns(...); ui.refresh();
});
unit testing ui-spec.js
![Page 27: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/27.jpg)
$ npm install coffeeify –-save-dev
$ browserify –t coffeeify app.coffee > bundle.js
transform modules
![Page 28: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/28.jpg)
![Page 29: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/29.jpg)
source maps
![Page 30: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/30.jpg)
![Page 31: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/31.jpg)
sharing modules ?
<script src="premium-calculator-1.3.2.js" />
![Page 32: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/32.jpg)
a private registry
public
private
![Page 33: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/33.jpg)
a private registry
$ npm install [email protected]
var premium = require('premium-calculator');
$ cd premium-calculator
$ npm publish
![Page 34: JavaScript dependency management](https://reader034.vdocuments.us/reader034/viewer/2022042518/55cae5ccbb61eb3e788b47f0/html5/thumbnails/34.jpg)
The ecosystem is changing fast!
A lot of evolving practices
Make your own opinions :)
keep your eyes open