Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Manage those dependencies - jsDay 2013, Verona

Manage those dependencies - jsDay 2013, Verona

Avatar for Jakob Mattsson

Jakob Mattsson

May 15, 2013
Tweet

More Decks by Jakob Mattsson

Other Decks in Programming

Transcript

  1. 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
  2. "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?
  3. "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
  4. Even Microsoft is catching on! 2011 ”NuGet is a free

    and open source package manager for the .NET Framework”
  5. 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
  6. NPM

  7. We can install packages > npm install foo > npm

    install bar var foo = require(‘foo’); console.log(foo.square(4));
  8. 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 <[email protected]>", "dependencies" : { "underscore" : ">=1.3.1" }, "main" : "backbone.js", "version" : "0.9.2" } > npm publish
  9. Build on the command line > ender build domready qwery

    underscore <script src="ender.js"></script> Step 1 Step 2
  10. 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) });
  11. - A little simpler - Everything ends up on the

    $ - Everything still kind of global... - Doesn’t play well with jQuery
  12. Browserify Make node-style require() work in the browser with a

    server-side build step, as if by magic!
  13. CommonJS CommonJS is a project with the goal of specifying

    an ecosystem for JavaScript outside the browser
  14. exports.square = function(x) { return x * x; }; console.log(”loaded

    foo”); foo.js A module can have side-effects
  15. exports.version = ”0.1.0”; exports.cube = function(x) { return x *

    x * x; }; console.log(”loaded bar”); bar.js Modules can have multiple values
  16. 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
  17. Browserify Make node-style require() work in the browser with a

    server-side build step, as if by magic!
  18. 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
  19. Use it in the browser > browserify main.js -o bundle.js

    <script src="bundle.js"></script> Step 1 Step 2
  20. Use it with require var main = require(”main”); (function() {

    var main = require(”main”); // .. use it here .. }()) Or better yet
  21. How it works // magic above... require.define("/main.js", function( require, module,

    exports, __dirname, __filename, process) { // code from main.js }); bundle.js
  22. So what does util.js contain then? define(['dep1', 'dep2'], function(dep1, dep2)

    { return { foo: function() { // ... }, bar: 42 }; }); util.js
  23. Simplified CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var

    dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js
  24. 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?
  25. 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
  26. Summary - Asyncronous - Not coupled with any packaging system

    - Superset of CommonJS modules (almost) - Slightly more complex - Some gotchas
  27. For front-end developers who crave maintainable assets, Jam is a

    package manager for JavaScript. Unlike other repositories, we put the browser first.
  28. What does it do? - Manage dependencies - Fast and

    modular - Use with existing stack - Custom builds - Focus on size - 100% browser
  29. Use it in the browser > jam install jquery <script

    src="jam/require.js"></script> Step 1 Step 2
  30. 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
  31. 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
  32. 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" } }
  33. Summary - Does not help you with loading modules -

    ”Does one thing and does it well”
  34. ?