Dependency management and Package management in JavaScript

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Friday, September 20, 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Dependency management Friday, September 20, 13

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Stable Dependencies Principle Friday, September 20, 13

Slide 14

Slide 14 text

Friday, September 20, 13

Slide 15

Slide 15 text

Unstable Stable View Model Friday, September 20, 13

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Acyclic Dependencies Principle Friday, September 20, 13

Slide 18

Slide 18 text

Friday, September 20, 13

Slide 19

Slide 19 text

View Model Router Friday, September 20, 13

Slide 20

Slide 20 text

Avoid Cycles! Friday, September 20, 13

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Friday, September 20, 13

Slide 31

Slide 31 text

Not only one way to order s Friday, September 20, 13

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

RequireJS Friday, September 20, 13

Slide 43

Slide 43 text

Friday, September 20, 13

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Friday, September 20, 13

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

NO blocking! Friday, September 20, 13

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Friday, September 20, 13

Slide 56

Slide 56 text

Friday, September 20, 13

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Friday, September 20, 13

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Friday, September 20, 13

Slide 64

Slide 64 text

3 requests! Friday, September 20, 13

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

OPTIMIZER 1 request! Friday, September 20, 13

Slide 70

Slide 70 text

Friday, September 20, 13

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

npm install -g browserify Friday, September 20, 13

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Package management Friday, September 20, 13

Slide 77

Slide 77 text

Friday, September 20, 13

Slide 78

Slide 78 text

“A package is a speciﬁc piece of software installable” Friday, September 20, 13

Slide 79

Slide 79 text

Packages One or more modules Friday, September 20, 13

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Common Operations Friday, September 20, 13

Slide 88

Slide 88 text

Installing Friday, September 20, 13

Slide 89

Slide 89 text

Installing Removing Friday, September 20, 13

Slide 90

Slide 90 text

Installing Removing Searching Friday, September 20, 13

Slide 91

Slide 91 text

Installing Removing Searching Upgrading Friday, September 20, 13

Slide 92

Slide 92 text

Installing Removing Searching Upgrading Publishing Friday, September 20, 13

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Friday, September 20, 13

Slide 99

Slide 99 text

Node.js Friday, September 20, 13

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

npm install Friday, September 20, 13

Slide 104

Slide 104 text

npm install Commands Friday, September 20, 13

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

npm list Commands Friday, September 20, 13

Slide 108

Slide 108 text

npm list Commands npm uninstall Friday, September 20, 13

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

Bower Friday, September 20, 13

Slide 112

Slide 112 text

Bower Minimalistic & Agnostic Friday, September 20, 13

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

npm install -g bower Friday, September 20, 13

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

bower install Friday, September 20, 13

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

bower register Friday, September 20, 13

Slide 126

Slide 126 text

Friday, September 20, 13

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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