Manage Those Dependencies

DrupalCon Prague 2013

Transcript

1. Frontend · Jakob Mattsson · 25 September 2013
   Manage Those Dependencies!
   

   View Slide

2. Jakob Mattsson
   @jakobmattsson
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Manage those
   dependencies!
   @jakobmattsson
   

   View Slide

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
   

   View Slide

8. Web apps - not kitten homepages
   

   View Slide

9. But first some quizzing...
   

   View Slide

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?
    

    View Slide

11. Let me rewind my experience
    

    View Slide

12. > apt-get install foobar
    Discovering UNIX
    1999
    

    View Slide

13. > port install foobar
    Mac could do it as well
    1999 2004
    

    View Slide

14. > gem install foobar
    Ruby and its gems
    1999 2004 2006
    

    View Slide

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

    View Slide

16. > npm install foobar
    Node package manager
    1999 2004 2006 2007 2010
    

    View Slide

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
    

    View Slide

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
    

    View Slide

19. What is the JS approach?
    F
    

    View Slide

20. 1. Find a library you want to use
    

    View Slide

21. 2. Download the source
    

    View Slide

22. 3. Put it alongside your own code
    

    View Slide

23. 4. Let the global pollution begin
    

    View Slide

24. The pollution is just the beginning
    

    View Slide

25. We get a flat pile of unrelated stuff
    

    View Slide

26. View Slide

27. A maintenance nightmare
    

    View Slide

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
    

    View Slide

29. A piece of s***
    

    View Slide

30. Why?
    ?
    

    View Slide

31. Web devs as seen by system devs
    

    View Slide

32. Frontend devs WERE scriptkiddies
    

    View Slide

33. JavaScript is popular!
    

    View Slide

34. The medieval ages are over
    

    View Slide

35. View Slide

36. NPM
    Installs, publishes and
    manages node programs.
    Package manager.
    

    View Slide

37. We can use it to install packages
    > npm install foo
    > npm install bar
    var  foo  =  require('foo');
    console.log(foo.square(4));
    

    View Slide

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
    

    View Slide

39. Ender
    Ender is a full featured
    package manager for
    your browser.
    The no-library library
    

    View Slide

40. > ender build domready qwery underscore
    
    Step 1
    Step 2
    Build on the command line
    

    View Slide

41. $('#content  a.button').bind('click',  function(e)  {
       ...
    });
    $.map(['a',  'b',  'c'],  function(letter)  {
       ...
    });
    $.ajax('/data',  function(respone)  {
       ...
    });
    Use with the $ symbol
    

    View Slide

42. Doesn’t play well with jQuery
    +
    -
    A little simpler
    Everything ends up on the $
    Everything still kind of global
    -
    -
    

    View Slide

43. Browserify
    Make node-style require()
    work in the browser with
    a server-side build step,
    as if by magic!
    

    View Slide

44. CommonJS
    CommonJS is a project with the goal of
    specifying an ecosystem for JavaScript outside
    the browser
    

    View Slide

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
    

    View Slide

46. exports.square  =  function(x)  {
       return  x  *  x;
    };
    console.log('loaded  foo');
    A module can have side-effects
    foo.js
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

50. Browserify
    

    View Slide

51. > browserify main.js -o bundle.js
    
    Step 1
    Step 2
    CommonJS in the browser!
    

    View Slide

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
    

    View Slide

53. var  main  =  require('main');
    (function()  {
       var  main  =  require('main');
       //  use  it  here  ..
    }());
    or better yet
    Use it with require
    

    View Slide

54. require.define("/main.js",  function(
       require,
       module,
       exports,
       __dirname,
       __filename,
       process)  {
           //  code  from  main.js
           //  ...
    });
    How it works
    

    View Slide

55. It resolves nested dependencies
    

    View Slide

56. Server and client united
    

    View Slide

57. Bundles everything into one file
    +
    -
    Simple and reasonable model
    Only worry about the top layer
    All the power of NPM
    -
    -
    +
    +
    

    View Slide

58. RequireJS
    A JavaScript module
    loader
    

    View Slide

59. RequireJS
    A JavaScript module
    loader
    NOT a package manager
    

    View Slide

60. require(['helper/util'],  function(util)  {
       //  use  util...
    });
    Asynchronous Module Definition
    main.js
    

    View Slide

61. define(['dep1',  'dep2'],  function(dep1,  dep2)  {
       return  {
           foo:  function()  {
               //  ...
           },
           bar:  42
       };
    });
    The contents of util.js
    util.js
    

    View Slide

62. define(function(require)  {
       var  dep1  =  require('dep1');
       var  dep2  =  require('dep2');
       return  {
           foo:  function()  {
               //  ...
           },
           bar:  42
       };
    });
    The CommonJS-like alternative
    util.js
    

    View Slide

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
    

    View Slide

64. Optimization is hard
    +
    -
    Lazy loading
    No package manager coupling
    Asynchronous
    -
    -
    +
    +
    

    View Slide

65. Jam
    A package manager
    for JavaScript.
    ”Unlike other
    repositories, we put
    the browser first.”
    

    View Slide

66. > jam install jquery
    
    Step 1
    Step 2
    Build it for the browser
    

    View Slide

67. require(['jquery'],  function($)  {
       $(document.body).text('Hello,  world!');
    });
    Use it with RequireJS
    

    View Slide

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
    

    View Slide

69. Added packaging overhead
    +
    -
    Targeted at browsers
    No backend modules
    Not as large index as NPM
    -
    -
    +
    

    View Slide

70. Bower
    A package manager
    for the web
    "A generic, un-
    opinionated solution to
    the problem of front-end
    package management."
    

    View Slide

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
    

    View Slide

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
    

    View Slide

73. Added packaging overhead
    +
    -
    Super simple
    Flexible
    Won’t take you all the way
    -
    -
    +
    

    View Slide

74. Drawing some conclusions
    

    View Slide

75. Templating engines are like weed
    

    View Slide

76. Frameworks are like weed
    

    View Slide

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

    View Slide

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

    View Slide

79. ?
    Which one to choose?
    

    View Slide

80. View Slide

81. View Slide

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

    View Slide

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

    View Slide

84. Huge app?
    Hard to optimize by hand?
    

    View Slide

85. Huge app?
    Hard to optimize by hand?
    

    View Slide

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

    View Slide

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

    View Slide

88. Never?
    

    View Slide

89. Never?
    

    View Slide

90. Do your homework!
    

    View Slide

91. Whatever you do - stop this!
    

    View Slide

92. Manage those
    dependencies!
    @jakobmattsson
    

    View Slide

93. Manage those
    dependencies!
    @jakobmattsson
    bit.ly/jakob-drupalcon
    + -
    

    View Slide

94. View Slide

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
    

    View Slide