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. 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.
  2. 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
  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?
  4. 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
  5. Even Microsoft is catching on! 1999 2004 2010 2011 2006

    2007 NuGet is a free and open source package manager for the .NET Framework
  6. 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
  7. We can use it to install packages > npm install

    foo > npm install bar var  foo  =  require('foo'); console.log(foo.square(4));
  8. {    "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
  9. $('#content  a.button').bind('click',  function(e)  {    ... }); $.map(['a',  'b',  'c'],

     function(letter)  {    ... }); $.ajax('/data',  function(respone)  {    ... }); Use with the $ symbol
  10. Doesn’t play well with jQuery + - A little simpler

    Everything ends up on the $ Everything still kind of global - -
  11. Browserify Make node-style require() work in the browser with a

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

    an ecosystem for JavaScript outside the browser
  13. exports.square  =  function(x)  {    return  x  *  x; };

    console.log('loaded  foo'); A module can have side-effects foo.js
  14. exports.version  =  '0.1.0'; exports.cube  =  function(x)  {    return  x

     *  x  *  x; }; console.log('loaded  bar'); Modules can export multiple values bar.js
  15. 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
  16. //  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
  17. var  main  =  require('main'); (function()  {    var  main  =

     require('main');    //  use  it  here  .. }()); or better yet Use it with require
  18. require.define("/main.js",  function(    require,    module,    exports,    __dirname,

       __filename,    process)  {        //  code  from  main.js        //  ... }); How it works
  19. Bundles everything into one file + - Simple and reasonable

    model Only worry about the top layer All the power of NPM - - + +
  20. define(['dep1',  'dep2'],  function(dep1,  dep2)  {    return  {    

       foo:  function()  {            //  ...        },        bar:  42    }; }); The contents of util.js util.js
  21. define(function(require)  {    var  dep1  =  require('dep1');    var  dep2

     =  require('dep2');    return  {        foo:  function()  {            //  ...        },        bar:  42    }; }); The CommonJS-like alternative util.js
  22. 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
  23. {    "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
  24. Added packaging overhead + - Targeted at browsers No backend

    modules Not as large index as NPM - - +
  25. Bower A package manager for the web "A generic, un-

    opinionated solution to the problem of front-end package management."
  26. {    "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