Manage Those Dependencies! (zurich)

Transcript

1. Jakob Mattsson @jakobmattsson
2. Started out doing consulting
3. 2 000 000 000 writes/day!
4. Back to square one
5. Manage those dependencies! @jakobmattsson
6. 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
7. Web apps - not homepages
8. But first some quizzing...
9. #1: Using the Microsoft stack?
10. Please
11. "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." #2: What is this referring to?
12. Let me rewind my story
13. Discovering UNIX > apt-get install foobar 1999
14. > port install foobar Mac could do it as well 2004
15. Ruby and its gems 2006 > gem install foobar
16. Along came the iPhone 2007 > app store
17. Node package manager 2010 > npm install foobar
18. "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
19. Even Microsoft is catching on! 2011 ”NuGet is a free and open source package manager for the .NET Framework”
20. #3: What is the JS approach?
21. 1. Find a library you want to use
22. 2. Download the source
23. 3. Put it alongside your own code
24. 4. Let the global pollution begin
25. The pollution is just the beginning
26. We get a flat pile of unrelated stuff
27. A maintenance nightmare
28. 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
29. A piece of - you get the picture
30. Frontend devs WERE scriptkiddies
31. JavaScript is popular!
32. The medieval ages are over
34. CommonJS CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser
35. 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
36. exports.square = function(x) { return x * x; }; console.log(”loaded foo”); foo.js A module can have side-effects
37. exports.version = ”0.1.0”; exports.cube = function(x) { return x * x * x; }; console.log(”loaded bar”); bar.js Modules can have multiple values
38. 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
39. 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
40. NPM
41. We can install packages > npm install foo > npm install bar var foo = require(‘foo’); console.log(foo.square(4));
42. 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
43. Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!
44. 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
45. Use it in the browser > browserify main.js -o bundle.js <script src="bundle.js"></script> Step 1 Step 2
46. Use it with require var main = require(”main”); (function() { var main = require(”main”); // .. use it here .. }()) Or better yet
47. It resolves nested dependencies
48. How it works // magic above... require.define("/main.js", function( require, module, exports, __dirname, __filename, process) { // code from main.js }); bundle.js
49. Server and client united
50. Ender The no-library library Ender is a full featured package manager for your browser.
51. Build like browserify > ender build domready qwery underscore <script src="ender.js"></script> Step 1 Step 2
52. 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) });
53. Ender vs Browserify - No require needed - A little simpler - Everything ends up on the $ - Uses NPM, just like Browserify - Everything still kind of global... - Doesn’t play well with jQuery
54. For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser first.
55. What does it do? - Manage dependencies - Fast and modular - Use with existing stack - Custom builds - Focus on size - 100% browser
56. Use it in the browser > jam install jquery <script src="jam/require.js"></script> Step 1 Step 2
57. Use it with require require(['jquery'], function($) { $(document.body).text('Hello, world!'); });
58. Use it with require require(['jquery'], function($) { $(document.body).text('Hello, world!'); }); Hold your horses!
59. 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
60. RequireJS A JavaScript module loader
61. RequireJS A JavaScript module loader NOT a package manager
62. Asynchronous Module Definition require(['helper/util'], function(util) { // use util... });
63. So what does util.js contain then? define(['dep1', 'dep2'], function(dep1, dep2) { return { foo: function() { // ... }, bar: 42 }; }); util.js
64. Simplified CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js
65. 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
66. Summary - Asyncronous - Not coupled with any packaging system - Superset of CommonJS modules (almost) - Slightly more complex - Some gotchas
67. Drawing some conclusions
68. Templating engines is like weed
69. JavaScript is great because there are so many solutions
70. JavaScript is hard because there are so many solutions
71. Which one to choose? ?
72. You can help! !
73. Use them. Learn them. Play around with them. Speed up the natural selection. Help the community gravitate towards a common solution.
74. But whatever you do - stop this!
75. Manage those dependencies! @jakobmattsson