Manage Those Dependencies! (scandev)

Transcript

1. Jakob Mattsson @jakobmattsson
2. 
   TUBSUVQT 
   3FDSVJUJOH 
   "EWFSUJTJOH 
   'FFECBDL
4. Manage those dependencies! @jakobmattsson
5. Web apps - not ”homepages”
6. "It's a piece of the stack that's been notably missing for years and after using it for a while now, I'm not sure how I lived without it." What is this referring to?
7. Let’s rewind my story
8. Discovering UNIX > apt-get install foobar 1999
9. > port install foobar Mac could do it as well 2004
10. Ruby and its gems 2006 > gem install foobar
11. Along came the iPhone 2007 > app store
12. Node package manager 2010 > npm install foobar
13. "It's a piece of the stack that's been notably missing for years and after using it for a while now, I'm not sure how I lived without it." What is this referring to? 2011
14. Even Microsoft is catching on! 2011 ”NuGet is a free and open source package manager for the .NET Framework”
15. What is the JS approach?
16. 1. Find a library you want to use
17. 2. Download the source
18. 3. Manually put it alongside your own code
19. 4. Let the global pollution begin
20. The pollution is just the beginning
21. We get a flat pile of unrelated stuff
22. A maintenance nightmare
23. And stupid habits Add semicolons to the beginning of your files! Copy-paste libs - why not small pieces of code too No choice but to check-in dependencies Premature minimification
24. Piece of - you get the picture
25. Frontend devs WERE scriptkiddies
26. JavaScript is popular!
27. The medieval ages are over
29. CommonJS CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser
30. var foo = require(’./foo.js’); console.log(foo.square(4)); var bar = require(’./bar.js’); console.log(bar.version); console.log(bar.cube(4)); main.js We can load other files
31. exports.square = function(x) { return x * x; }; console.log(”loaded foo”); foo.js A module can have side-effects
32. exports.version = ”0.1.0”; exports.cube = function(x) { return x * x * x; }; console.log(”loaded bar”); bar.js Modules can have multiple values
33. var foo = require(’./foo.js’); console.log(foo.square(4)); var bar = require(’./bar.js’); console.log(bar.version); console.log(bar.cube(4)); main.js Now run this
34. var coin = Math.random() > 0.5; var name = coin ? ‘foo’ : ‘bar’; var mod = require(’./’ + name + ’.js’); console.log(mod.version); main.js We can load dynamically
35. NPM
36. We can install packages > npm install foo > npm install bar var foo = require(‘foo’); console.log(foo.square(4));
37. package.json And publish them { "name" : "backbone", "description" : "Give your JS App some Backbone.", "url" : "http://backbonejs.org", "keywords" : ["util", "server", "client", "browser"], "author" : "Jeremy Ashkenas <jeremy@documentcloud.org>", "dependencies" : { "underscore" : ">=1.3.1" }, "main" : "backbone.js", "version" : "0.9.2" } > npm publish
38. Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!
39. Write files as if it was node.js // use relative requires var foo = require('./foo'); var bar = require('../lib/bar'); // or use modules installed by npm var domready = require('domready'); domready(function() { var elem = document.getElementById('result'); elem.textContent = foo(100) + bar('baz'); }); main.js
40. Use it in the browser > browserify main.js -o bundle.js <script src="bundle.js"></script> Step 1 Step 2
41. Use it with require var main = require(”main”); (function() { var main = require(”main”); // .. use it here .. }()) Or better yet
42. It resolves nested dependencies
43. How it works // magic above... require.define("/main.js", function( require, module, exports, __dirname, __filename, process) { // code from main.js }); bundle.js
44. Server and client united
45. Ender The no-library library Ender is a full featured package manager for your browser.
46. For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.
47. RequireJS A JavaScript module loader
48. RequireJS A JavaScript module loader NOT a package manager
49. Asynchronous Module Definition require(['helper/util'], function(util) { // use util... });
50. So what does util.js contain then? define(['dep1', 'dep2'], function(dep1, dep2) { return { foo: function() { // ... }, bar: 42 }; }); util.js
51. Simplified CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js
52. Computed deps will cause issues define(function(require) { var dice = Math.random() > 0.5; var name = dice ? ‘foo’ : ‘bar’; var mod = require(’./’ + name + ’.js’); // doh!! console.log(mod.version); return {}; }); util.js
53. Summary - Asyncronous - Not coupled with any packaging system - Superset of CommonJS modules (almost) - Slightly more complex - Some gotchas
55. Bower is an index bower install jquery bower install git://github.com/components/jquery.git bower install http://foo.com/jquery.awesome-plugin.js bower install ./repos/jquery
56. Write a bower declaration { "name": "my-project", "version": "1.0.0", "dependencies": { "mocha": "1.8.1", "angular-ui": "0.3.1", "select2": "3.2.0", "bootstrap": "2.1.1", "jquery-ui": "1.9.2", "jquery": "1.8.3" } }
57. ?
58. Which one to choose? ?
59. But whatever you do - stop this!
60. Manage those dependencies! @jakobmattsson