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

Manage Those Dependencies!

Manage Those Dependencies!

SpainJS 2013

Jakob Mattsson

July 06, 2013
Tweet

More Decks by Jakob Mattsson

Other Decks in Programming

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