Manage Those Dependencies! (scandev)

Transcript

1. Jakob Mattsson
   @jakobmattsson
   

   View Slide

2. TUBSUVQT
   3FDSVJUJOH
   "EWFSUJTJOH
   'FFECBDL
   

   View Slide

3. View Slide

4. Manage those
   dependencies!
   @jakobmattsson
   

   View Slide

5. Web apps - not ”homepages”
   

   View Slide

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?
   

   View Slide

7. Let’s rewind my story
   

   View Slide

8. Discovering UNIX
   > apt-get install foobar
   1999
   

   View Slide

9. > port install foobar
   Mac could do it as well
   2004
   

   View Slide

10. Ruby and its gems
    2006
    > gem install foobar
    

    View Slide

11. Along came the iPhone
    2007
    > app store
    

    View Slide

12. Node package manager
    2010
    > npm install foobar
    

    View Slide

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
    

    View Slide

14. Even Microsoft is catching on!
    2011
    ”NuGet is a free and open
    source package manager
    for the .NET Framework”
    

    View Slide

15. What is the JS approach?
    

    View Slide

16. 1. Find a library you want to use
    

    View Slide

17. 2. Download the source
    

    View Slide

18. 3. Manually put it alongside your
    own code
    

    View Slide

19. 4. Let the global pollution begin
    

    View Slide

20. The pollution is just the beginning
    

    View Slide

21. We get a flat pile of unrelated stuff
    

    View Slide

22. A maintenance nightmare
    

    View Slide

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
    

    View Slide

24. Piece of - you get the picture
    

    View Slide

25. Frontend devs WERE scriptkiddies
    

    View Slide

26. JavaScript is popular!
    

    View Slide

27. The medieval ages are over
    

    View Slide

28. View Slide

29. CommonJS
    CommonJS is a project with the goal of specifying
    an ecosystem for JavaScript outside the browser
    

    View Slide

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
    

    View Slide

31. exports.square = function(x) {
    return x * x;
    };
    console.log(”loaded foo”);
    foo.js
    A module can have side-effects
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. NPM
    

    View Slide

36. We can install packages
    > npm install foo
    > npm install bar
    var foo = require(‘foo’);
    console.log(foo.square(4));
    

    View Slide

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 ",
    "dependencies" : {
    "underscore" : ">=1.3.1"
    },
    "main" : "backbone.js",
    "version" : "0.9.2"
    }
    > npm publish
    

    View Slide

38. Browserify
    Make node-style require() work in the browser
    with a server-side build step, as if by magic!
    

    View Slide

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
    

    View Slide

40. Use it in the browser
    > browserify main.js -o bundle.js
    
    Step 1
    Step 2
    

    View Slide

41. Use it with require
    var main = require(”main”);
    (function() {
    var main = require(”main”);
    // .. use it here ..
    }())
    Or better yet
    

    View Slide

42. It resolves nested dependencies
    

    View Slide

43. How it works
    // magic above...
    require.define("/main.js", function(
    require,
    module,
    exports,
    __dirname,
    __filename,
    process) {
    // code from main.js
    });
    bundle.js
    

    View Slide

44. Server and client united
    

    View Slide

45. Ender
    The no-library library
    Ender is a full featured package
    manager for your browser.
    

    View Slide

46. For front-end developers who crave maintainable assets,
    Jam is a package manager for JavaScript.
    Unlike other repositories, we put the browser first.
    

    View Slide

47. RequireJS
    A JavaScript module loader
    

    View Slide

48. RequireJS
    A JavaScript module loader
    NOT a package manager
    

    View Slide

49. Asynchronous Module Definition
    require(['helper/util'], function(util) {
    // use util...
    });
    

    View Slide

50. So what does util.js contain then?
    define(['dep1', 'dep2'], function(dep1, dep2) {
    return {
    foo: function() {
    // ...
    },
    bar: 42
    };
    });
    util.js
    

    View Slide

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

    View Slide

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
    

    View Slide

53. Summary
    - Asyncronous
    - Not coupled with any packaging system
    - Superset of CommonJS modules (almost)
    - Slightly more complex
    - Some gotchas
    

    View Slide

54. View Slide

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
    

    View Slide

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"
    }
    }
    

    View Slide

57. ?
    

    View Slide

58. Which one to choose?
    ?
    

    View Slide

59. But whatever you do - stop this!
    

    View Slide

60. Manage those
    dependencies!
    @jakobmattsson
    

    View Slide