Manage Those Dependencies!

SpainJS 2013

Transcript

1. Jakob Mattsson @jakobmattsson
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
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
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?
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 + -