Manage Those Dependencies! (scandev)

Slide 1

Slide 1 text

Jakob Mattsson @jakobmattsson

Slide 2

Slide 2 text

TUBSUVQT 3FDSVJUJOH "EWFSUJTJOH 'FFECBDL

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Manage those dependencies! @jakobmattsson

Slide 5

Slide 5 text

Web apps - not ”homepages”

Slide 6

Slide 6 text

"It's a piece of the stack that's been notably missing for years and after using it for a while now, I'm not sure how I lived without it." What is this referring to?

Slide 7

Slide 7 text

Let’s rewind my story

Slide 8

Slide 8 text

Discovering UNIX > apt-get install foobar 1999

Slide 9

Slide 9 text

> port install foobar Mac could do it as well 2004

Slide 10

Slide 10 text

Ruby and its gems 2006 > gem install foobar

Slide 11

Slide 11 text

Along came the iPhone 2007 > app store

Slide 12

Slide 12 text

Node package manager 2010 > npm install foobar

Slide 13

Slide 13 text

"It's a piece of the stack that's been notably missing for years and after using it for a while now, I'm not sure how I lived without it." What is this referring to? 2011

Slide 14

Slide 14 text

Even Microsoft is catching on! 2011 ”NuGet is a free and open source package manager for the .NET Framework”

Slide 15

Slide 15 text

What is the JS approach?

Slide 16

Slide 16 text

1. Find a library you want to use

Slide 17

Slide 17 text

2. Download the source

Slide 18

Slide 18 text

3. Manually put it alongside your own code

Slide 19

Slide 19 text

4. Let the global pollution begin

Slide 20

Slide 20 text

The pollution is just the beginning

Slide 21

Slide 21 text

We get a ﬂat pile of unrelated stuﬀ

Slide 22

Slide 22 text

A maintenance nightmare

Slide 23

Slide 23 text

And stupid habits Add semicolons to the beginning of your ﬁles! Copy-paste libs - why not small pieces of code too No choice but to check-in dependencies Premature minimiﬁcation

Slide 24

Slide 24 text

Piece of - you get the picture

Slide 25

Slide 25 text

Frontend devs WERE scriptkiddies

Slide 26

Slide 26 text

JavaScript is popular!

Slide 27

Slide 27 text

The medieval ages are over

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

CommonJS CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser

Slide 30

Slide 30 text

var foo = require(’./foo.js’); console.log(foo.square(4)); var bar = require(’./bar.js’); console.log(bar.version); console.log(bar.cube(4)); main.js We can load other ﬁles

Slide 31

Slide 31 text

exports.square = function(x) { return x * x; }; console.log(”loaded foo”); foo.js A module can have side-eﬀects

Slide 32

Slide 32 text

exports.version = ”0.1.0”; exports.cube = function(x) { return x * x * x; }; console.log(”loaded bar”); bar.js Modules can have multiple values

Slide 33

Slide 33 text

var foo = require(’./foo.js’); console.log(foo.square(4)); var bar = require(’./bar.js’); console.log(bar.version); console.log(bar.cube(4)); main.js Now run this

Slide 34

Slide 34 text

var coin = Math.random() > 0.5; var name = coin ? ‘foo’ : ‘bar’; var mod = require(’./’ + name + ’.js’); console.log(mod.version); main.js We can load dynamically

Slide 35

Slide 35 text

NPM

Slide 36

Slide 36 text

We can install packages > npm install foo > npm install bar var foo = require(‘foo’); console.log(foo.square(4));

Slide 37

Slide 37 text

package.json And publish them { "name" : "backbone", "description" : "Give your JS App some Backbone.", "url" : "http://backbonejs.org", "keywords" : ["util", "server", "client", "browser"], "author" : "Jeremy Ashkenas ", "dependencies" : { "underscore" : ">=1.3.1" }, "main" : "backbone.js", "version" : "0.9.2" } > npm publish

Slide 38

Slide 38 text

Browserify Make node-style require() work in the browser with a server-side build step, as if by magic!

Slide 39

Slide 39 text

Write ﬁles as if it was node.js // use relative requires var foo = require('./foo'); var bar = require('../lib/bar'); // or use modules installed by npm var domready = require('domready'); domready(function() { var elem = document.getElementById('result'); elem.textContent = foo(100) + bar('baz'); }); main.js

Slide 40

Slide 40 text

Use it in the browser > browserify main.js -o bundle.js Step 1 Step 2

Slide 41

Slide 41 text

Use it with require var main = require(”main”); (function() { var main = require(”main”); // .. use it here .. }()) Or better yet

Slide 42

Slide 42 text

It resolves nested dependencies

Slide 43

Slide 43 text

How it works // magic above... require.define("/main.js", function( require, module, exports, __dirname, __filename, process) { // code from main.js }); bundle.js

Slide 44

Slide 44 text

Server and client united

Slide 45

Slide 45 text

Ender The no-library library Ender is a full featured package manager for your browser.

Slide 46

Slide 46 text

For front-end developers who crave maintainable assets, Jam is a package manager for JavaScript. Unlike other repositories, we put the browser ﬁrst.

Slide 47

Slide 47 text

RequireJS A JavaScript module loader

Slide 48

Slide 48 text

RequireJS A JavaScript module loader NOT a package manager

Slide 49

Slide 49 text

Asynchronous Module Deﬁnition require(['helper/util'], function(util) { // use util... });

Slide 50

Slide 50 text

So what does util.js contain then? define(['dep1', 'dep2'], function(dep1, dep2) { return { foo: function() { // ... }, bar: 42 }; }); util.js

Slide 51

Slide 51 text

Simpliﬁed CommonJS wrapping define(function(require) { var dep1 = require(”dep1”); var dep2 = require(”dep2”); return { foo: function() { // ... }, bar: 42 }; }); util.js

Slide 52

Slide 52 text

Computed deps will cause issues define(function(require) { var dice = Math.random() > 0.5; var name = dice ? ‘foo’ : ‘bar’; var mod = require(’./’ + name + ’.js’); // doh!! console.log(mod.version); return {}; }); util.js

Slide 53

Slide 53 text

Summary - Asyncronous - Not coupled with any packaging system - Superset of CommonJS modules (almost) - Slightly more complex - Some gotchas

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

Bower is an index bower install jquery bower install git://github.com/components/jquery.git bower install http://foo.com/jquery.awesome-plugin.js bower install ./repos/jquery

Slide 56

Slide 56 text

Write a bower declaration { "name": "my-project", "version": "1.0.0", "dependencies": { "mocha": "1.8.1", "angular-ui": "0.3.1", "select2": "3.2.0", "bootstrap": "2.1.1", "jquery-ui": "1.9.2", "jquery": "1.8.3" } }