Manage Those Dependencies

DrupalCon Prague 2013

Transcript

1. Frontend · Jakob Mattsson · 25 September 2013 Manage Those Dependencies!
2. Jakob Mattsson @jakobmattsson
6. Manage those dependencies! @jakobmattsson
7. 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
8. Web apps - not kitten homepages
9. But first some quizzing...
10. "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?
11. Let me rewind my experience
12. > apt-get install foobar Discovering UNIX 1999
13. > port install foobar Mac could do it as well 1999 2004
14. > gem install foobar Ruby and its gems 1999 2004 2006
15. App Store Along came the iPhone 1999 2004 2006 2007
16. > npm install foobar Node package manager 1999 2004 2006 2007 2010
17. 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
18. Even Microsoft is catching on! 1999 2004 2010 2011 2006 2007 NuGet is a free and open source package manager for the .NET Framework
19. What is the JS approach? F
20. 1. Find a library you want to use
21. 2. Download the source
22. 3. Put it alongside your own code
23. 4. Let the global pollution begin
24. The pollution is just the beginning
25. We get a flat pile of unrelated stuff
27. A maintenance nightmare
28. 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
29. A piece of s***
30. Why? ?
31. Web devs as seen by system devs
32. Frontend devs WERE scriptkiddies
33. JavaScript is popular!
34. The medieval ages are over
36. NPM Installs, publishes and manages node programs. Package manager.
37. We can use it to install packages > npm install foo > npm install bar var  foo  =  require('foo'); console.log(foo.square(4));
38. {    "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
39. Ender Ender is a full featured package manager for your browser. The no-library library
40. > ender build domready qwery underscore <script  src="ender.js"></script> Step 1 Step 2 Build on the command line
41. $('#content  a.button').bind('click',  function(e)  {    ... }); $.map(['a',  'b',  'c'],  function(letter)  {    ... }); $.ajax('/data',  function(respone)  {    ... }); Use with the $ symbol
42. Doesn’t play well with jQuery + - A little simpler Everything ends up on the $ Everything still kind of global - -
43. Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!
44. CommonJS CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser
45. 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
46. exports.square  =  function(x)  {    return  x  *  x; }; console.log('loaded  foo'); A module can have side-effects foo.js
47. exports.version  =  '0.1.0'; exports.cube  =  function(x)  {    return  x  *  x  *  x; }; console.log('loaded  bar'); Modules can export multiple values bar.js
48. 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
49. 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
50. Browserify
51. > browserify main.js -o bundle.js <script  src="bundle.js"></script> Step 1 Step 2 CommonJS in the browser!
52. //  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
53. var  main  =  require('main'); (function()  {    var  main  =  require('main');    //  use  it  here  .. }()); or better yet Use it with require
54. require.define("/main.js",  function(    require,    module,    exports,    __dirname,    __filename,    process)  {        //  code  from  main.js        //  ... }); How it works
55. It resolves nested dependencies
56. Server and client united
57. Bundles everything into one file + - Simple and reasonable model Only worry about the top layer All the power of NPM - - + +
58. RequireJS A JavaScript module loader
59. RequireJS A JavaScript module loader NOT a package manager
60. require(['helper/util'],  function(util)  {    //  use  util... }); Asynchronous Module Definition main.js
61. define(['dep1',  'dep2'],  function(dep1,  dep2)  {    return  {        foo:  function()  {            //  ...        },        bar:  42    }; }); The contents of util.js util.js
62. define(function(require)  {    var  dep1  =  require('dep1');    var  dep2  =  require('dep2');    return  {        foo:  function()  {            //  ...        },        bar:  42    }; }); The CommonJS-like alternative util.js
63. 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
64. Optimization is hard + - Lazy loading No package manager coupling Asynchronous - - + +
65. Jam A package manager for JavaScript. ”Unlike other repositories, we put the browser first.”
66. > jam install jquery <script  src="jam/require.js"></script> Step 1 Step 2 Build it for the browser
67. require(['jquery'],  function($)  {    $(document.body).text('Hello,  world!'); }); Use it with RequireJS
68. {    "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
69. Added packaging overhead + - Targeted at browsers No backend modules Not as large index as NPM - - +
70. Bower A package manager for the web "A generic, un- opinionated solution to the problem of front-end package management."
71. 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
72. {    "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
73. Added packaging overhead + - Super simple Flexible Won’t take you all the way - - +
74. Drawing some conclusions
75. Templating engines are like weed
76. Frameworks are like weed
77. JavaScript is great because there are so many different environments and so many different solutions
78. JavaScript is hard because there are so many different environments and so many different solutions
79. ? Which one to choose?
82. Small app? Few reloads? Node.js-fan?
83. Small app? Few reloads? Node.js-fan?
84. Huge app? Hard to optimize by hand?
85. Huge app? Hard to optimize by hand?
86. Taking some baby steps? Building a custom solution?
87. Taking some baby steps? Building a custom solution?
88. Never?
89. Never?
90. Do your homework!
91. Whatever you do - stop this!
92. Manage those dependencies! @jakobmattsson
93. Manage those dependencies! @jakobmattsson bit.ly/jakob-drupalcon + -
95. THANK YOU! WHAT DID YOU THINK? Locate this session at the DrupalCon Prague website: http://prague2013.drupal.org/schedule Click the “Take the survey” link