Dependency management & Package management in JavaScript

Dependency management&

Package management

in JavaScriptSebastiano Armeli

@sebarmeli

WebExpo 2013, Prague (Czech Republic)

Friday, September 20, 13

@sebarmeliSebastiano Armeli-Battana

• realestate.com.au • Melbourne, Australia


Dependency management&

Package management

in JavaScriptSebastiano Armeli

@sebarmeli

WebExpo 2013, Prague (Czech Republic)


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 createa dependency?


Principles of Package Coupling

Acyclic-Dependencies Principle

Stable-Dependencies Principle


Stable Dependencies

PrincipleFriday, September 20, 13

Unstable

Stable

View

Model


Model DOES NOT change frequently

View DOES change frequently


Acyclic Dependencies

PrincipleFriday, September 20, 13

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’;ES6Friday, September 20, 13

Not only one way to order

<script>s


app.js view.js

helpers.jsview2.js

helpers2.jsmodel.js


app.js view.js

helpers.jsview2.js

helpers2.jsmodel.js

12

3

5

4

6


app.js view.js

helpers.jsview2.js

helpers2.jsmodel.js

12

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

1Results:


4

5

2

0 2

1 5

2 4

IN-DEGREES NODE

1 - 3Results:


4

5

0 5

1 4

IN-DEGREES NODE

1 - 3 - 2Results:


40 4

IN-DEGREES NODE

1 - 3 - 2 - 5Results:


1

4

5

2

3 1 - 3 - 2 - 5 - 4

4 - 5 - 2 - 3 - 1


http://howardlewisship.com/images/t5-service-dependencies.jpgFriday, September 20, 13

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

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

RequireJS


var module = (function(){ // private variables, methodsvar title = “”;function f1() {}

return {// public/privileged methodsgetTitle: function(){return title;

}}

}()) ;

MODULE PATTERN


define(function () {

var title = “”;function f1() {}

return {

getTitle: function() {return title;

} }

});

RJS MODULE PATTERN


define(id?, dependencies?, factory)


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


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

});



main.js------------require.config({baseUrl: ‘./js’,

paths: {‘view1’: ‘app/views/view1’

}});

require([‘view1’],function(view1){view1.init();

});



NO blocking!Friday, September 20, 13

require() asynchronous

de!ne() - de!ne.amd

AMDwell suited for browser


if ( typeof define === "function" &&define.amd ) {

define( "jquery", [], function () { return jQuery;

});}


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

});


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.htmljs /-- main.js -- vendor / -- require.js -- text.js-- partials / -- !le.txt


3 requests!Friday, September 20, 13

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.htmljs /-- main.js-- helpers.js-- app / -- views / -- view1.js -- vendor / -- require.jstools /-- build.js


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


OPTIMIZER

1 request!Friday, September 20, 13

exports.render = function() {};

var module = require(‘view1’);

NO de!ne()

require() synchronous

Server-side approach


npm install -g browserify


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


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



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>


Package management


“A package is a specific piece of

software installable”


PackagesOne or more modules


Name, Description, Version

Metadata




Metadata


Checksum



Metadata


Checksum

Dependencies


Package Manageris 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 ?Friday, September 20, 13

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.htmlpackage.jsonjs /-- 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


BowerMinimalistic & Agnostic



HTML/CSS/JS



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.htmlbower.jsonjs /-- app.js


bower install


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


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


https://github.com/jquery/jquery.git#

https://github.com/jquery/jquery.git#

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)└── requirejs#2.1.8

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


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 managementFriday, September 20, 13

source_file-----------

<import> <module2>;

// <use> <module2>;

$ npm install jquery

Package managementFriday, September 20, 13

http://requirejs.com

http://bower.io/

@sebarmeli

https://github.com/amdjs/amdjs-api/wiki/AMD

https://npmjs.org/WebExpo 2013, Prague (Czech Republic)


http://www.slideshare/sebarmeli/

http://www.slideshare/sebarmeli/

http://bower.io/

http://bower.io/



https://npmjs.org/

https://npmjs.org/

Dependency management & Package management in JavaScript

Technology

Transcript of Dependency management & Package management in JavaScript