Manage those dependencies - jsDay 2013, Verona

Transcript

1. Jakob Mattsson @jakobmattsson
5. 
   TUBSUVQT 
   3FDSVJUJOH 
   "EWFSUJTJOH 
   'FFECBDL
6. Manage those dependencies! @jakobmattsson
7. ALL CHARACTERS AND EVENTS IN THIS SHOW-- EVENT THOSE BASED ON REAL PEOPLE--ARE ENTIRELY FICTIONAL. ALL CELEBERTY VOICES ARE IMPERSONATED.....POORLY. THE FOLLOWING PROGRAM CONTAINS COARSE LANGUAGE AND DUE TO ITS CONTENT IT SHOULD NOT BE VIEWED BE ANYONE
8. Web apps - not homepages
9. But first some quizzing...
10. "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?
11. Let me rewind my experience
12. Discovering UNIX > apt-get install foobar 1999
13. > port install foobar Mac could do it as well 2004
14. Ruby and its gems 2006 > gem install foobar
15. Along came the iPhone 2007 > app store
16. Node package manager 2010 > npm install foobar
17. "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
18. Even Microsoft is catching on! 2011 ”NuGet is a free and open source package manager for the .NET Framework”
19. What is the JS approach?
20. 1. Find a library you want to use
21. 2. Download the source
22. 3. Put it alongside your own code
23. 4. Let the global pollution begin
24. The pollution is just the beginning
25. We get a flat pile of unrelated stuff
26. A maintenance nightmare
27. 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
28. A piece of - you get the picture
29. Frontend devs WERE scriptkiddies
30. JavaScript is popular!
31. The medieval ages are over
33. NPM
34. We can install packages > npm install foo > npm install bar var foo = require(‘foo’); console.log(foo.square(4));
35. 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
36. Ender The no-library library ”Ender is a full featured package manager for your browser.”
37. Build on the command line > ender build domready qwery underscore <script src="ender.js"></script> Step 1 Step 2
38. Use it with the $-symbol $('#content a.button') .bind('click.button', function(e) { $(this).data('clicked', true).unbind() e.preventDefault() }); $.map(['a', 'b', 'c'], function(letter) { return letter.toUpperCase() }); $.ajax('/data', function(resp) { $('#content').html(resp) });
39. - A little simpler - Everything ends up on the $ - Everything still kind of global... - Doesn’t play well with jQuery
40. Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!
41. CommonJS CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser
42. 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
43. exports.square = function(x) { return x * x; }; console.log(”loaded foo”); foo.js A module can have side-effects
44. exports.version = ”0.1.0”; exports.cube = function(x) { return x * x * x; }; console.log(”loaded bar”); bar.js Modules can have multiple values
45. 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
46. 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
47. Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!
48. 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
49. Use it in the browser > browserify main.js -o bundle.js <script src="bundle.js"></script> Step 1 Step 2
50. Use it with require var main = require(”main”); (function() { var main = require(”main”); // .. use it here .. }()) Or better yet
51. It resolves nested dependencies
52. How it works // magic above... require.define("/main.js", function( require, module, exports, __dirname, __filename, process) { // code from main.js }); bundle.js
53. Server and client united
54. RequireJS A JavaScript module loader
55. RequireJS A JavaScript module loader NOT a package manager
56. Asynchronous Module Definition require(['helper/util'], function(util) { // use util... });
57. So what does util.js contain then? define(['dep1', 'dep2'], function(dep1, dep2) { return { foo: function() { // ... }, bar: 42 }; }); util.js
58. Simplified CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js
59. Simplified CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js So what’s the difference?
60. 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
61. Summary - Asyncronous - Not coupled with any packaging system - Superset of CommonJS modules (almost) - Slightly more complex - Some gotchas
62. For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.
63. What does it do? - Manage dependencies - Fast and modular - Use with existing stack - Custom builds - Focus on size - 100% browser
64. Use it in the browser > jam install jquery <script src="jam/require.js"></script> Step 1 Step 2
65. Use it with require require(['jquery'], function($) { $(document.body).text('Hello, world!'); });
66. package.json Publishing a JAM package { "name": "myproject", "version": "0.0.1", "description": "An example Node.js project", "dependencies": { "async": "0.1.22" // NPM dependencies go here... }, "jam": { "dependencies": { "jquery": "1.7.1", // Jam dependencies go here... "underscore": null } } } > jam publish
68. 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
69. 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" } }
70. Summary - Does not help you with loading modules - ”Does one thing and does it well”
71. Drawing some conclusions
72. Templating engines is like weed
73. JavaScript is great because there are so many different environments and so many different solutions
74. JavaScript is hard because there are so many different environments and so many different solutions
75. ?
76. Which one to choose? ?
77. Whatever you do - stop this!
78. Manage those dependencies! @jakobmattsson