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”

<< depends on >>

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

Model DOES NOT change frequently

View DOES change frequently

Acyclic Dependencies

PrincipleFriday, September 20, 13

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

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

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

app.js view.js

helpers.jsview2.js

helpers2.jsmodel.js

IN-DEGREES NODE

1Results:

IN-DEGREES NODE

1 - 3Results:

IN-DEGREES NODE

1 - 3 - 2Results:

IN-DEGREES NODE

1 - 3 - 2 - 5Results:

3 1 - 3 - 2 - 5 - 4

4 - 5 - 2 - 3 - 1

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

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

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

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

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

Package management

“A package is a specific piece of

software installable”

PackagesOne or more modules

Name, Description, Version

Metadata

Checksum

Metadata

Checksum

Dependencies

Package Manageris the TOOL to...

Speed up your development work"ow

Automate common tasks

DRY with Repository / Registry

Common Operations

Installing

Removing

Installing

Removing

Searching

Installing

Removing

Searching

Upgrading

Installing

Removing

Searching

Upgrading

Publishing

Package Depedencies

=1.1.0

>1.2.0

Package Depedencies

=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

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

BowerMinimalistic & Agnostic

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

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)

Dependency management & Package management in JavaScript

Technology

Transcript of Dependency management & Package management in JavaScript

Opioid Pain Management & Dependency

Agile Dependency Management

Composer: Game Changing Dependency Management

Dependency Management with Carthage for iOS · Dependency Management with Carthage for iOS What is Dependency Management? When working in iOS, there are plenty of amazing third party

Dependency Management - Modules and Packages - Qafoo GmbH

Dependency Analysis in the HTML5, JavaScript and CSS3 Stack … · between HTML5, JavaScript and CSS3. Developers do not have tools that can do dependency analysis of their code and

Enterprise PMO Dependency and Risk Management

Dependency management in golang

Simplify your external dependency management - DPC11

JavaScript dependency management

Automatic Software Dependency Management …trap.ncirl.ie/3300/1/gavindmello.pdfAutomatic Software Dependency Management using Blockchain Gavin D’mello x17110483 Msc Research Project

DEPENDENCY MANAGEMENT MICHAEL JONES - …nwcpp.org/talks/2018/DependencyManagement.pdf · OUTLINE My Path to Caring about Dependency Management Definitions Software Development Goals

Dependency management

Dependency Injection Pattern in JavaScript, Speakers' Corner by Evgeny Dmitriev, Frontend-developer (Ciklum, Minsk)

Correlation and Dependency in Risk Management - …€¦ · Correlation and Dependency in Risk Management Paul Embrechts, Alexander McNeil & Daniel Strauman Departement Mathematik,

PHP Dependency Management with Composer

Gradle Dependency Management - Sample Chapter

Front End Dependency Management at CascadiaJS

Management of tobacco dependency - moph.gov.qa · Management of tobacco dependency Medicine > Thoracic medicine > Management of tobacco dependency Published: 27-Apr-2017 Valid until:

Game Changing Dependency Management