dependency management & package management in javascript
DESCRIPTION
Talk given at WebExpo (Prague) - September 2013TRANSCRIPT
![Page 1: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/1.jpg)
Dependency management&
Package management
in JavaScriptSebastiano Armeli
@sebarmeli
WebExpo 2013, Prague (Czech Republic)
Friday, September 20, 13
![Page 2: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/2.jpg)
Friday, September 20, 13
![Page 3: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/3.jpg)
@sebarmeliSebastiano Armeli-Battana
• realestate.com.au • Melbourne, Australia
Friday, September 20, 13
![Page 4: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/4.jpg)
Dependency management&
Package management
in JavaScriptSebastiano Armeli
@sebarmeli
WebExpo 2013, Prague (Czech Republic)
Friday, September 20, 13
![Page 5: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/5.jpg)
Dependency management
Friday, September 20, 13
![Page 6: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/6.jpg)
“A dependency happens when a
component relies on another one”
Friday, September 20, 13
![Page 7: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/7.jpg)
View
<< depends on >>
Model
Friday, September 20, 13
![Page 8: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/8.jpg)
model.js------------
(function(window){ ‘use strict’;
function Model() { }
window.Model = Model;
})(window);
Friday, September 20, 13
![Page 9: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/9.jpg)
view.js------------
(function(window){ ‘use strict’;
function View(model) { this.model = model; }
window.View = View;
})(window);
Friday, September 20, 13
![Page 10: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/10.jpg)
var model = new Model();
var view = new View(model);
Friday, September 20, 13
![Page 11: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/11.jpg)
What to consider when
you createa dependency?
Friday, September 20, 13
![Page 12: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/12.jpg)
Principles of Package Coupling
Acyclic-Dependencies Principle
Stable-Dependencies Principle
Friday, September 20, 13
![Page 13: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/13.jpg)
Stable Dependencies
PrincipleFriday, September 20, 13
![Page 14: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/14.jpg)
Friday, September 20, 13
![Page 15: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/15.jpg)
Unstable
Stable
View
Model
Friday, September 20, 13
![Page 16: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/16.jpg)
Model DOES NOT change frequently
View DOES change frequently
Friday, September 20, 13
![Page 17: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/17.jpg)
Acyclic Dependencies
PrincipleFriday, September 20, 13
![Page 18: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/18.jpg)
Friday, September 20, 13
![Page 19: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/19.jpg)
View
ModelRouter
Friday, September 20, 13
![Page 20: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/20.jpg)
Avoid Cycles!
Friday, September 20, 13
![Page 21: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/21.jpg)
How do we handle
dependencies?
Friday, September 20, 13
![Page 22: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/22.jpg)
Java-----
import java.util.*;import javax.servlet.http.*;
Ruby-----
require ‘net/http’require ‘spec_helper’
Friday, September 20, 13
![Page 23: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/23.jpg)
...and in JS ?
Friday, September 20, 13
![Page 24: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/24.jpg)
import jQuery from ‘jquery’;
Friday, September 20, 13
![Page 25: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/25.jpg)
import jQuery from ‘jquery’;ES6Friday, September 20, 13
![Page 26: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/26.jpg)
<script src=”file1.js”></script><script src=”file2.js”></script><script src=”file3.js”></script><script src=”file4.js”></script><script src=”file5.js”></script><script src=”file6.js”></script><script src=”file7.js”></script><script src=”file8.js”></script>
index.html------------
Friday, September 20, 13
![Page 27: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/27.jpg)
<script src=”file3.js”></script><script src=”file4.js”></script>
<script src=”file1.js”></script><script src=”file2.js”></script>
index.html------------
<script src=”file5.js”></script><script src=”file6.js”></script><script src=”file7.js”></script><script src=”file8.js”></script>
Friday, September 20, 13
![Page 28: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/28.jpg)
<script src=”file3.js”></script><script src=”file4.js”></script>
<script src=”file1.js”></script><script src=”file2.js”></script>
index.html------------
<script src=”file5.js”></script><script src=”file6.js”></script><script src=”file7.js”></script><script src=”file8.js”></script>
Friday, September 20, 13
![Page 29: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/29.jpg)
<script src=”file4.js”></script><script src=”file3.js”></script>
<script src=”file1.js”></script><script src=”file2.js”></script>
index.html------------
<script src=”file5.js”></script><script src=”file6.js”></script><script src=”file7.js”></script><script src=”file8.js”></script>
Friday, September 20, 13
![Page 30: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/30.jpg)
Friday, September 20, 13
![Page 31: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/31.jpg)
Not only one way to order
<script>s
Friday, September 20, 13
![Page 32: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/32.jpg)
app.js view.js
helpers.jsview2.js
helpers2.jsmodel.js
Friday, September 20, 13
![Page 33: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/33.jpg)
app.js view.js
helpers.jsview2.js
helpers2.jsmodel.js
12
3
5
4
6
Friday, September 20, 13
![Page 34: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/34.jpg)
app.js view.js
helpers.jsview2.js
helpers2.jsmodel.js
12
3
5
4
6
4
1
3
2
5
6
Friday, September 20, 13
![Page 35: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/35.jpg)
1
4
5
2
3
0 1
1 2,3
2 5
3 4
IN-DEGREES NODE
Friday, September 20, 13
![Page 36: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/36.jpg)
4
5
2
3
0 2,3
2 5
3 4
IN-DEGREES NODE
1Results:
Friday, September 20, 13
![Page 37: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/37.jpg)
4
5
2
0 2
1 5
2 4
IN-DEGREES NODE
1 - 3Results:
Friday, September 20, 13
![Page 38: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/38.jpg)
4
5
0 5
1 4
IN-DEGREES NODE
1 - 3 - 2Results:
Friday, September 20, 13
![Page 39: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/39.jpg)
40 4
IN-DEGREES NODE
1 - 3 - 2 - 5Results:
Friday, September 20, 13
![Page 40: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/40.jpg)
1
4
5
2
3 1 - 3 - 2 - 5 - 4
4 - 5 - 2 - 3 - 1
Friday, September 20, 13
![Page 41: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/41.jpg)
http://howardlewisship.com/images/t5-service-dependencies.jpgFriday, September 20, 13
![Page 42: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/42.jpg)
RequireJS
Friday, September 20, 13
![Page 43: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/43.jpg)
Friday, September 20, 13
![Page 44: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/44.jpg)
var module = (function(){ // private variables, methodsvar title = “”;function f1() {}
return {// public/privileged methodsgetTitle: function(){return title;
}}
}()) ;
MODULE PATTERN
Friday, September 20, 13
![Page 45: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/45.jpg)
define(function () {
var title = “”;function f1() {}
return {
getTitle: function() {return title;
} }
});
RJS MODULE PATTERN
Friday, September 20, 13
![Page 46: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/46.jpg)
define(id?, dependencies?, factory)
Friday, September 20, 13
![Page 47: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/47.jpg)
index.htmljs /-- 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
![Page 48: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/48.jpg)
index.htmljs /-- 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
![Page 49: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/49.jpg)
require(dependencies?, factory)
Friday, September 20, 13
![Page 50: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/50.jpg)
index.html------------<script src=”js/vendor/require.js” data-main=”js/main.js”></script>
main.js------------require([‘view1’],function(view1){view1.init();
});
index.htmljs /-- main.js-- helpers.js-- app / -- views / -- view1.js -- vendor / -- require.js
Friday, September 20, 13
![Page 51: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/51.jpg)
Friday, September 20, 13
![Page 52: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/52.jpg)
main.js------------require.config({baseUrl: ‘./js’,
paths: {‘view1’: ‘app/views/view1’
}});
require([‘view1’],function(view1){view1.init();
});
index.htmljs /-- main.js-- helpers.js-- app / -- views / -- view1.js -- vendor / -- require.js
Friday, September 20, 13
![Page 53: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/53.jpg)
NO blocking!Friday, September 20, 13
![Page 54: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/54.jpg)
require() asynchronous
de!ne() - de!ne.amd
AMDwell suited for browser
Friday, September 20, 13
![Page 55: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/55.jpg)
Friday, September 20, 13
![Page 56: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/56.jpg)
Friday, September 20, 13
![Page 57: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/57.jpg)
if ( typeof define === "function" &&define.amd ) {
define( "jquery", [], function () { return jQuery;
});}
Friday, September 20, 13
![Page 58: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/58.jpg)
Friday, September 20, 13
![Page 59: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/59.jpg)
index.htmljs /-- 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
![Page 60: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/60.jpg)
index.htmljs /-- 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
![Page 61: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/61.jpg)
LOADER PLUGINS
• i18n!, async!, domReady!
• text!, css!, json!, cs!, hbs!
[plugin Module ID]![resource ID]
Friday, September 20, 13
![Page 62: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/62.jpg)
main.js------------require.config({baseUrl: ‘./js’
});
require([‘text!partials/file.txt’],function(txt) {// txt goes here
});
index.htmljs /-- main.js -- vendor / -- require.js -- text.js-- partials / -- !le.txt
Friday, September 20, 13
![Page 63: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/63.jpg)
Friday, September 20, 13
![Page 64: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/64.jpg)
3 requests!Friday, September 20, 13
![Page 65: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/65.jpg)
r.js
npm install -g requirejs
OPTIMIZER
Friday, September 20, 13
![Page 66: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/66.jpg)
r.js -o tools/build.js
Friday, September 20, 13
![Page 67: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/67.jpg)
build.js------------({ appDir:'../', mainConfigFile: '../js/main.js', dir: "../build", modules: [ { name: "../main" } ]})
index.htmljs /-- main.js-- helpers.js-- app / -- views / -- view1.js -- vendor / -- require.jstools /-- build.js
Friday, September 20, 13
![Page 68: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/68.jpg)
build/js/main.js----------------
index.htmlbuild /-- 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.jsjs/vendor/view1.jsjs/vendor/../main.js
build/build.txt----------------
Friday, September 20, 13
![Page 69: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/69.jpg)
OPTIMIZER
1 request!Friday, September 20, 13
![Page 70: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/70.jpg)
Friday, September 20, 13
![Page 71: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/71.jpg)
exports.render = function() {};
var module = require(‘view1’);
NO de!ne()
require() synchronous
Server-side approach
Friday, September 20, 13
![Page 72: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/72.jpg)
npm install -g browserify
Friday, September 20, 13
![Page 73: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/73.jpg)
foo.js------------
index.htmljs /-- main.js-- foo.jsnode_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
![Page 74: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/74.jpg)
browserify js/main.js > js/bundle.js
Friday, September 20, 13
![Page 75: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/75.jpg)
index.html------------
index.htmljs /-- main.js-- foo.js-- bundle.jsnode_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<r.length;o++)s(r[o]);return s})({1:[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])
<script src=”js/bundle.js”></script>
Friday, September 20, 13
![Page 76: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/76.jpg)
Package management
Friday, September 20, 13
![Page 77: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/77.jpg)
Friday, September 20, 13
![Page 78: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/78.jpg)
“A package is a specific piece of
software installable”
Friday, September 20, 13
![Page 79: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/79.jpg)
PackagesOne or more modules
Friday, September 20, 13
![Page 80: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/80.jpg)
Name, Description, Version
Metadata
PackagesOne or more modules
Friday, September 20, 13
![Page 81: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/81.jpg)
Name, Description, Version
Metadata
PackagesOne or more modules
Checksum
Friday, September 20, 13
![Page 82: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/82.jpg)
Name, Description, Version
Metadata
PackagesOne or more modules
Checksum
Dependencies
Friday, September 20, 13
![Page 83: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/83.jpg)
Package Manageris the TOOL to...
Friday, September 20, 13
![Page 84: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/84.jpg)
Speed up your development work"ow
Friday, September 20, 13
![Page 85: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/85.jpg)
Speed up your development work"ow
Automate common tasks
Friday, September 20, 13
![Page 86: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/86.jpg)
Speed up your development work"ow
Automate common tasks
DRY with Repository / Registry
Friday, September 20, 13
![Page 87: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/87.jpg)
Common Operations
Friday, September 20, 13
![Page 88: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/88.jpg)
Installing
Friday, September 20, 13
![Page 89: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/89.jpg)
Installing
Removing
Friday, September 20, 13
![Page 90: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/90.jpg)
Installing
Removing
Searching
Friday, September 20, 13
![Page 91: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/91.jpg)
Installing
Removing
Searching
Upgrading
Friday, September 20, 13
![Page 92: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/92.jpg)
Installing
Removing
Searching
Upgrading
Publishing
Friday, September 20, 13
![Page 93: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/93.jpg)
Package Depedencies
A
B
C
C
Friday, September 20, 13
![Page 94: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/94.jpg)
Package Depedencies
A
B
C
C
=1.1.0
>1.2.0
Friday, September 20, 13
![Page 95: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/95.jpg)
Package Depedencies
A
B
C
C
=1.1.0
>1.2.0
Which version should I
download?
Friday, September 20, 13
![Page 96: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/96.jpg)
Java Ruby Python .Net OSX Linux
Maven/Gradle Rubygems pip NuGet Homebrew yum/apt
Friday, September 20, 13
![Page 97: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/97.jpg)
How do you install packages
in JS ?Friday, September 20, 13
![Page 98: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/98.jpg)
Friday, September 20, 13
![Page 99: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/99.jpg)
Node.js
Friday, September 20, 13
![Page 100: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/100.jpg)
package.json
Node.js
Friday, September 20, 13
![Page 101: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/101.jpg)
package.json
NPM registry
Node.js
Friday, September 20, 13
![Page 102: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/102.jpg)
package.json------------{ "name": "my-app", "version": "0.0.1", "dependencies": { "jquery": "~2.0" }, "devDependencies": { "qunit": "0.5.x" }}
index.htmlpackage.jsonjs /-- app.js
Friday, September 20, 13
![Page 103: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/103.jpg)
npm install
Friday, September 20, 13
![Page 104: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/104.jpg)
npm install <package>
Commands
Friday, September 20, 13
![Page 105: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/105.jpg)
npm install <package>
Commands
npm install -g <package>
Friday, September 20, 13
![Page 106: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/106.jpg)
npm install <package>
Commands
npm install -g <package>
npm update <package>
Friday, September 20, 13
![Page 107: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/107.jpg)
npm list
Commands
Friday, September 20, 13
![Page 108: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/108.jpg)
npm list
Commands
npm uninstall <package>
Friday, September 20, 13
![Page 109: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/109.jpg)
npm list
Commands
npm uninstall <package>
npm publish <tarball>
Friday, September 20, 13
![Page 110: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/110.jpg)
is a not Package Manager
for the CLIENT
Friday, September 20, 13
![Page 111: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/111.jpg)
Bower
Friday, September 20, 13
![Page 112: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/112.jpg)
BowerMinimalistic & Agnostic
Friday, September 20, 13
![Page 113: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/113.jpg)
BowerMinimalistic & Agnostic
HTML/CSS/JS
Friday, September 20, 13
![Page 114: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/114.jpg)
BowerMinimalistic & Agnostic
HTML/CSS/JS
AMD/CommonJS/ES6 modules
Friday, September 20, 13
![Page 115: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/115.jpg)
npm install -g bower
Friday, September 20, 13
![Page 116: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/116.jpg)
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.htmlbower.jsonjs /-- app.js
Friday, September 20, 13
![Page 117: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/117.jpg)
bower install
Friday, September 20, 13
![Page 118: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/118.jpg)
.bowerrc------------{ "directory”: “js/vendor”, “json”: “bower.json”}
index.htmlbower.json.bowerrcjs /-- app.js-- vendor/ -- jquery/ -- jquery.js -- requirejs/ -- require.js
index.html------------<script src=”js/vendor/jquery/jquery.js ></script>
Friday, September 20, 13
![Page 119: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/119.jpg)
bower install jquery#1.8.2
Git tagAlias from registry
Friday, September 20, 13
![Page 120: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/120.jpg)
bower install jquery --save
Friday, September 20, 13
![Page 121: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/121.jpg)
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
![Page 122: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/122.jpg)
bower list
my-package├── jquery#2.0.3└── requirejs#2.1.8
Friday, September 20, 13
![Page 123: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/123.jpg)
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
![Page 124: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/124.jpg)
bower update jquery
bower uninstall jquery
bower info jquery
Friday, September 20, 13
![Page 125: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/125.jpg)
bower register <package> <git_endpoint>
Friday, September 20, 13
![Page 126: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/126.jpg)
Friday, September 20, 13
![Page 127: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/127.jpg)
file1.js-----------require([‘module2’], function(){
// <use> <module2>;
});
Dependency management
Friday, September 20, 13
![Page 128: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/128.jpg)
file1.js-----------var module2 = require(‘module2’);
// use module2
Dependency management
Friday, September 20, 13
![Page 129: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/129.jpg)
source_file-----------
<import> <module2>;
// <use> <module2>;
$ bower install jquery
Package managementFriday, September 20, 13
![Page 130: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/130.jpg)
source_file-----------
<import> <module2>;
// <use> <module2>;
$ npm install jquery
Package managementFriday, September 20, 13
![Page 131: Dependency management & Package management in JavaScript](https://reader038.vdocuments.us/reader038/viewer/2022102804/54c718224a795928408b4771/html5/thumbnails/131.jpg)
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