Dependency management & Package management in JavaScript

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

@sebarmeli
Sebastiano Armeli-Battana
• realestate.com.au
• Melbourne, Australia

Dependency
management

“A dependency
happens when a
component relies on
another one”

View
<< depends on >>
Model

model.js
------------
(function(window){
‘use strict’;
function Model() { }
window.Model = Model;
})(window);

view.js
------------
(function(window){
‘use strict’;
function View(model) {
this.model = model;
}
window.View = View;
})(window);

var model = new Model();
var view = new View(model);

What to
consider when
you create
a dependency?

Principles of
Package Coupling
Acyclic-Dependencies
Principle
Stable-Dependencies
Principle

Stable
Dependencies
Principle

Unstable
Stable
View
Model

Model DOES NOT change
frequently
View DOES change
frequently

Acyclic
Dependencies
Principle

View
ModelRouter

Avoid Cycles!

How do we
handle
dependencies?

Java
-----
import java.util.*;
import javax.servlet.http.*;
Ruby
-----
require ‘net/http’
require ‘spec_helper’

...and in JS ?

import jQuery from ‘jquery’;

import jQuery from ‘jquery’;
ES6

index.html
------------

Not only one
way to order
<script>s

app.js view.js
helpers.jsview2.js
helpers2.js
model.js

app.js view.js
helpers.jsview2.js
helpers2.js
model.js
1
2
3
5
4
6

app.js view.js
helpers.jsview2.js
helpers2.js
model.js
1
2
3
5
4
6
4
1
3
2
5
6

1
4
5
2
3
0 1
1 2,3
2 5
3 4
IN-DEGREES NODE

4
5
2
3
0 2,3
2 5
3 4
IN-DEGREES NODE
1
Results:

4
5
2
0 2
1 5
2 4
IN-DEGREES NODE
1 - 3
Results:

4
5
0 5
1 4
IN-DEGREES NODE
1 - 3 - 2
Results:

4
0 4
IN-DEGREES NODE
1 - 3 - 2 - 5
Results:

1
4
5
2
3
1 - 3 - 2 - 5 - 4
4 - 5 - 2 - 3 - 1

http://howardlewisship.com/images/t5-service-dependencies.jpg

RequireJS

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

define(function () {
var title = “”;
function f1() {}
return {
getTitle: function() {
return title;
}
}
});
RJS MODULE PATTERN

define(id?, dependencies?, factory)

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
------------

require(dependencies?, factory)

index.html
------------
<script src=”js/vendor/require.js”
data-main=”js/main.js”></script>
main.js
------------
require([‘view1’],function(view1){
view1.init();
});
index.html
js /
-- main.js
-- helpers.js
-- app /
-- views /
-- view1.js
-- vendor /
-- require.js

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

NO blocking!

require() asynchronous
de!ne() - de!ne.amd
AMD
well suited for browser

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

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();
});

LOADER PLUGINS
• i18n!, async!, domReady!
• text!, css!, json!, cs!, hbs!
[plugin Module ID]![resource ID]

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

3 requests!

r.js
npm install -g requirejs
OPTIMIZER

r.js -o tools/build.js

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

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
----------------

OPTIMIZER
1 request!

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

npm install -g browserify

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();

browserify js/main.js > js/bundle.js

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<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>

Package
management

“A package is a
speciﬁc piece of
software installable”

Packages
One or more modules

Name, Description, Version
Metadata
Packages
One or more modules

Metadata
Packages
One or more modules
Checksum

Metadata
Packages
One or more modules
Checksum
Dependencies

Package Manager
is the TOOL to...

Speed up your development work"ow

Automate common tasks

Automate common tasks
DRY with Repository / Registry

Common Operations

Installing

Installing
Removing

Installing
Removing
Searching

Installing
Removing
Searching
Upgrading

Installing
Removing
Searching
Upgrading
Publishing

Package Depedencies
A
B
C
C

Package Depedencies
A
B
C
C
=1.1.0
>1.2.0

Package Depedencies
A
B
C
C
=1.1.0
>1.2.0
Which version
should I
download?

Java Ruby Python .Net OSX Linux
Maven/Gradle Rubygems pip NuGet Homebrew yum/apt

How do you
install packages
in JS ?

Node.js

package.json
Node.js

package.json
NPM registry
Node.js

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

npm install

npm install <package>
Commands

Commands
npm install -g <package>

Commands
npm install -g <package>
npm update <package>

npm list
Commands

npm list
Commands
npm uninstall <package>

npm list
Commands
npm uninstall <package>
npm publish <tarball>

is a not Package Manager
for the CLIENT

Bower

Bower
Minimalistic & Agnostic

Bower
HTML/CSS/JS

Bower
HTML/CSS/JS
AMD/CommonJS/ES6 modules

npm install -g bower

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

bower install

.bowerrc
------------
{
"directory”: “js/vendor”,
“json”: “bower.json”
}
index.html
bower.json
.bowerrc
js /
-- app.js
-- vendor/
-- jquery/
-- jquery.js
-- requirejs/
-- require.js
index.html
------------
<script src=”js/vendor/jquery/jquery.js >
</script>

bower install jquery#1.8.2
Git tagAlias from registry

bower install jquery --save

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

bower list
my-package
├── jquery#2.0.3
└── requirejs#2.1.8

bower list
my-package
├── jquery#1.8.2 incompatible with ~2.0.0 (2.0.3 available)
my-package
├── jquery#2.0.3

bower update jquery
bower uninstall jquery
bower info jquery

bower register <package> <git_endpoint>

file1.js
-----------
require([‘module2’], function(){
// <use> <module2>;
});

file1.js
-----------
var module2 = require(‘module2’);
// use module2

source_file
-----------
<import> <module2>;
// <use> <module2>;
$ bower install jquery
Package management

source_file
-----------
<import> <module2>;
// <use> <module2>;
$ npm install jquery
Package management

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

Dependency management & Package management in JavaScript

More Related Content

What's hot

Viewers also liked

Similar to Dependency management & Package management in JavaScript

More from Sebastiano Armeli

Recently uploaded

Dependency management & Package management in JavaScript