Dependency management and Package management in JavaScript

Talk given at WebExpo (Prague) - September 2013

Transcript

1. Dependency management
   &
   Package management
   in JavaScript
   Sebastiano Armeli
   @sebarmeli
   WebExpo 2013, Prague (Czech Republic)
   Friday, September 20, 13
   

   View Slide

2. Friday, September 20, 13
   

   View Slide

3. @sebarmeli
   Sebastiano Armeli-Battana
   • realestate.com.au
   • Melbourne, Australia
   Friday, September 20, 13
   

   View Slide

4. Dependency management
   &
   Package management
   in JavaScript
   Sebastiano Armeli
   @sebarmeli
   WebExpo 2013, Prague (Czech Republic)
   Friday, September 20, 13
   

   View Slide

5. Dependency
   management
   Friday, September 20, 13
   

   View Slide

6. “A dependency
   happens when a
   component relies on
   another one”
   Friday, September 20, 13
   

   View Slide

7. View
   << depends on >>
   Model
   Friday, September 20, 13
   

   View Slide

8. model.js
   ------------
   (function(window){
   ‘use strict’;
   function Model() { }
   window.Model = Model;
   })(window);
   Friday, September 20, 13
   

   View Slide

9. view.js
   ------------
   (function(window){
   ‘use strict’;
   function View(model) {
   this.model = model;
   }
   window.View = View;
   })(window);
   Friday, September 20, 13
   

   View Slide

10. var model = new Model();
    var view = new View(model);
    Friday, September 20, 13
    

    View Slide

11. What to
    consider when
    you create
    a dependency?
    Friday, September 20, 13
    

    View Slide

12. Principles of
    Package Coupling
    Acyclic-Dependencies
    Principle
    Stable-Dependencies
    Principle
    Friday, September 20, 13
    

    View Slide

13. Stable
    Dependencies
    Principle
    Friday, September 20, 13
    

    View Slide

14. Friday, September 20, 13
    

    View Slide

15. Unstable
    Stable
    View
    Model
    Friday, September 20, 13
    

    View Slide

16. Model DOES NOT change
    frequently
    View DOES change
    frequently
    Friday, September 20, 13
    

    View Slide

17. Acyclic
    Dependencies
    Principle
    Friday, September 20, 13
    

    View Slide

18. Friday, September 20, 13
    

    View Slide

19. View
    Model
    Router
    Friday, September 20, 13
    

    View Slide

20. Avoid Cycles!
    Friday, September 20, 13
    

    View Slide

21. How do we
    handle
    dependencies?
    Friday, September 20, 13
    

    View Slide

22. Java
    -----
    import java.util.*;
    import javax.servlet.http.*;
    Ruby
    -----
    require ‘net/http’
    require ‘spec_helper’
    Friday, September 20, 13
    

    View Slide

23. ...and in JS ?
    Friday, September 20, 13
    

    View Slide

24. import jQuery from ‘jquery’;
    Friday, September 20, 13
    

    View Slide

25. import jQuery from ‘jquery’;
    ES6
    Friday, September 20, 13
    

    View Slide

26. 
    
    
    
    
    
    
    
    index.html
    ------------
    Friday, September 20, 13
    

    View Slide

27. 
    
    
    
    index.html
    ------------
    
    
    
    
    Friday, September 20, 13
    

    View Slide

28. 
    
    
    
    index.html
    ------------
    
    
    
    
    Friday, September 20, 13
    

    View Slide

29. 
    
    
    
    index.html
    ------------
    
    
    
    
    Friday, September 20, 13
    

    View Slide

30. Friday, September 20, 13
    

    View Slide

31. Not only one
    way to order
    s<br/>Friday, September 20, 13<br/>

    View Slide

32. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    Friday, September 20, 13
    

    View Slide

33. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    1
    2
    3
    5
    4
    6
    Friday, September 20, 13
    

    View Slide

34. app.js view.js
    helpers.js
    view2.js
    helpers2.js
    model.js
    1
    2
    3
    5
    4
    6
    4
    1
    3
    2
    5
    6
    Friday, September 20, 13
    

    View Slide

35. 1
    4
    5
    2
    3
    0 1
    1 2,3
    2 5
    3 4
    IN-DEGREES NODE
    Friday, September 20, 13
    

    View Slide

36. 4
    5
    2
    3
    0 2,3
    2 5
    3 4
    IN-DEGREES NODE
    1
    Results:
    Friday, September 20, 13
    

    View Slide

37. 4
    5
    2
    0 2
    1 5
    2 4
    IN-DEGREES NODE
    1 - 3
    Results:
    Friday, September 20, 13
    

    View Slide

38. 4
    5
    0 5
    1 4
    IN-DEGREES NODE
    1 - 3 - 2
    Results:
    Friday, September 20, 13
    

    View Slide

39. 4
    0 4
    IN-DEGREES NODE
    1 - 3 - 2 - 5
    Results:
    Friday, September 20, 13
    

    View Slide

40. 1
    4
    5
    2
    3 1 - 3 - 2 - 5 - 4
    4 - 5 - 2 - 3 - 1
    Friday, September 20, 13
    

    View Slide

41. http://howardlewisship.com/images/t5-service-dependencies.jpg
    Friday, September 20, 13
    

    View Slide

42. RequireJS
    Friday, September 20, 13
    

    View Slide

43. Friday, September 20, 13
    

    View Slide

44. var module = (function(){
    // private variables, methods
    var title = “”;
    function f1() {}
    return {
    // public/privileged methods
    getTitle: function(){
    return title;
    }
    }
    }()) ;
    MODULE PATTERN
    Friday, September 20, 13
    

    View Slide

45. define(function () {
    var title = “”;
    function f1() {}
    return {
    getTitle: function() {
    return title;
    }
    }
    });
    RJS MODULE PATTERN
    Friday, September 20, 13
    

    View Slide

46. define(id?, dependencies?, factory)
    Friday, September 20, 13
    

    View Slide

47. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    view1.js
    ------------
    define([‘helpers’],
    function(helpers){
    return {
    init: function(){}
    }
    });
    define(function(){
    // code here
    });
    helpers.js
    ------------
    Friday, September 20, 13
    

    View Slide

48. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    view1.js
    ------------
    define([‘helpers’],
    function(helpers){
    return {
    init: function(){}
    }
    });
    define(function(){
    // code here
    });
    helpers.js
    ------------
    Friday, September 20, 13
    

    View Slide

49. require(dependencies?, factory)
    Friday, September 20, 13
    

    View Slide

50. index.html
    ------------
    data-main=”js/main.js”>
    main.js
    ------------
    require([‘view1’],function(view1){
    view1.init();
    });
    index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    Friday, September 20, 13
    

    View Slide

51. Friday, September 20, 13
    

    View Slide

52. main.js
    ------------
    require.config({
    baseUrl: ‘./js’,
    paths: {
    ‘view1’: ‘app/views/view1’
    }
    });
    require([‘view1’],function(view1){
    view1.init();
    });
    index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    Friday, September 20, 13
    

    View Slide

53. NO blocking!
    Friday, September 20, 13
    

    View Slide

54. require() asynchronous
    de!ne() - de!ne.amd
    AMD
    well suited for browser
    Friday, September 20, 13
    

    View Slide

55. Friday, September 20, 13
    

    View Slide

56. Friday, September 20, 13
    

    View Slide

57. if ( typeof define === "function" &&
    define.amd ) {
    define( "jquery", [], function () {
    return jQuery;
    });
    }
    Friday, September 20, 13
    

    View Slide

58. Friday, September 20, 13
    

    View Slide

59. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- backbone.js
    -- underscore.js
    -- jquery.js
    main.js
    ------------
    require.config({
    baseUrl: ‘js/vendor’,
    shim: {
    ‘underscore’:{
    exports: ‘_’
    },
    ‘backbone’: {
    deps: [‘jquery’, ‘underscore’],
    exports: ‘Backbone’
    }
    }
    });
    require([‘backbone’],function(Backbone){
    Backbone.history.start();
    });
    Friday, September 20, 13
    

    View Slide

60. index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- backbone.js
    -- underscore.js
    -- jquery.js
    main.js
    ------------
    require.config({
    baseUrl: ‘js/vendor’,
    shim: {
    ‘underscore’:{
    exports: ‘_’
    },
    ‘backbone’: {
    deps: [‘jquery’, ‘underscore’],
    exports: ‘Backbone’
    }
    }
    });
    require([‘backbone’],function(Backbone){
    Backbone.history.start();
    });
    Friday, September 20, 13
    

    View Slide

61. LOADER PLUGINS
    • i18n!, async!, domReady!
    • text!, css!, json!, cs!, hbs!
    [plugin Module ID]![resource ID]
    Friday, September 20, 13
    

    View Slide

62. main.js
    ------------
    require.config({
    baseUrl: ‘./js’
    });
    require([‘text!partials/file.txt’],
    function(txt) {
    // txt goes here
    });
    index.html
    js /
    -- main.js
    -- vendor /
    -- require.js
    -- text.js
    -- partials /
    -- !le.txt
    Friday, September 20, 13
    

    View Slide

63. Friday, September 20, 13
    

    View Slide

64. 3 requests!
    Friday, September 20, 13
    

    View Slide

65. r.js
    npm install -g requirejs
    OPTIMIZER
    Friday, September 20, 13
    

    View Slide

66. r.js -o tools/build.js
    Friday, September 20, 13
    

    View Slide

67. build.js
    ------------
    ({
    appDir:'../',
    mainConfigFile: '../js/main.js',
    dir: "../build",
    modules: [
    {
    name: "../main"
    }
    ]
    })
    index.html
    js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    tools /
    -- build.js
    Friday, September 20, 13
    

    View Slide

68. build/js/main.js
    ----------------
    index.html
    build /
    -- index.html
    -- build.txt
    -- js /
    -- main.js
    -- helpers.js
    -- app /
    -- views /
    -- view1.js
    -- vendor /
    -- require.js
    -- tools /
    -- build.js
    js/vendor/../main.js
    ----------------
    js/helpers.js
    js/vendor/view1.js
    js/vendor/../main.js
    build/build.txt
    ----------------
    Friday, September 20, 13
    

    View Slide

69. OPTIMIZER
    1 request!
    Friday, September 20, 13
    

    View Slide

70. Friday, September 20, 13
    

    View Slide

71. exports.render = function() {};
    var module = require(‘view1’);
    NO de!ne()
    require() synchronous
    Server-side approach
    Friday, September 20, 13
    

    View Slide

72. npm install -g browserify
    Friday, September 20, 13
    

    View Slide

73. foo.js
    ------------
    index.html
    js /
    -- main.js
    -- foo.js
    node_modules /
    package.json
    var Foo = function() {
    // do something
    };
    module.exports = Foo;
    main.js
    ------------
    var Foo = require(‘./foo’);
    var foo = new Foo();
    Friday, September 20, 13
    

    View Slide

74. browserify js/main.js > js/bundle.js
    Friday, September 20, 13
    

    View Slide

75. index.html
    ------------
    index.html
    js /
    -- main.js
    -- foo.js
    -- bundle.js
    node_modules /
    package.json
    bundle.js
    ------------
    ;(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o])
    {var a=typeof require=="function"&&require;if(!u&&a)return
    a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find
    module '"+o+"'")}var f=n[o]={exports:{}};t[o]
    [0].call(f.exports,function(e){var n=t[o][1][e];return
    s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var
    i=typeof require=="function"&&require;for(var
    o=0;o[function(require,module,exports){
    var Foo = function(){
    console.log("AA");
    };
    module.exports = Foo;
    },{}],2:[function(require,module,exports){
    var Foo = require('./foo');
    var foo = new Foo();
    },{"./foo":1}]},{},[2])
    <br/>
    Friday, September 20, 13
    

    View Slide

76. Package
    management
    Friday, September 20, 13
    

    View Slide

77. Friday, September 20, 13
    

    View Slide

78. “A package is a
    specific piece of
    software installable”
    Friday, September 20, 13
    

    View Slide

79. Packages
    One or more modules
    Friday, September 20, 13
    

    View Slide

80. Name, Description, Version
    Metadata
    Packages
    One or more modules
    Friday, September 20, 13
    

    View Slide

81. Name, Description, Version
    Metadata
    Packages
    One or more modules
    Checksum
    Friday, September 20, 13
    

    View Slide

82. Name, Description, Version
    Metadata
    Packages
    One or more modules
    Checksum
    Dependencies
    Friday, September 20, 13
    

    View Slide

83. Package Manager
    is the TOOL to...
    Friday, September 20, 13
    

    View Slide

84. Speed up your development work"ow
    Friday, September 20, 13
    

    View Slide

85. Speed up your development work"ow
    Automate common tasks
    Friday, September 20, 13
    

    View Slide

86. Speed up your development work"ow
    Automate common tasks
    DRY with Repository / Registry
    Friday, September 20, 13
    

    View Slide

87. Common Operations
    Friday, September 20, 13
    

    View Slide

88. Installing
    Friday, September 20, 13
    

    View Slide

89. Installing
    Removing
    Friday, September 20, 13
    

    View Slide

90. Installing
    Removing
    Searching
    Friday, September 20, 13
    

    View Slide

91. Installing
    Removing
    Searching
    Upgrading
    Friday, September 20, 13
    

    View Slide

92. Installing
    Removing
    Searching
    Upgrading
    Publishing
    Friday, September 20, 13
    

    View Slide

93. Package Depedencies
    A
    B
    C
    C
    Friday, September 20, 13
    

    View Slide

94. Package Depedencies
    A
    B
    C
    C
    =1.1.0
    >1.2.0
    Friday, September 20, 13
    

    View Slide

95. Package Depedencies
    A
    B
    C
    C
    =1.1.0
    >1.2.0
    Which version
    should I
    download?
    Friday, September 20, 13
    

    View Slide

96. Java Ruby Python .Net OSX Linux
    Maven/Gradle Rubygems pip NuGet Homebrew yum/apt
    Friday, September 20, 13
    

    View Slide

97. How do you
    install packages
    in JS ?
    Friday, September 20, 13
    

    View Slide

98. Friday, September 20, 13
    

    View Slide

99. Node.js
    Friday, September 20, 13
    

    View Slide

100. package.json
     Node.js
     Friday, September 20, 13
     

     View Slide

101. package.json
     NPM registry
     Node.js
     Friday, September 20, 13
     

     View Slide

102. package.json
     ------------
     {
     "name": "my-app",
     "version": "0.0.1",
     "dependencies": {
     "jquery": "~2.0"
     },
     "devDependencies": {
     "qunit": "0.5.x"
     }
     }
     index.html
     package.json
     js /
     -- app.js
     Friday, September 20, 13
     

     View Slide

103. npm install
     Friday, September 20, 13
     

     View Slide

104. npm install
     Commands
     Friday, September 20, 13
     

     View Slide

105. npm install
     Commands
     npm install -g
     Friday, September 20, 13
     

     View Slide

106. npm install
     Commands
     npm install -g
     npm update
     Friday, September 20, 13
     

     View Slide

107. npm list
     Commands
     Friday, September 20, 13
     

     View Slide

108. npm list
     Commands
     npm uninstall
     Friday, September 20, 13
     

     View Slide

109. npm list
     Commands
     npm uninstall
     npm publish
     Friday, September 20, 13
     

     View Slide

110. is a not Package Manager
     for the CLIENT
     Friday, September 20, 13
     

     View Slide

111. Bower
     Friday, September 20, 13
     

     View Slide

112. Bower
     Minimalistic & Agnostic
     Friday, September 20, 13
     

     View Slide

113. Bower
     Minimalistic & Agnostic
     HTML/CSS/JS
     Friday, September 20, 13
     

     View Slide

114. Bower
     Minimalistic & Agnostic
     HTML/CSS/JS
     AMD/CommonJS/ES6 modules
     Friday, September 20, 13
     

     View Slide

115. npm install -g bower
     Friday, September 20, 13
     

     View Slide

116. bower.json
     ------------
     {
     "name": "my-app",
     "version": "0.0.1",
     "ignore": [
     "build",
     "Gruntfile.js",
     "package.json",
     "bower.json"
     ],
     "main": ["js/app.js"],
     "dependencies": {
     "requirejs": "~2.1.8", // >=2.1.8 < 2.2.0
     "jquery": "~2.0" // >=2.0.0 < 2.1.0
     },
     "devDependencies": {
     "qunit": "^1.12.0" // >=1.12.0 < 2.0.0
     }
     }
     index.html
     bower.json
     js /
     -- app.js
     Friday, September 20, 13
     

     View Slide

117. bower install
     Friday, September 20, 13
     

     View Slide

118. .bowerrc
     ------------
     {
     "directory”: “js/vendor”,
     “json”: “bower.json”
     }
     index.html
     bower.json
     .bowerrc
     js /
     -- app.js
     -- vendor/
     -- jquery/
     -- jquery.js
     -- requirejs/
     -- require.js
     index.html
     ------------
     <br/>
     Friday, September 20, 13
     

     View Slide

119. bower install jquery#1.8.2
     Git tag
     Alias from registry
     Friday, September 20, 13
     

     View Slide

120. bower install jquery --save
     Friday, September 20, 13
     

     View Slide

121. bower install git://github.com/jquery/jquery.git#1.8.3
     bower install ../my-package
     Git endpoint + Git tag
     Local package
     bower install https://github.com/jquery/jquery.git
     Git endpoint
     Friday, September 20, 13
     

     View Slide

122. bower list
     my-package
     ├── jquery#2.0.3
     └── requirejs#2.1.8
     Friday, September 20, 13
     

     View Slide

123. bower list
     my-package
     ├── jquery#1.8.2 incompatible with ~2.0.0 (2.0.3 available)
     └── requirejs#2.1.8
     my-package
     ├── jquery#2.0.3
     └── requirejs#2.1.8
     Friday, September 20, 13
     

     View Slide

124. bower update jquery
     bower uninstall jquery
     bower info jquery
     Friday, September 20, 13
     

     View Slide

125. bower register
     Friday, September 20, 13
     

     View Slide

126. Friday, September 20, 13
     

     View Slide

127. file1.js
     -----------
     require([‘module2’], function(){
     // ;
     });
     Dependency management
     Friday, September 20, 13
     

     View Slide

128. file1.js
     -----------
     var module2 = require(‘module2’);
     // use module2
     Dependency management
     Friday, September 20, 13
     

     View Slide

129. source_file
     -----------
     ;
     // ;
     $ bower install jquery
     Package management
     Friday, September 20, 13
     

     View Slide

130. source_file
     -----------
     ;
     // ;
     $ npm install jquery
     Package management
     Friday, September 20, 13
     

     View Slide

131. http://requirejs.com
     http://bower.io/
     @sebarmeli
     https://github.com/amdjs/amdjs-api/wiki/AMD
     https://npmjs.org/
     WebExpo 2013, Prague (Czech Republic)
     Friday, September 20, 13
     

     View Slide