JavaScript dependency management in a post-Node world

JavaScript dependency management has changed a lot in the last 4 years. Let's have a look at a few practices, and how the Node.js ecosystem is making our lives easier!

Transcript

1. JS dependency! management in a post-Node world Oct 2013 Romain Prieto
2. <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
3. multiple requests
4. multiple requests
5. dependency management window.Premium = { calculate: function() { return [ {name: 'Income', price: 40 }, {name: 'Life', price: 60 } ]; } }; premium.js
6. dependency management window.UI = { refresh: function() { var all = window.Premium.calculate(); return _.sortBy(all, 'price'); } }; ui.js
8. dependency management window.UI = function(_, premium) { function refresh() { var all = premium.calculate(); return _.sortBy(all, 'price'); } ...
10. define('ui', ['underscore', 'premium'], function(_, premium) { return { refresh: function() { var all = premium.calculate(); return _.sortBy(all, 'price'); } } });
11. run-time vs. build-time _.js   premium.js   ui.js   dynamic loader app.js  
12. _ module premium module ui module run-time vs. build-time bundle.js dynamic loader
13. require.js Config can get complex Async mode VS build mode Pay syntax price PROS CONS Ensures dependent modules are loaded Configurability Documentation
14. define('module', ['dep1', 'dep2'], function(dep1, dep2) { return { foo: function() {}, bar: function() {} } });
15. http://jquery.com/download - 1.9.0 - 1.10.2 - 2.0.3 version management ? à CDN or local download
17. exports.calculate = function() { return [ { name: 'Income', price: 40 }, { name: 'Life', price: 60 } ]; }; premium.js syntax
18. var _ = require('underscore'); var premium = require('./premium'); exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price'); }; ui.js syntax
19. var _ = require('underscore'); /* ???? */ var premium = require('./premium'); /* relative file path */
21. npm registry $ npm install underscore --save $ npm install underscore@1.4 --save var _ = require('underscore'); […] var sorted = _.sortBy(all, 'price');
22. semantic versioning 1.4.3 major minor patch incompatible API changes bug fixes new functionality
24. var _ = require('underscore'); var premium = require('./premium'); exports.refresh = function() { var all = premium.calculate(); return _.sortBy(all, 'price'); }; ui.js
25. underscore premium ui other build-time bundle bundle.js dynamic loader
26. var p = require('./premium'); it('prints the prices', function() { sinon.stub(p, 'calculate').returns(...); ui.refresh(); }); unit testing ui-spec.js
27. $ npm install coffeeify –-save-dev $ browserify –t coffeeify app.coffee > bundle.js transform modules
29. source maps
31. sharing modules ? <script src="premium-calculator-1.3.2.js" />
32. a private registry public private
33. a private registry $ npm install premium-calculator@1.3.2 var premium = require('premium-calculator'); $ cd premium-calculator $ npm publish
34. The ecosystem is changing fast! A lot of evolving practices Make your own opinions :) keep your eyes open