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

Manage Those Dependencies!

Manage Those Dependencies!

SpainJS 2013

7dd731d0c97e334d726f740a710904a9?s=128

Jakob Mattsson

July 06, 2013
Tweet

Transcript

  1. Jakob Mattsson @jakobmattsson

  2. None
  3. None
  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.
  5. Manage those dependencies! @jakobmattsson

  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
  7. Web apps - not kitten homepages

  8. But first some quizzing...

  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?
  10. Let me rewind my experience

  11. > apt-get install foobar Discovering UNIX 1999

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

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

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

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

    2007 2010
  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
  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
  18. What is the JS approach? F

  19. 1. Find a library you want to use

  20. 2. Download the source

  21. 3. Put it alongside your own code

  22. 4. Let the global pollution begin

  23. The pollution is just the beginning

  24. We get a flat pile of unrelated stuff

  25. None
  26. A maintenance nightmare

  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
  28. A piece of s***

  29. Why? ?

  30. Web devs as seen by system devs

  31. Frontend devs WERE scriptkiddies

  32. JavaScript is popular!

  33. The medieval ages are over

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

  36. We can use it to install packages > npm install

    foo > npm install bar var  foo  =  require('foo'); console.log(foo.square(4));
  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
  38. Ender Ender is a full featured package manager for your

    browser. The no-library library
  39. > ender build domready qwery underscore <script  src="ender.js"></script> Step 1

    Step 2 Build on the command line
  40. $('#content  a.button').bind('click',  function(e)  {    ... }); $.map(['a',  'b',  'c'],

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

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

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

    an ecosystem for JavaScript outside the browser
  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
  45. exports.square  =  function(x)  {    return  x  *  x; };

    console.log('loaded  foo'); A module can have side-effects foo.js
  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
  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
  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
  49. Browserify

  50. > browserify main.js -o bundle.js <script  src="bundle.js"></script> Step 1 Step

    2 CommonJS in the browser!
  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
  52. var  main  =  require('main'); (function()  {    var  main  =

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

       __filename,    process)  {        //  code  from  main.js        //  ... }); How it works
  54. It resolves nested dependencies

  55. Server and client united

  56. Bundles everything into one file + - Simple and reasonable

    model Only worry about the top layer All the power of NPM - - + +
  57. RequireJS A JavaScript module loader

  58. RequireJS A JavaScript module loader NOT a package manager

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

    Definition main.js
  60. define(['dep1',  'dep2'],  function(dep1,  dep2)  {    return  {    

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

     =  require('dep2');    return  {        foo:  function()  {            //  ...        },        bar:  42    }; }); The CommonJS-like alternative util.js
  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
  63. Optimization is hard + - Lazy loading No package manager

    coupling Asynchronous - - + +
  64. Jam A package manager for JavaScript. ”Unlike other repositories, we

    put the browser first.”
  65. > jam install jquery <script  src="jam/require.js"></script> Step 1 Step 2

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

    RequireJS
  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
  68. Added packaging overhead + - Targeted at browsers No backend

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

    opinionated solution to the problem of front-end package management."
  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
  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
  72. Added packaging overhead + - Super simple Flexible Won’t take

    you all the way - - +
  73. Drawing some conclusions

  74. Templating engines are like weed

  75. Frameworks are like weed

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

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

    and so many different solutions
  78. ? Which one to choose?

  79. None
  80. None
  81. Small app? Few reloads? Node.js-fan?

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

  83. Huge app? Hard to optimize by hand?

  84. Huge app? Hard to optimize by hand?

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

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

  87. Never?

  88. Never?

  89. Do your homework!

  90. Whatever you do - stop this!

  91. Manage those dependencies! @jakobmattsson

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