Manage Those Dependencies!

SpainJS 2013

Transcript

1. Jakob Mattsson
   @jakobmattsson
   

   View Slide

2. View Slide

3. View Slide

4. Wikipedia on ”Melodic death metal”
   Melodic death metal is an extreme
   subgenre of heavy metal music.
   The Swedish death metal scene did much
   to popularize the style, which soon
   centered in the "Gothenburg metal" scene
   in Gothenburg, Sweden.
   

   View Slide

5. Manage those
   dependencies!
   @jakobmattsson
   

   View Slide

6. ALL CHARACTERS AND
   EVENTS IN THIS SHOW--
   EVEN 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

7. Web apps - not kitten homepages
   

   View Slide

8. But first some quizzing...
   

   View Slide

9. "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

10. Let me rewind my experience
    

    View Slide

11. > apt-get install foobar
    Discovering UNIX
    1999
    

    View Slide

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

    View Slide

13. > gem install foobar
    Ruby and its gems
    1999 2004 2006
    

    View Slide

14. App Store
    Along came the iPhone
    1999 2004 2006 2007
    

    View Slide

15. > npm install foobar
    Node package manager
    1999 2004 2006 2007 2010
    

    View Slide

16. What is this referring to?
    1999 2004 2010 2011
    "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."
    2006 2007
    

    View Slide

17. Even Microsoft is catching on!
    1999 2004 2010 2011
    2006 2007
    NuGet is a free and open
    source package manager
    for the .NET Framework
    

    View Slide

18. What is the JS approach?
    F
    

    View Slide

19. 1. Find a library you want to use
    

    View Slide

20. 2. Download the source
    

    View Slide

21. 3. Put it alongside your own code
    

    View Slide

22. 4. Let the global pollution begin
    

    View Slide

23. The pollution is just the beginning
    

    View Slide

24. We get a flat pile of unrelated stuff
    

    View Slide

25. View Slide

26. A maintenance nightmare
    

    View Slide

27. And stupid habits
    Add semicolons to the
    beginning of your files!
    No choice but to
    check-in dependencies
    Premature
    minimification
    Copy-paste libs - why not
    small pieces of code too
    

    View Slide

28. A piece of s***
    

    View Slide

29. Why?
    ?
    

    View Slide

30. Web devs as seen by system devs
    

    View Slide

31. Frontend devs WERE scriptkiddies
    

    View Slide

32. JavaScript is popular!
    

    View Slide

33. The medieval ages are over
    

    View Slide

34. View Slide

35. NPM
    Installs, publishes and
    manages node programs.
    Package manager.
    

    View Slide

36. We can use it to install packages
    > npm install foo
    > npm install bar
    var  foo  =  require('foo');
    console.log(foo.square(4));
    

    View Slide

37. {
       "name":  "backbone",
       "description":  "Give  your  JS  App  some  Backbone.",
       "url":  "http://backbonejs.org",
       "keywords":  ["util",  "server",  "browser"],
       "author":  "Jeremy  Ashkenas",
       "dependencies":  {
           "underscore":  ">=  1.3.1"
       },
       "main":  "backbone.js",
       "version":  "0.9.2"
    }
    Or publish our own
    > npm publish
    

    View Slide

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

    View Slide

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

    View Slide

40. $('#content  a.button').bind('click',  function(e)  {
       ...
    });
    $.map(['a',  'b',  'c'],  function(letter)  {
       ...
    });
    $.ajax('/data',  function(respone)  {
       ...
    });
    Use with the $ symbol
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

44. var  foo  =  require('./foo.js');
    console.log(foo.square(4));
    var  bar  =  require('./bar.js');
    console.log(bar.version);
    console.log(bar.cube(4));
    We can load other files
    main.js
    

    View Slide

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

    View Slide

46. exports.version  =  '0.1.0';
    exports.cube  =  function(x)  {
       return  x  *  x  *  x;
    };
    console.log('loaded  bar');
    Modules can export multiple values
    bar.js
    

    View Slide

47. var  foo  =  require('./foo.js');
    console.log(foo.square(4));
    var  bar  =  require('./bar.js');
    console.log(bar.version);
    console.log(bar.cube(4));
    Now run this
    main.js
    

    View Slide

48. var  coin  =  Math.random()  >  0.5;
    var  name  =  coin  ?  'foo'  :  'bar';
    var  mod  =  require('./'  +  name  +  '.js');
    console.log(mod.version);
    We can load dynamically
    main.js
    

    View Slide

49. Browserify
    

    View Slide

50. > browserify main.js -o bundle.js
    
    Step 1
    Step 2
    CommonJS in the browser!
    

    View Slide

51. //  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');
    });
    Write files as if it was node.js
    main.js
    

    View Slide

52. var  main  =  require('main');
    (function()  {
       var  main  =  require('main');
       //  use  it  here  ..
    }());
    or better yet
    Use it with require
    

    View Slide

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

    View Slide

54. It resolves nested dependencies
    

    View Slide

55. Server and client united
    

    View Slide

56. Bundles everything into one file
    +
    -
    Simple and reasonable model
    Only worry about the top layer
    All the power of NPM
    -
    -
    +
    +
    

    View Slide

57. RequireJS
    A JavaScript module
    loader
    

    View Slide

58. RequireJS
    A JavaScript module
    loader
    NOT a package manager
    

    View Slide

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

    View Slide

60. define(['dep1',  'dep2'],  function(dep1,  dep2)  {
       return  {
           foo:  function()  {
               //  ...
           },
           bar:  42
       };
    });
    The contents of util.js
    util.js
    

    View Slide

61. define(function(require)  {
       var  dep1  =  require('dep1');
       var  dep2  =  require('dep2');
       return  {
           foo:  function()  {
               //  ...
           },
           bar:  42
       };
    });
    The CommonJS-like alternative
    util.js
    

    View Slide

62. 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  {};
    });
    Non-static dependencies fails
    util.js
    

    View Slide

63. Optimization is hard
    +
    -
    Lazy loading
    No package manager coupling
    Asynchronous
    -
    -
    +
    +
    

    View Slide

64. Jam
    A package manager
    for JavaScript.
    ”Unlike other
    repositories, we put
    the browser first.”
    

    View Slide

65. > jam install jquery
    
    Step 1
    Step 2
    Build it for the browser
    

    View Slide

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

    View Slide

67. {
       "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
           }
       }
    }
    Publishing a Jam package
    > jam publish
    

    View Slide

68. Added packaging overhead
    +
    -
    Targeted at browsers
    No backend modules
    Not as large index as NPM
    -
    -
    +
    

    View Slide

69. Bower
    A package manager
    for the web
    "A generic, un-
    opinionated solution to
    the problem of front-end
    package management."
    

    View Slide

70. bower install jquery
    bower install git://github.com/components/jquery.git
    bower install http://foo.com/jquery.awesome-plugin.js
    bower install ./repos/jquery
    Bower is an index
    

    View Slide

71. {
       "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"
       }
    }
    Write a bower.json
    

    View Slide

72. Added packaging overhead
    +
    -
    Super simple
    Flexible
    Won’t take you all the way
    -
    -
    +
    

    View Slide

73. Drawing some conclusions
    

    View Slide

74. Templating engines are like weed
    

    View Slide

75. Frameworks are like weed
    

    View Slide

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

    View Slide

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

    View Slide

78. ?
    Which one to choose?
    

    View Slide

79. View Slide

80. View Slide

81. Small app?
    Few reloads?
    Node.js-fan?
    

    View Slide

82. Small app?
    Few reloads?
    Node.js-fan?
    

    View Slide

83. Huge app?
    Hard to optimize by hand?
    

    View Slide

84. Huge app?
    Hard to optimize by hand?
    

    View Slide

85. Taking some baby steps?
    Building a custom solution?
    

    View Slide

86. Taking some baby steps?
    Building a custom solution?
    

    View Slide

87. Never?
    

    View Slide

88. Never?
    

    View Slide

89. Do your homework!
    

    View Slide

90. Whatever you do - stop this!
    

    View Slide

91. Manage those
    dependencies!
    @jakobmattsson
    

    View Slide

92. Manage those
    dependencies!
    @jakobmattsson
    bit.ly/jakob-spainjs
    + -
    

    View Slide