Manage those dependencies - jsDay 2013, Verona

Transcript

1. Jakob Mattsson
   @jakobmattsson
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. TUBSUVQT
   3FDSVJUJOH
   "EWFSUJTJOH
   'FFECBDL
   

   View Slide

6. Manage those
   dependencies!
   @jakobmattsson
   

   View Slide

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
   

   View Slide

8. Web apps - not homepages
   

   View Slide

9. But first some quizzing...
   

   View Slide

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?
    

    View Slide

11. Let me rewind my experience
    

    View Slide

12. Discovering UNIX
    > apt-get install foobar
    1999
    

    View Slide

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

    View Slide

14. Ruby and its gems
    2006
    > gem install foobar
    

    View Slide

15. Along came the iPhone
    2007
    > app store
    

    View Slide

16. Node package manager
    2010
    > npm install foobar
    

    View Slide

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
    

    View Slide

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

    View Slide

19. What is the JS approach?
    

    View Slide

20. 1. Find a library you want to use
    

    View Slide

21. 2. Download the source
    

    View Slide

22. 3. Put it alongside your own code
    

    View Slide

23. 4. Let the global pollution begin
    

    View Slide

24. The pollution is just the beginning
    

    View Slide

25. We get a flat pile of unrelated stuff
    

    View Slide

26. A maintenance nightmare
    

    View Slide

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
    

    View Slide

28. A piece of - you get the picture
    

    View Slide

29. Frontend devs WERE scriptkiddies
    

    View Slide

30. JavaScript is popular!
    

    View Slide

31. The medieval ages are over
    

    View Slide

32. View Slide

33. NPM
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. Build on the command line
    > ender build domready qwery underscore
    
    Step 1
    Step 2
    

    View Slide

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)
    });
    

    View Slide

39. - A little simpler
    - Everything ends up on the $
    - Everything still kind of global...
    - Doesn’t play well with jQuery
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

51. It resolves nested dependencies
    

    View Slide

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

    View Slide

53. Server and client united
    

    View Slide

54. RequireJS
    A JavaScript module loader
    

    View Slide

55. RequireJS
    A JavaScript module loader
    NOT a package manager
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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?
    

    View Slide

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
    

    View Slide

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

    View Slide

62. 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

63. What does it do?
    - Manage dependencies
    - Fast and modular
    - Use with existing stack
    - Custom builds
    - Focus on size
    - 100% browser
    

    View Slide

64. Use it in the browser
    > jam install jquery
    
    Step 1
    Step 2
    

    View Slide

65. Use it with require
    require(['jquery'], function($) {
    $(document.body).text('Hello, world!');
    });
    

    View Slide

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
    

    View Slide

67. View Slide

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
    

    View Slide

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

    View Slide

70. Summary
    - Does not help you with loading modules
    - ”Does one thing and does it well”
    

    View Slide

71. Drawing some conclusions
    

    View Slide

72. Templating engines is like weed
    

    View Slide

73. JavaScript is great because there are
    so many different environments
    and so many different solutions
    

    View Slide

74. JavaScript is hard because there are
    so many different environments
    and so many different solutions
    

    View Slide

75. ?
    

    View Slide

76. Which one to choose?
    ?
    

    View Slide

77. Whatever you do - stop this!
    

    View Slide

78. Manage those
    dependencies!
    @jakobmattsson
    

    View Slide